Terrain — Documentation

Shopify theme for outdoor, hiking, cycling, camping and travel equipment stores · Version 1.0.0 · Versión en español

Note. Terrain has not yet been tested in a real Shopify store (status: NOT_RUN). All checks so far were local. See section 9.

Labels in bold are the names you see in the theme editor in English. Texts in “quotation marks” are what shoppers see.

Contents

1. Introduction
2. Installation and choosing the preset
3. Global settings
4. Sections and blocks
5. Templates
6. Theme features
7. FAQ and troubleshooting
8. Support
9. Changelog

1. Introduction

Terrain is a theme for stores that sell equipment for being outside: hiking, light carry, camping, cycling and travel. It shows the data you publish (price, options, stock, variant weight) and never invents fit, compatibility or temperature ratings.

Terrain has five presets. Each one has its own header, menu, product card, collection page, product page, quick view, cart, search, footer, password page and gift card page, not just different colors:

• Terrain — a contour-map layout organized by activity, with waypoints on images and “Add to pack” on cards.
• Traverse — a pace guide for light carry: dense equipment rows, declared weights and “Load it” on cards.
• Bivouac — a camp table: warm cards that open like pieces laid on a table, and “Add to the table”.
• Switchback — a ride log for cycling: bike load zones, side-by-side option comparison and “View B” second photos.
• Wayfarer — a packing plan for travel: an editorial cover, a packing list shoppers can tick and “Pack this”.

The storefront is translated into English, Spanish, French, German and Italian.

2. Installation and choosing the preset

2.1 Add and publish

1. In Shopify admin, go to Online Store › Themes and add Terrain to your theme library. It is added unpublished; your live store does not change.
2. Use Customize to open the theme editor and Preview to browse with your own products.
3. Before Publish, check the home page, a product, a collection, search and the cart. Duplicate the theme before large changes.

2.2 Choose a preset when you add the theme (recommended)

When you add Terrain, pick one of the five presets. Shopify installs that preset's settings (fonts, color schemes, color mode) and its own templates: home page, product, collection, search, cart, blog, article, page, contact, collections list, 404 and password, plus its header and footer groups with the preset's announcement texts. Products, images and menus are not included: you choose your own in the editor.

All presets start in light mode with the light and dark switch turned on.

2.3 Change the preset later: Composition

Theme settings › Appearance › Composition (Terrain, Traverse, Bivouac, Switchback, Wayfarer) switches the design and behavior of the header, menu, cards, collection page, product page, quick view, cart, search, footer, password and gift card pages.

Keep in mind:

• Composition does not change your colors or fonts. Edit them in Colors and Appearance.
• It does not replace your templates. Your home page keeps its sections. Preset-specific sections (for example Ride opening or Camp table) keep their content but take the new preset's look. For another preset's full home page, add the theme again and choose that preset.
• Applying a theme style in the editor follows Shopify's rules for theme styles: design settings are copied; templates are not replaced.

3. Global settings

Open Theme settings in the theme editor.

3.1 Appearance

• Composition — the preset (2.3).
• Heading font and Body font — any font from Shopify's font library.
• Enable expressive motion — turns the preset's animations on or off. Visitors who ask their device for reduced motion always get calm transitions.

3.2 Colors and color schemes

Terrain uses Shopify color schemes. Each preset ships eight schemes. Every scheme has these colors: Background, Background gradient, Surface, Text, Secondary text, Links and accents, Highlight, Text on highlight, Primary button, Primary button label, Primary button border, Secondary button, Secondary button label, Borders and inputs, Focus outline, Shadow, Image backdrop, Sale badge, Sale badge label, Success message and Error message.

Under Areas you choose which scheme each part of the store uses: Page color scheme (background behind all sections), Product card color scheme, Badge color scheme, Cart drawer color scheme, Cart footer color scheme, Quick view color scheme, Menu color scheme, Search color scheme, Popup color scheme and Notice color scheme (free-shipping bar and short notices). Many sections also have their own Color scheme setting.

3.3 Dark mode

Under Colors › Dark mode:

• Color mode — Light, Dark or Match visitor's device. Dark mode swaps each light scheme for the dark scheme you pick below.
• Show light and dark switch — adds a switch to the header and footer. The visitor's choice stays on their device.
• Dark scheme for page and signature, Dark scheme for soft and inverse, Dark scheme for accent — the three schemes used in dark mode.

Check the contrast of your own colors in both modes after editing a scheme.

3.4 Brand and sharing

• Favicon — shown at 32 × 32 px in the browser tab.
• Fallback social sharing image — used only when a page has no image and no store-wide sharing image is set in Shopify.

The logo is set in the Header section (3.6).

3.5 Cards, stock and shipping

