Six sections handle product rendering across the storefront. The largest,Documentation Index
Fetch the complete documentation index at: https://voyage-theme.fasil.in/llms.txt
Use this file to discover all available pages before exploring further.
main-product, is the PDP — fifteen block types compose its buy column. The others surface products elsewhere: as a featured showcase, a curated grid, the home-page “new arrivals” rail, or as recommendations below the PDP.
| Section | Where it lives |
|---|---|
Product (main-product) | The PDP. Pinned to the product template. |
| Featured product | Any template. One merchant-chosen product. |
| Featured collection | Any template. A grid drawn from one collection. |
| Home · New arrivals | Any template. Designed for the home page. |
| Related products | Pinned to the product template. ML-driven. |
| Complementary products | Pinned to the product template. Search & Discovery rules. |
Product — sections/main-product.liquid
The PDP. A two-column layout: sticky gallery on the left, block-driven buy column on the right. Below the hero, an optional long description and accordion stack. Renders Shopify rich product media (image, video, 3D model, external video), accelerated checkout, Shop Pay Installments, selling plans, unit pricing, pickup availability, Follow on Shop, app blocks, and custom Liquid.
Available on: Product template (pinned).
Section settings
Layout
Show the “Back to ” link and the Home › Collection › Product crumb trail above the gallery.
How many gallery thumbnails to render (3–6).
Details section
Show the full product description below the gallery. Useful when the
description block in the buy column shows only a short summary.Used only when a product has no description in Shopify admin.
Blocks (15 types)
All blocks below render inside the buy column form. The default preset assembles a sensible order — you can reorder, hide, and duplicate as needed.Eyebrow text (limit 1)
Small uppercase line shown above the product title. Falls back to
product.type if blank.Title (limit 1)
Append the currently selected color value in the script flourish font, live-updated by the variant picker.
Price (limit 1)
Show a tax / VAT note next to the price.
Tax note text. Falls back to the
products.product.tax_included translation if blank.Show the Shop Pay Installments banner via
form | payment_terms. Renders when the merchant has Shop Pay Installments enabled and the product qualifies.variant.unit_price_measurement) and compare-at price automatically — these are not configurable via settings.
Variant picker (limit 1)
Show the in-line “size finder” helper that recommends a size based on the customer’s size in other houses (Loro Piana, Brunello Cucinelli, Zegna, Brioni, Kiton, Drake’s, Massimo Dutti, Uniqlo).
Optional link to a full size guide page.
Subscription plans (limit 1) — selling_plans
Section label for the selling-plans group. Falls back to the
products.product.purchase_options translation.Quantity selector (limit 1)
Label shown above the stepper.
quantity_selector block is present, an inline stepper is rendered inside the buy buttons row so the form always submits a quantity.
Buy buttons (limit 1)
Add-to-cart button label.
Label when the selected variant is unavailable.
Show the heart-icon wishlist button next to the ATC button.
Render accelerated checkout buttons (Shop Pay, Apple Pay, Google Pay, PayPal) via
form | payment_button.Pickup availability (limit 1)
No settings. Renderscurrent_variant.store_availabilities when at least one location is configured. Shows a green dot for “Available” and a muted state for “Not available.”
Buy column description (limit 1) — description
No settings. Renders product.description as-is inside the buy column. Pair with show_long_description: false if you want the description to appear here and not below.
Perks list (limit 1) — perks
A bulleted list of 3 perks (shipping, returns, repair).
First perk.
Second perk.
Third perk.
Provenance list (limit 1) — provenance
A definition list of three term/description pairs (cloth, cut, finish).
First term.
First description.
Second term.
Second description.
Third term.
Third description.
Made-to-measure CTA (limit 1) — bespoke_cta
A small call-out card with eyebrow + body + ghost-style link button.
Eyebrow above the body line.
Body copy.
CTA label.
CTA destination — typically a bespoke / made-to-measure page.
Share (limit 1)
Label on the share button.
Render Shopify’s
shop-follow-button web component, which appears only when the shopper has the Shop app installed and is signed in.Accordion section (no limit) — accordion
Multiple accordion blocks can be added. Each renders as a <details> element in the section below the gallery.
Summary text shown when the accordion is collapsed.
Body content.
Metafield key under
custom.*. If filled, the value of product.metafields.custom.{key} takes precedence over the content field. Lets you write per-product details once in admin and reuse across the storefront.Render the accordion open on first paint.
Custom liquid (no limit)
Arbitrary Liquid / HTML / CSS / JS rendered as-is. Useful for app snippets that don’t have a dedicated app block.
App blocks — @app
The @app block type lets merchants add any Shopify app block that targets the product page. Each block renders in the order it’s placed in the buy column. See Custom & advanced for the full pattern.
Default preset (block order)
- Eyebrow text
- Title
- Price
- Variant picker
- Buy buttons
- Pickup availability
- Perks list
- Provenance list
- Made-to-measure CTA
- Accordion · Details (
metafield_source: details) - Accordion · Composition & Care (
metafield_source: composition_care) - Accordion · Shipping & Returns
- Accordion · Payment Methods
Structured data
The section emits two JSON-LD blocks:Product (with name, image, description, brand, SKU, offer / price / availability) and BreadcrumbList (three levels if the visitor arrived through a collection, two levels otherwise).
When to use
There’s one product section per theme — this is it. Configure block order to match your priorities: subscription brands should pinselling_plans above buy_buttons; brands with rich storytelling should add description to the buy column and disable show_long_description. For apps that target the PDP, use the @app block. For one-off code, use the custom_liquid block.
Featured product — sections/featured-product.liquid
Single-product showcase: image on one side, buy column on the other. Block-based — uses the same content vocabulary as the PDP (eyebrow, title, price, variant picker, description, buy buttons, share, custom Liquid, app blocks) but in a flatter form.
Available on: All templates.
Section settings
The product to feature. If blank, falls back to the first product in
collections.all.Image position on desktop. Options:
left, right. Mobile always stacks image-then-text.Blocks
Eyebrow text (limit 1) — text
Small uppercase line above the title.
Title (limit 1)
No settings. Rendersproduct.title.
Price (limit 1)
No settings. Renders price + optional compare-at price, live-updated by the variant picker.Variant picker (limit 1)
No settings. Renders one row per option with chip-style values.Description (limit 1)
Truncate the description at this many words. Range 10–200, step 10.
Append a “Read more” link to the full product page.
Buy buttons (limit 1)
ATC label.
Sold-out label.
Render Shop Pay / Apple Pay / Google Pay / PayPal buttons.
View product link (limit 1) — share
Link to the product detail page.
Custom liquid (no limit)
Arbitrary Liquid.
App blocks — @app
Same @app pattern as main-product.
Default preset (block order)
Eyebrow → title → price → variant picker → description → buy buttons → share.When to use
Featured product is for moments where one product needs to lead — a hero product on the home page, a “look of the week” callout on a content page, or a product spotlight inside a press article. For grids of multiple products, use Featured collection.Featured collection — sections/featured-collection.liquid
Heading + product grid drawn from one merchant-chosen collection. Reuses the global product-card snippet for visual consistency with the PLP.
Available on: All templates.
Section settings
Heading
Small uppercase line above the heading.
Optional script word that precedes the heading.
Serif heading.
Content
The source collection.
How many products to display. Range 4–24.
Grid columns. Options:
2, 3, 4, 5.View all
Render a “View all” link in the header that goes to the collection page.
View-all link label.
Blocks
None — the section has no block types. Products come from the chosen collection.When to use
Featured collection is the workhorse for any “shop the look” / “best of the season” / “shop this story” treatment that needs to render real products. Pick a collection, set a count, done. For a heading-led home rail with a script-font treatment, use Home · New arrivals.Home · New arrivals — sections/home-new-arrivals.liquid
Script-headed product grid drawn from a chosen collection. Renders 4–16 products with reveal animations and a “View all” magnetic CTA. Visually distinct from featured-collection — a single, very large script heading on the cream surface background.
Available on: All templates. Designed for the home page.
Section settings
The script-font heading. Rendered as a single phrase in the calligraphic accent font.
Scales the heading from 60% to 140%.
Source collection. Falls back to
collections.all if not set or empty.Products to show. Range 4–16, step 4. (Default in the home preset is 4; the slider exposes higher values.)
Blocks
None.When to use
Use new arrivals as a home-page rail when you want the heading itself to do the work — a single calligraphic phrase (“New Arrivals”, “The Edit”, “Just In”) above a grid of 4–8 products. For a more traditional eyebrow + heading + grid pattern, use Featured collection.Related products — sections/related-products.liquid
ML-driven product recommendations on the PDP, sourced from Shopify’s /recommendations/products.json?intent=related API. Lazy-loaded — the section ships with empty markup and theme.js fetches recommendations after first paint. Falls back to product.collections.first if no recommendations are returned.
Available on: Product template (enabled_on pinned).
Section settings
Master toggle.
Scales the heading 60–140%.
Eyebrow line.
Optional script heading shown above the main heading.
Main heading.
Number of products. Range 2–10.
Grid columns. Options:
2, 3, 4.Render a “View all” link in the header.
Link label.
Link destination. Falls back to
/collections/all.Blocks
None.When to use
Related products is the default cross-sell band below the PDP. It’s powered by Shopify’s recommendation engine, so you don’t pick the products — Shopify does, based on customer behavior. For curated cross-sells, use Featured collection on the product template. For Search & Discovery-driven “pair with” suggestions, use Complementary products.Complementary products — sections/complementary-products.liquid
“Pair with” recommendations on the PDP, sourced from Shopify’s /recommendations/products.json?intent=complementary API. Requires the Search & Discovery app installed and complementary product rules defined in admin. The section renders empty (no heading, no markup) when no rules return matches.
Available on: Product template (enabled_on pinned).
Section settings
Master toggle. Requires Search & Discovery + rules.
Scales the heading 60–140%.
Eyebrow line.
Main heading.
Number of products. Range 2–6.
Grid columns. Options:
2, 3, 4.Blocks
None.When to use
Complementary is the merchant-curated counterpart to related. Use it for explicit pairing rules — “buy this shirt, pair with these trousers.” It requires more setup (rules in Search & Discovery), but the results are deterministic. Pair it with Related products on the PDP: complementary above for “pair with,” related below for “you may also like.”Cross-reference
Templates · Product page
See how
main-product, related-products, and complementary-products are wired in the product template.Commerce sections
Cart, collection (PLP), and bundle — the rest of the commerce surface.
Custom & advanced
Custom Liquid block + the
@app block type used inside main-product and featured-product.