Section reference
Mercer’s 30+ merchant-facing sections, what each does, and what each setting controls. Sections are grouped by category. Within each section, settings are listed top-to-bottom in the order they appear in the Editor.
For background on what a section is and how it relates to blocks and templates, see Theme Editor walkthrough.
Categories
- Hero sections — seven designed heroes: the editorial magazine cover (Mercer’s default hero) plus the six signature heroes (one per other preset, with a second for Bold Pop and a heritage masthead).
- Content sections — image with text, multi-column, testimonials, pull-quote, editorial story, image hotspot, lookbook, before / after, press coverage, collection navigation, promo sections, FAQ, newsletter, featured collection, featured blog, slideshow, video, and page-numbered collection grid.
- Product and collection sections — featured product, B2B quick order, related products, recently viewed, product card.
- Custom Liquid section — for embedded HTML / Liquid.
- Chrome sections — header, promo popup, footer, mobile bottom nav.
- Template-specific sections —
main-*sections that drive each template.
Hero sections
Each preset ships with a designed hero. You can use any hero on any preset — the heroes aren’t preset-locked — but the design tokens (palette, type) align best with the preset they’re named for.
Editorial magazine cover (hero-magazine-cover)
Mercer’s flagship hero. A masthead row (left / center / italic / right labels), a large image with an overlapping headline, optional page number, and a numbered “in-this-issue” index strip. Designed for editorial fashion / beauty.
| Setting | Type | Notes |
|---|---|---|
| Masthead — left | text | E.g. “Spring 2026” |
| Masthead — center (italic) | text | Italic display font, e.g. “No. 03” |
| Masthead — right | text | E.g. “Outerwear” |
| Masthead rule weight | range (1–4 px) | Border thickness above + below masthead |
| Headline | richtext | The big over-image headline |
| Hero image | image_picker | The hero image. Recommended ratio 3:2. |
| Image alt text | text | A11y. Set this. |
| Headline overlap (desktop) | select | How far the headline overlaps the image: Small (32 px) / Medium (56 px) / Large (72 px) |
| Show page-number badge | checkbox | ”Page 12” badge top-right of image |
| Badge text | text | E.g. “Page 12” or “01 / 24” |
| Show index strip below hero | checkbox | Bottom row of numbered “in-this-issue” entries |
Blocks: up to 8 Index item blocks. Each block has Page number, Heading, Link.
Pairs best with: Mercer preset.
Heritage triple-rule masthead (signature-heritage-masthead)
A heritage-feel section: established date, oversized title, hairline
- thick rules above and below, an image, and an attached product display with up to 12 ledger rows (“Material — Wool”, “Origin — Portugal”, “Construction — Hand-finished”).
Best for brands with a heritage / craftsmanship story.
Quiet single product (signature-luxe-singleproduct)
A single-product, very-spaced layout. Volume number, large pull-quote, italic attribution, an image, product title + meta + CTA. Up to 8 spec rows (label / value).
Best for fragrance / fine-jewelry feel.
Pop color block (signature-pop-colorblock)
Stacked color blocks. Each block has its own foreground / background color (live token on the block itself, not theme-wide). Each block has caption / title / subtitle / image / CTA, plus a “side” toggle to flip image alignment.
Best for high-energy DTC beauty.
| Setting | Type | Notes |
|---|---|---|
| Image rotation amount | range | Slight degree rotation per block (0–9°, default 6°) |
Blocks: up to 8 Color block blocks. Each block has bg_color,
fg_color, eyebrow, title, subtitle, image, image_alt, cta_label,
cta_link, side. Plus @app.
Pop H-scroller (signature-pop-hscroller)
Horizontal scrolling product cards with a rotating tone palette. Auto-rotates the card backgrounds across the configured tones for a playful effect.
Settings: heading, source collection, product limit (3–16, default 8), tones (5 paired background / ink colors).
Tech spec strip (signature-tech-specstrip)
Designed for the Tech Forward preset. Terminal-style nav path, a status-line tagline, an image with a corner reticle, kicker / heading / body, two CTAs, and a “spec strip” of label / value pairs along the bottom.
| Setting | Type | Notes |
|---|---|---|
| Prompt path | text | Breadcrumb-style path, e.g. ~/products/ |
| Tagline or status line | text | Tagline / status line, e.g. // Online now |
| Image / Alt | image_picker / text | Hero image |
| Image caption (filename style) | text | Sub-caption rendered under image |
| Kicker / Heading / Body | text / richtext / richtext | Main copy |
| CTA primary / secondary | label + URL pair × 2 | Two buttons |
Blocks: up to 8 Navigation item blocks (label / link) for the
terminal-style nav path, up to 6 Spec cell blocks (label / value /
description), up to 6 Image reticle blocks for the corner annotations,
plus @app and Custom Liquid.
Warm collections grid (signature-warm-collections)
Designed for Warm Craft. Optional announcement bar above the section, then a 2 / 3 / 4-column collection grid with rounded card corners and soft drop shadows. Each block is one collection.
| Setting | Type | Notes |
|---|---|---|
| Show announcement bar | checkbox | Toggle the announcement bar |
| Message | text | E.g. “Free shipping over $80” |
| Caption / Heading | text / richtext | Section copy |
| Card corner radius | range (16–32 px, default 24) | Card corner radius |
| Image corner radius | range (8–24 px, default 16) | Image corner radius |
| Columns (desktop) | select | 2 / 3 / 4 |
| Columns (mobile) | select | 1 / 2 |
Blocks: up to 8 Collection card blocks (collection picker, title override, image override, count label, link).
Content sections
Image with text (image-with-text)
Two-column section with an image on one side and text on the other. Workhorse content section.
| Setting | Type | Notes |
|---|---|---|
| Image / Alt | image_picker / text | The image |
| Image ratio | select | Square, Portrait (4:5), Portrait (3:4), Landscape (4:3) (default Portrait (4:5)) |
| Image position (desktop) | select | Left or Right |
| Text vertical alignment | select | Top, Middle, Bottom |
| Text alignment | select | Start, Center, End |
| Background tone | select | Default (background), Surface alt (warm tint), Ink (inverted) (changes the section bg) |
Blocks (mix and match):
- Heading — large display text.
- Body — body copy.
- Caption — small label or eyebrow text.
- Button — label + link + style (Primary / Secondary / Ghost; default Secondary).
- Custom Liquid — embed arbitrary Liquid below the text.
@app— third-party app block.
Multi-column / icon row (multi-column)
A row of 2–4 columns each with an icon or image, heading, body, and optional link. Great for value-prop / feature-callout rows.
| Setting | Type | Notes |
|---|---|---|
| Caption | text | Small label above the row |
| Heading | text | Section heading |
| Columns (desktop) | select | 2 / 3 / 4 |
| Mobile layout | select | Stack vertically or Snap-scroll horizontally |
| Column alignment | select | Start or Center |
| Background tone | select | Default / Surface alt / Ink (inverted) |
Blocks: one block per column, each with icon (preset SVG name), image (overrides icon if set), heading, body, link_label, link_url.
Testimonials (testimonials)
Customer quotes section. Shows one quote at a time, in one of two display modes: a single static quote, or a rotating quote with prev/next buttons (no autoplay).
| Setting | Type | Notes |
|---|---|---|
| Caption / Heading | text / text | Section copy |
| Display mode | select | Single quote, or Rotating with buttons (no autoplay) |
| Background tone | select | Default / Surface alt / Ink (inverted) |
Blocks: one Quote block per testimonial (capped at 8), each
with quote, author, meta (e.g. “Verified buyer”, or a star count, or a
publication name). The section also accepts @app and Custom Liquid
blocks.
Pull-quote (pull-quote)
A single editorial pull-quote with attribution and an optional source link. Built for the Quiet Luxe preset’s editorial pacing but enabled on every template.
| Setting | Type | Notes |
|---|---|---|
| Quote | richtext | The pull-quote text |
| Attribution name | text | Author / speaker name |
| Source / publication | text | Publication or context (e.g. “Vogue, 2024”) |
| Source link | url | Optional. If set, the source becomes a link |
| Text alignment | select | Start or Center |
| Background tone | select | Default (background) or Surface alt (warm tint) |
Distinct from Testimonials (which collects multiple short voices) — Pull-quote is a single larger prose-led quote that acts as a magazine pull-quote inside the page rhythm.
Editorial story (quiet-luxe-story)
A pure-typography editorial column — heading, body copy, and an optional attribution line below a hairline divider. Drops the image side that Image with text carries; widens the type column to a 60-character reading measure. Built for the Quiet Luxe preset but enabled on every template.
| Setting | Type | Notes |
|---|---|---|
| Caption | text | Small label above the heading |
| Heading | text | Display-font heading |
| Body | richtext | Body copy |
| Attribution | text | Optional. Renders below a hairline divider |
| Text alignment | select | Start or Center |
| Background tone | select | Default (background) or Surface alt (warm tint) |
Distinct from Image with text — Editorial story has no image side and reads as a typography-only editorial column.
Image hotspot (image-hotspot)
Large image with positioned markers. Desktop opens popovers from each marker; mobile and no-JS render the same content as a numbered list below the image. Markers use WAI-ARIA labels and the list fallback keeps hotspot content reachable without JavaScript.
| Setting | Type | Notes |
|---|---|---|
| Subheading / Heading / Body | text / text / richtext | Section copy |
| Image / Image alt text | image_picker / text | Main hotspot image |
| Image ratio | select | 16:9, 4:5, 3:4, 1:1. Default 4:5 |
| Padding (px) | range (24–96 px) | Section vertical padding |
| Section color scheme | select | Default, Editorial dark, Warm neutral, Accent pop, Soft contrast |
Blocks: up to 12 Hotspot blocks. Each block sets x_position /
y_position, marker label, heading, rich text, link type (url,
product, collection, page), the matching link picker, and
cta_label.
Pairs best with: Lookbook, Before / after, Featured collection.
Lookbook (lookbook)
Editorial image grid for complete looks. The layout can be mosaic,
editorial_split, or stacked_story. Each tile can be a narrative
image, a linked image, or a shoppable image with up to three product
chips selected directly from product picker settings.
| Setting | Type | Notes |
|---|---|---|
| Subheading / Heading / Body | text / text / richtext | Section copy |
| Layout style | select | Mosaic grid, Editorial split, Stacked story |
| Tile gap | range (0–48 px) | Spacing between tiles |
| Padding | range (24–96 px) | Section vertical padding |
color_scheme | select | Default, Editorial dark, Warm neutral, Accent pop, Soft contrast |
Blocks: up to 12 Image tile blocks. Each tile has image, tile size
(regular / feature), eyebrow, heading, description, link type +
picker, optional button label, and product_chip_1 through
product_chip_3.
Pairs best with: Featured collection, Image hotspot, Promo tiles.
Before / after (before-after)
Image comparison section for transformations, fit comparisons, or
material before / after states. The enhanced control is a native
<input type="range">, so keyboard navigation works without custom
slider semantics. With JavaScript unavailable, both images render
side-by-side.
| Setting | Type | Notes |
|---|---|---|
| Subheading / Heading / Body | text / text / richtext | Section copy |
| Before image / Before alt / Before label | image_picker / text / text | Default label: Before |
| After image / After alt / After label | image_picker / text / text | Default label: After |
| Image ratio | select | 16:9, 4:3, 1:1, 4:5. Default 4:5 |
| Starting reveal position | range (0–100%) | Divider position on first load |
| Padding | range (24–96 px) | Section vertical padding |
color_scheme | select | Default, Editorial dark, Warm neutral, Accent pop, Soft contrast |
Blocks: none.
Pairs best with: Image hotspot, Product education pages, FAQ.
Press/logos (press-coverage)
“As seen in” section for publication logos, quotes, and press links. If a logo is not set, the publication name renders as text. Only use publication logos you are licensed to display; the preset uses placeholder SVGs.
| Setting | Type | Notes |
|---|---|---|
| Caption | text | Small label above the heading |
| Heading | text | Defaults to “Press coverage” |
| Background tone | select | Default or Surface alt |
Blocks: up to 12 Press item blocks. Each block has publication logo, logo alt text, publication name, quote, and link.
Pairs best with: Testimonials, Pull-quote, Editorial story.
Collection navigation (collection-navigation)
Navigation chips or columns for collection landing pages, editorial
collection directories, or home page category jumps. Source can be a
menu (source: menu) or a hand-picked collection list
(source: collections).
| Setting | Type | Notes |
|---|---|---|
| Subheading / Heading | text / text | Section copy |
| Navigation source | select | Navigation or Collection list |
| Navigation menu | link_list | Used when source is Navigation |
| Show subcollections | checkbox | Shows child menu links as nested groups |
| Collections | collection_list | Used when source is Collection list |
| Show product count | checkbox | Collection list source only |
| Desktop layout | select | Chips (wrapping row) or Columns |
| Background tone | select | Default (background) or Surface alt (warm tint) |
Blocks: none.
Pairs best with: Collection grid, Featured collection, Promo tiles.
Promo banner (promo-banner)
Single promotional band with optional image, copy, CTA, and a merchant- set countdown. Use countdowns only for real campaign end dates; the theme never restarts expired countdowns automatically.
| Setting | Type | Notes |
|---|---|---|
| Image | image_picker | Optional campaign image |
| Image position | select | Background, Left, Right, None |
| Text alignment | select | Start, Center, End |
| Height | select | Auto, Small, Medium, Large |
| Caption / Heading / Body | text / text / richtext | Campaign copy |
| Button label / Button link | text / URL | Optional CTA |
| Show countdown | checkbox | Off by default |
| Countdown end | text | ISO 8601 UTC, e.g. 2026-12-31T23:59:00Z |
| When countdown expires | select | Hide countdown or Show ended message |
| Expired message | text | Default: “Offer ended.” |
color_scheme | select | Default, Editorial dark, Warm neutral, Accent pop, Soft contrast |
Blocks: none.
Pairs best with: Featured collection, Promo tiles, Collection navigation.
Promo tiles (promo-tiles)
Grid of promotional tiles for campaign hubs, shopping paths, or editorial links. Tiles can link to external URLs, products, collections, or pages.
| Setting | Type | Notes |
|---|---|---|
| Heading / Subheading | text / text | Section copy |
| Desktop columns | select | 2, 3, 4 |
| Tablet columns | select | 2, 3 |
| Mobile layout | select | Stacked or Horizontal scroll |
| Tile aspect ratio | select | 4:5, 1:1, 3:4, 16:9 |
| Overlay text on image | checkbox | Places copy over the tile image |
| Text alignment | select | Start, Center, End |
| Padding | range (24–96 px) | Section vertical padding |
color_scheme | select | Default, Editorial dark, Warm neutral, Accent pop, Soft contrast |
Blocks: up to 12 Tile blocks. Each block has image, heading,
description, badge, link type + picker, and cta_label.
Pairs best with: Collection navigation, Promo banner, Lookbook.
FAQ (faq)
Addable FAQ accordion section. It also ships in templates/page.faq.json
below the page content, so merchants can build a dedicated FAQ page
without custom Liquid.
| Setting | Type | Notes |
|---|---|---|
| Subheading / Heading / Intro text | text / text / richtext | Section copy |
| Layout | select | Single column or Two columns |
| Allow multiple questions open at once | checkbox | Disabled mode closes the previous question in single-column layout |
| Show category labels | checkbox | Shows the block category value |
| Add FAQ structured data | checkbox | Adds Schema.org FAQPage JSON-LD |
color_scheme | select | Default, Editorial dark, Warm neutral, Accent pop, Soft contrast |
Blocks: Question blocks. Each block has category, question,
answer, and open_by_default.
Pairs best with: Product education pages, Support pages, Before / after.
Newsletter (newsletter)
Email signup. Posts to Shopify’s customer subscription endpoint via
the standard customer form drop. Includes consent checkbox + success
message.
| Setting | Type | Notes |
|---|---|---|
| Caption / Heading / Body | text / text / richtext | Section copy |
| Submit button label | text | Button label, e.g. “Subscribe” |
| Require marketing consent checkbox | checkbox | Adds GDPR-style consent checkbox |
| Consent text | text | E.g. “I agree to receive marketing emails” |
| Success text | text | Replaces the form on submit success |
| Background tone | select | Default / Surface alt / Ink (inverted) |
Block: one optional Custom Liquid block to append HTML (e.g. a double-opt-in disclaimer below the form).
Featured collection (featured-collection)
A collection-grid hero. Surfaces a chosen collection’s first N products. Standard pattern for “Shop the look” / “New arrivals”.
| Setting | Type | Notes |
|---|---|---|
| Caption | text | |
| Heading | text | |
| Description | textarea | |
| View-all button label | text | e.g. “Shop all” — links to the collection |
| Collection | collection picker | Source collection |
| Products to show | range (2–16) | How many to render |
| Card style | select | Minimal — text only, Default — with color swatches, With badges (Sale / Sold out) |
| Show price | checkbox | Render price under each card |
| Low-stock threshold | range (0–20) | “Only N left” inline message |
| Columns (desktop) | select | 2, 3, 4 |
| Columns (mobile) | select | 1, 2 |
color_scheme | select | Default, Editorial dark, Warm neutral, Accent pop, Soft contrast |
Page-numbered collection grid (collection-grid-paged)
A signature section: a single (non-paginated) collection grid where each card carries a decorative editorial mono page-number label (“p. 06”, “p. 08”, …) derived from the starting page and page step. These labels are purely typographic — there is no “Page 2 of 4 →” navigation. Often used as a home page element to surface a deep collection.
| Setting | Type | Notes |
|---|---|---|
| Heading | text | |
| Subheading | text | |
| Collection | collection picker | |
| Products to show | range (2–12) | |
| Show price / columns | checkboxes / selects | Same as Featured collection |
| Starting page number | range (1–99) | Which “page” to label this section as |
| Page step (between products) | range (1–6) | How much each card’s decorative page number increments (e.g. p. 06 → p. 08) |
| Button label / Button link | text + URL | Optional view-all button; defaults to “View all” |
Slideshow (slideshow)
A full-width rotating slideshow. Each slide carries its own image, mobile image, text overlay (subheading / heading / text), text color, text box, and CTA. Has presets and is enabled on every template.
| Setting | Type | Notes |
|---|---|---|
| Slide height | select | Slide height |
| Content width | select | Boxed / wide content measure |
| Auto-rotate slides | checkbox | Auto-advance slides |
| Change slides every | range | Seconds between slides |
| Transition | select | Slide transition style |
| Show previous/next arrows | checkbox | Render prev / next arrows |
| Show pagination dots | checkbox | Render pagination dots |
| Slideshow label | text | Label for the slideshow region |
color_scheme | select | Default, Editorial dark, Warm neutral, Accent pop, Soft contrast |
Blocks: up to 8 Slide blocks.
Video (video)
A video section that plays a hosted Shopify video or an external URL (YouTube / Vimeo), with an optional poster image and a text overlay.
| Setting | Type | Notes |
|---|---|---|
| Video type | select | Hosted Shopify video or external URL |
| Video | video | Hosted video (when type is Shopify) |
| Video URL | video_url | External URL (when type is external) |
| Poster image / Poster alt text | image_picker / text | Poster image + alt text |
| Autoplay | checkbox | Autoplay (muted) |
| Aspect ratio | select | Player aspect ratio |
| Overlay opacity | range | Darken the video behind overlay text |
| Text alignment | select | Start, Center, End |
| Tone | select | Surface, Alternate surface, Ink |
Blocks: Caption, Heading, Body, Button, plus a Custom Liquid block.
Featured blog (featured-blog)
Surfaces the most recent posts from a chosen blog as a card grid. Good for a “From the journal” home-page row.
| Setting | Type | Notes |
|---|---|---|
| Caption / Heading / Description | text / text / textarea | Section copy |
| View-all button label | text | Links to the blog |
| Blog | blog | Source blog |
| Posts to show | range | How many posts to render |
| Show featured image / date / excerpt / author / tag | checkboxes | Per-card detail toggles |
| Columns (desktop) / Columns (mobile) | select / select | Grid layout |
| Empty heading / Empty body | text / textarea | Shown when the blog has no posts |
color_scheme | select | Default, Editorial dark, Warm neutral, Accent pop, Soft contrast |
Product and collection sections
Featured product (featured-product)
A full PDP-grade single-product section that can be embedded on the home (index) and page templates only. Includes rich media, variant picker, selling plans, the gift-card recipient flow when relevant, payment_button, Shop Pay Installments banner, and accelerated checkout.
| Setting | Type | Notes |
|---|---|---|
| Heading | text | Optional section heading above the buy box |
| Description | richtext | Optional section description |
| Product | product picker | The product to feature |
| Show vendor | checkbox | Render vendor above title |
| Show variant picker | checkbox | Render swatches / dropdown |
| Show quantity selector | checkbox | Render qty stepper |
| Show restock request form for sold-out variants | checkbox | Render the back-in-stock form for sold-out variants (default on) |
| Background tone | select | Default / Surface alt / Ink (inverted) |
The buy box is not composable. It renders a fixed layout driven by the section settings above (heading, description, product, show vendor / variant picker / quantity selector / back-in-stock form) plus the shared PDP snippets — there are no Title, Price, Variant picker, Buy buttons, Description, Trust row, Share row, or Accordion blocks.
Blocks: only @app and Custom Liquid.
B2B quick order (b2b-quick-order)
Merchant-addable order grid for signed-in B2B buyers. Buyers enter
quantities across multiple variants, then add selected rows to cart
in one Ajax action. The section self-gates on customer.b2b?; B2C
visibility can be hidden or a plain product list.
| Setting | Type | Notes |
|---|---|---|
| Caption / Heading / Description | text / text / richtext | Section copy |
| Product source | select | Collection or Selected products |
| Collection | collection | Used when source is Collection |
| Products | product_list | Used when source is Selected products |
| Show SKU | checkbox | Variant row detail |
| Show inventory status | checkbox | Only for variants that track inventory |
| Show order quantity rules | checkbox | Shows min / max / increment rules |
| Show volume pricing | checkbox | Shows quantity price breaks |
| Show to non-B2B customers as | select | Hidden or Plain product list |
color_scheme | select | Default, Editorial dark, Warm neutral, Accent pop, Soft contrast |
The grid reuses Mercer’s existing quantity-rule and tier-table surfaces, then submits via Shopify’s native Ajax Cart path. It does not create quotes, draft orders, or PO workflows. See B2B for setup context.
Related products (related-products)
Renders related or complementary products. The complementary instance
is metafield-first; the related instance always uses Shopify’s
algorithmic Recommendations API.
| Setting | Type | Notes |
|---|---|---|
| Heading | text | E.g. “You might also like” |
| Recommendation intent | select | related (default) or complementary |
| Products shown | range (2–10) | |
| Card style | select | Minimal, With color swatches, With badges |
complementary intent is metafield-first: it reads the merchant-curated
product.metafields.custom.pairs_with list and renders it inline, falling
back to the algorithmic Recommendations API (/recommendations/products)
only when no curated list exists. related always reads the algorithmic
recommendations.
Mercer’s default product template uses related for the section
above the fold and complementary for the section below it.
Recently viewed (recently-viewed)
A horizontal row of products the customer has recently viewed. The
most recent ~10 product handles are kept in localStorage (no expiry;
entries persist until evicted by the 10-item cap or cleared by the
browser). Renders nothing if the customer has no recent products.
| Setting | Type | Notes |
|---|---|---|
| Heading | text | E.g. “Recently viewed” |
| Products shown | range (2–8) | Default 4 |
Product card (preview only)
Mercer also ships a product-card-only section used in
templates/product.card.json for an editorial card-style PDP. Not
typically added by merchants directly — it’s used as a template.
Custom Liquid section
Custom Liquid (custom-liquid)
Free-form Liquid / HTML / inline style block. Use for embedding
analytics scripts, third-party widgets, custom inline content, or
editorial paragraphs that don’t fit any other section. Duplicate the
theme before adding custom code; see Custom Liquid
for support-scope notes.
| Setting | Type | Notes |
|---|---|---|
| Liquid code | liquid | Your Liquid / HTML |
See Custom Liquid for examples and patterns.
Chrome sections
The header and footer wrap every page. They’re configured through section groups so merchants can rearrange them, but the individual sections themselves have settings that surface in the Header and Footer entries in the Editor’s left rail.
Header (header)
The site-wide header with logo, main menu, announcement bar above, utility icons, and country / language switcher. Always present; cannot be removed.
| Setting | Type | Notes |
|---|---|---|
| Sticky on scroll | checkbox | Hide-on-scroll-down / reveal-on-scroll-up |
| Logo position | select | Logo aligned Left or Center |
| Transparent over hero on home page | checkbox | Overlay the header on the home page’s first section; turns solid once you scroll past it |
| Text and icon color over hero | select | Light (for dark heroes) or Dark (for light heroes) |
| Mega-menu columns | select | 2, 3, or 4 promo columns inside enriched desktop dropdowns |
| Main menu | link_list | Defaults to main-menu |
| Show announcement bar | checkbox | Show the thin announcement bar above the header |
| Announcement text | text | The message displayed in the bar |
| Allow visitors to dismiss | checkbox | Render a close button; dismissal sessionStorage-keyed per message |
| Show Follow on Shop button | checkbox | Render Shopify’s Follow on Shop button (via the login_button filter) |
The header also automatically renders:
- Logo — set in Theme settings → Brand.
- Mega-menu image columns — when a top-level menu link has a child submenu, per-column images can be attached for a visual mega menu.
- Mega-menu enrichment blocks — add Header blocks of type
mega_image,mega_collection,mega_product, ormega_promo. Each block hasparent_link_url; paste the exact URL of a top-level menu link to attach that block to the link’s desktop dropdown. When a parent link has matching mega blocks, the dropdown widens to the configured mega-column layout. - Account icon — uses Shopify’s
<shopify-account>web component on desktop (≥1024 px in 1.0.0). Hidden when customer accounts are not enabled. The account menu handle is fixed (customer-account-main-menu) and is not exposed as a setting. - Cart icon — links to cart drawer or
/cartdepending on Theme settings → Cart → Cart style. - Search icon — opens the predictive search overlay.
Blocks:
- Mega image (
mega_image) —parent_link_url, image, heading, body, Button label, Button link. - Mega collection (
mega_collection) —parent_link_url, collection, heading override, product limit (3–12). - Mega product (
mega_product) —parent_link_url, product, heading override. - Mega promo (
mega_promo) —parent_link_url, heading, body, badge, Button label, Button link.
Promo popup (promo-popup)
Global promo overlay rendered from layout/theme.liquid via the
promo-popup snippet. It is not an addable section; merchants
configure it under Theme settings → Promo popup. It is skipped
on cart, gift card, customer-account surfaces, and gift-card PDPs.
| Setting | Type | Notes |
|---|---|---|
| Enable promo popup | checkbox | Off by default. Use only for an active campaign |
| Heading / Body / Image | text / richtext / image_picker | Popup content |
| Popup content | select | Call to action, Newsletter signup, or Newsletter signup and call to action |
| Button label / Button link | text / URL | CTA mode or mixed mode |
| Newsletter tag | text | Comma-separated tags added to customer record |
| Email label / Email placeholder / Submit button label | text / text / text | Newsletter form copy |
| Success message / Error message | text / text | Newsletter form feedback |
| Require marketing consent checkbox | checkbox | Adds required consent input |
| Consent text | text | Short label; supports inline formatting |
| Delay before showing | range (0–30 s) | Initial display delay |
| Display frequency | select | Every visit, Once per session, Once per N days, Once ever |
| Days between displays | range (1–100 d) | Used for Once per N days |
| Display reset key / Display reset version | text / text | Change to re-show a dismissed campaign |
Footer (footer)
The site-wide footer with link columns, optional newsletter signup, optional markets switcher, optional payment icons, and the copyright / powered-by line. Always present; cannot be removed.
| Setting | Type | Notes |
|---|---|---|
| Show newsletter signup | checkbox | Toggle the inline newsletter form |
| Newsletter heading | text | Heading above the form |
| Newsletter body | richtext | Body copy below the heading |
| Also show country / language switcher in footer | checkbox | Render the markets switcher in the footer in addition to the header |
| Copyright extra | text | Extra line of text alongside the © year + shop name |
Blocks:
- Link column (
link_list) — heading + menu picker. Up to 4 columns; each can point at a different menu handle, but every column defaults to thefooterhandle. - Rich text column (
rich_text) — heading + body for free-form copy (e.g. address, store hours). - Payment icons (
payment_icons) — opt-in. Renders the icons for your enabled Shopify payment gateways (usesshop.enabled_payment_types+payment_type_svg_tag, full color). Hides itself when no gateways are enabled. Settings: Show label (default off) + Label text.
The footer also automatically renders:
- Powered-by-Shopify line — verbatim per Theme Store rules.
- Social media icons — from Theme settings → Social media URL
fields. Hides any icon whose URL is empty or does not begin with a
valid
http://orhttps://scheme.
Theme-level Footer settings (in Theme settings → Footer, not the Footer section’s per-instance settings):
- Show back-to-top button — when enabled, a back-to-top button appears on every page except product pages (where the sticky add-to-cart bar occupies the same screen real estate).
- Mobile accordion footer columns — on viewports ≤768 px,
footer link columns automatically collapse to accordions. No
setting; CSS-driven via
<details open>markup with desktop summary affordance neutralized.
Mobile bottom nav (mobile-bottom-nav)
A bottom navigation bar on phones (≤ 767.98 px) that is hidden at the top of the page and slides in once the header scrolls away (it stays shown on pages too short to scroll past the header). Hidden on tablet and desktop (768 px and up).
It holds up to 5 Tab blocks: each block is one tab (icon + label + link). The cart tab uses a special “cart-count” badge that updates live.
This section can only live in the footer section group (its schema
is enabled_on the footer group only) — it cannot be added to
individual template JSON files. It already ships inside
footer-group.json and is managed there.
Template-specific sections
These main-* sections drive each template. You don’t add them as
free-form sections; they live inside the template JSON and are not
removable. They expose customization for the page they render.
| Section | Drives |
|---|---|
main-product | templates/product.json |
main-collection | templates/collection.json |
main-list-collections | templates/list-collections.json |
main-cart | templates/cart.json |
main-search | templates/search.json |
main-blog | templates/blog.json |
main-article | templates/article.json |
main-page | templates/page.json |
main-page-contact | templates/page.contact.json |
main-password | templates/password.json |
main-404 | templates/404.json |
Each main-* section has the settings appropriate to its page —
e.g. main-product exposes media gallery layout, variant picker
style, sticky-ATC behavior, etc. The Editor surfaces these settings in
the natural place when you edit the relevant template.
Notable template settings:
| Setting | Type | Notes |
|---|---|---|
main-product.details_display_mode | select | accordion (default) or tabs_desktop_accordion_mobile. Controls Description, Materials & care, and other detail blocks; mobile always stays accordion. |
Collection and search filters auto-render visual swatches when Shopify
reports filter.presentation == 'swatch' or
filter.presentation == 'image'. Configure those swatches in Shopify
admin’s Color swatch settings; values without a swatch fall back to
the text filter row.
What’s next
- Use Custom Liquid for sections this reference doesn’t cover.
- Use Markets for currency / language switchers (the switcher style is set in Theme settings → Markets; the dropdown / modal then render in the header).
- Use B2B for the wholesale-only sections (catalog selector, tier table, quantity rules).