• Quick buy on cards — adds the chosen variant without leaving the list. Products with several options open the quick view.
• Second photo on cards — uses the product's next image, skipping images assigned to another variant. Per product, an integer metafield custom.card_second_view picks the image position (0 turns it off).
• Labels: "New" label for products published in the last (days; 0 hides it), Sale label (Percentage saved, Amount saved or Hidden), Show "Sold out" label, Tag prefix for labels (a tag such as label:Recycled shows “Recycled”) and Label metafield (a single-line text metafield, such as custom.card_label).
• Stock: Show stock on product pages (only for variants that track inventory) and Show the exact quantity at or below (above that amount the page shows “In stock”).
• Free-shipping progress: Free-shipping threshold (store currency) and Thresholds in other currencies (see 6.3).

3.6 Header and menu

The Header section (header group) has: Color scheme, Logo, Menu, Brand name (optional), Menu reference product, Second reference product, Menu context image, Menu note, Field guide page and Guide link label. The products, image and note appear inside the open menu panel, whose layout changes with the preset.

Theme settings › Navigation › Activity menu is used by the Terrain preset to list activity collections in the menu, search and product page. If empty, Terrain uses the children of the first main-menu link that has children.

Above the header, the Announcement bar has Color scheme, Alignment, Rotate announcements automatically and Change every, with Announcement blocks (Text, Link, Link label, Open link in a new window).

3.7 Footer

The Store footer section (footer group): Color scheme, Heading, Text, Menu, Main menu heading, Help menu, Help menu heading, Contact destination, Contact link label, Show published store policy links, Show newsletter sign-up, Newsletter heading, Show Follow on Shop and Show language and country selectors. Social links come from Theme settings › Social media (Instagram, Facebook, X (Twitter), YouTube, TikTok, Pinterest; empty fields are not shown).

3.8 Cart

The cart opens as a drawer from the header and also has a full cart page. Both show line items with quantity controls, the free-shipping bar, an order note, the total with the tax note and the checkout button. Their colors come from Cart drawer color scheme and Cart footer color scheme. The cart page template also includes Optional gift details (5.1).

3.9 Search

The search button in the header opens a search dialog with suggestions as the shopper types: products, pages and blog articles, each preset with its own presentation. Escape closes it. Its colors come from Search color scheme. Pressing Enter opens the search results page, with filters and sorting.

4. Sections and blocks

4.1 General sections (all presets)

• Slideshow — Layout, Height, Full page width, Rotate slides automatically, Change every, Slideshow description; Slide blocks with Image, Video, Subheading, Heading, Text, button and Text position.
• Image with text — Image, Image ratio, Image position, Image width, Text vertical alignment, Image label, heading, text and up to two links.
• Rich text — Layout, Alignment, Text width, Heading size, text and button.
• Collection list — Collections, Image ratio, Columns on desktop, Mobile layout (Grid or Swipe), Show product count, view-all link.
• Blog posts — Blog, Articles to show, Columns on desktop, Image ratio, Mobile layout, show image, date, author, excerpt and comment count.
• Video — YouTube or Vimeo URL or Uploaded video, Play uploaded video muted in a loop, Cover image, Video title, ratio and texts.
• Featured product — Product, Color scheme, and the same blocks as the product page (5.2).
• Product selection — Heading, Collection, Products to show, Color scheme.
• Featured selection — Heading, Text, Collection, Products to show.
• Newsletter — Heading, Text, Color scheme.
• Blog stories — Blog, Heading, Introduction, Articles.
• Editorial feature — Image, Heading, Text, Link, Link label.
• Editorial image study — two editorial images with labels, caption, Product, Link and Field label.
• Landscape introduction — Heading, Text, Collection, two images, Product, Menu.
• Activity index / Activity explorer — Activity blocks with Collection, Heading, Context note (and Image in the explorer).
• Layer guide — Layer blocks with Product, Heading, Text. Editorial only: it does not calculate temperatures.
• Equipment comparison — Comparison reference blocks (Product, Exact option 1 reference, Heading).
• Your selected load — Reference piece blocks (Product).
• Packing checklist — Packing item blocks; Remember the packing list on this device.
• Camp canvas — Camp reminder blocks (Reminder type, Field label, Heading, Text, Product, Guide page).
• Custom Liquid — your own Liquid code.

Slideshow, Image with text, Collection list, Blog posts and Video cannot be added to the header or footer groups; Rich text cannot be added to the header group.

4.2 Preset sections

These sections are designed for one preset but can be added with any Composition.

In sections with Selected piece blocks, choose a different product in each block; empty or repeated products are left out. Include initially decides whether the piece starts selected.

4.3 Product page sections

• Product — main section, built from blocks (5.2).
• Product reading studio (product template only) — Reading layout (use the preset layout or pick one of the five), editorial image, introduction and caption, Show published store policy links. Blocks: Reading chapter, Question and answer, Guide link, Reference comparison and Separate companion reference. Each block can belong to one product (Product this content belongs to) or apply to all products (This information applies across the store).
• Complementary products — products from Shopify's complementary recommendations (7).

5. Templates

5.1 Template overview

Each preset installs its own version of these templates with different companion sections. The table shows the main section.

To use the contact template, create a page in Online Store › Pages and choose it in Theme template.

5.2 Product page blocks

Title, Price, Options, Inventory status, Tax information, Gift card recipient, Buy buttons (Show dynamic checkout buttons), Description, Pickup, Vendor (Link the vendor name), Custom Liquid, app blocks, and:

• Associated field value — a declared value with Field label, Unit and optional exact option references.
• Associated product text — a text for one product.
• Information by task — heading, text and Field guide page, optionally for exact variants.
• Product format guide — a guide for one product's formats, linked to a Field guide page.

The product page also includes an image gallery with zoom, product video and 3D models, stock messages, quantity price breaks when your store uses them, and a purchase summary that appears once the add button scrolls out of view.

6. Theme features

6.1 Quick view and quick buy

Cards open a quick view with the product's options and buy buttons, without leaving the page. With Quick buy on cards on, single-option products are added directly from the card; each preset has its own label (“Add to pack”, “Load it”, “Add to the table”, “Add”, “Pack this”). Products with several options open the quick view.

6.2 Gallery and Details views, comparison and Load more

• Gallery / Details — on the collection page, shoppers switch between a visual grid and a detailed list (Enable details view).
• Compare — shoppers select up to three products and compare the selected option's price, availability, declared weight (the variant weight in Shopify) and reference code (Enable product comparison). The theme never picks a winner.
• Load more — loads the next page into the grid ("Load more" button); page links remain without JavaScript.
• Second photo — every card has a button to show the second photo, so touch and keyboard users get it too.

6.3 Free-shipping bar

Shown in the cart drawer and cart page once Free-shipping threshold (store currency) is set. Use the same amount as in your shipping settings. For other currencies, add pairs in Thresholds in other currencies (for example USD:120, GBP 95.50); currencies without a pair hide the bar, and no conversion is applied. The bar always notes that destinations and rates are confirmed at checkout.

6.4 Predictive search

See 3.9. Suggestions show products, pages and blog articles.

6.5 Filters and sorting

The collection and search pages use the filters you set up in Shopify (Search & Discovery app): checkboxes, price range, a count of results, Clear filters and Sort by. Updates are announced to screen readers.

6.6 Saved pieces and recently explored

On every page except the cart, shoppers can save products and see the products they explored recently. This list is stored only in their browser on that device.

6.7 Preset tools

• Switchback — side-by-side comparison of a product's formats with a reference, weight difference and a shareable link.
• Wayfarer — a packing list shoppers can tick, save on their device and share as a link.
• Traverse — a weight summary of the selected pieces, using only published weights.
• Bivouac and Terrain — scene images with product points and selections that add each piece as its own cart line.

These tools organize choices. They do not calculate fit, load capacity, compatibility or conditions.

6.8 Gift options

Gift card recipient lets shoppers send a gift card to someone by email with a message and send date. On the cart page, Optional gift details lets them save a message with the order and, if you choose one, add a wrapping product.

7. FAQ and troubleshooting

I changed Composition but my home page did not change. Composition changes the look and behavior, not the sections in your templates. To get another preset's home page, add the theme again and choose that preset (2.3).

Composition did not change my colors or fonts. That is expected. Edit Colors and Appearance › Heading font / Body font.

The free-shipping bar does not show. Set Free-shipping threshold (store currency). If the shopper uses another currency, add a pair for it in Thresholds in other currencies.

Complementary products shows nothing. The section uses Shopify's complementary recommendations. Set them up for your products in the Search & Discovery app.

There are no filters on my collection. Filters come from the Search & Discovery app. Add them there.

Weights or comparisons show “Not declared”. Enter the weight on each variant in Shopify. The theme never estimates missing values.

Stock does not show on the product page. Turn on Show stock on product pages and make sure the variant tracks inventory.

Dark mode looks wrong with my colors. Review the three dark schemes in Colors › Dark mode and the contrast of text and buttons in each.

Animations feel too strong. Turn off Enable expressive motion. Visitors with reduced motion on their device already get calm transitions.

The second photo on cards shows the wrong image. Set the integer metafield custom.card_second_view on that product (0 turns it off).

A preset section shows sample content. Until you choose products, collections or images, sections show placeholders. Fill in their settings in the editor.

8. Support

Contact us through https://lizardassets.com/pages/soporte. Include your store URL, the preset, and the steps to reproduce the problem.

We reply within 24 hours. Support is provided for as long as the theme is on sale.

Covered: questions about using the theme's settings, and defects in the theme.

Not covered: custom code, third-party apps and custom design work.

9. Changelog

1.0.0 — first public version

• Five presets (Terrain, Traverse, Bivouac, Switchback, Wayfarer), each with its own header, menu, cards, collection, product page, quick view, cart, search, footer, password and gift card pages, and its own templates.
• Color schemes with dark mode, an optional light and dark switch and calm motion for reduced-motion users.
• Quick view and quick buy, Gallery and Details views, product comparison, Load more, filters and sorting, predictive search and a free-shipping bar with per-currency thresholds.
• Preset sections and the Product reading studio for product content.
• Storefront in English, Spanish, French, German and Italian.
• Testing in a real Shopify store is pending (NOT_RUN); checks for this version were local.