Section reference
Every merchant-facing section in Mercer, what it 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 (one per preset, plus a secondary H-scroller for Bold Pop and a heritage-feel masthead).
- Content sections — image with text, multi-column, testimonials, pull-quote, editorial story, newsletter.
- Product and collection sections — featured product, featured collection, page-numbered collection grid, related products, recently viewed, product card.
- Custom Liquid section — for embedded HTML / Liquid.
- Chrome sections — header, 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 | text | Italic display font, e.g. “No. 03” |
| Masthead — right | text | E.g. “Outerwear” |
| Rule weight | range (1–4 px) | Border thickness above + below masthead |
| Headline | richtext | The big over-image headline |
| Image | image_picker | The hero image. Recommended ratio 3:2. |
| Alt text | text | A11y. Set this. |
| Headline overlap | range | How far the headline overlaps onto the image (px) |
| Show page number | checkbox | ”Page 12” badge top-right of image |
| Page number label | text | E.g. “Page 12” or “01 / 24” |
| Show index strip | checkbox | Bottom row of numbered “in-this-issue” entries |
Blocks: up to 5 Index item blocks. Each block has Page no., Title,
Link. Plus the standard @app block.
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 3 caption 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 3 caption rows.
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 |
|---|---|---|
| Rotation amount | range | Slight degree rotation per block (0–4°) |
Blocks: up to 6 Color block blocks. Each block has bg_color,
fg_color, caption, 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 (4–12), tones (an array of color values).
Tech spec strip (signature-tech-specstrip)
Designed for the Tech Forward preset. Terminal-style nav path, ISO timestamp, 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 |
|---|---|---|
| Path | text | Breadcrumb-style path, e.g. ~/products/ |
| Timestamp | text | ISO-8601 looking, e.g. 2026-05-07T14:23Z |
| Image / Alt | image_picker / text | Hero image |
| Image caption | text | Sub-caption rendered under image |
| Kicker / Heading / Body | text / text / richtext | Main copy |
| CTA primary / secondary | label + URL pair × 2 | Two buttons |
Blocks: up to 4 Spec blocks (label / value), plus reticle marker
blocks for the corner annotations, plus @app.
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 | checkbox | Toggle the announcement bar |
| Announcement text | text | E.g. “Free shipping over $80” |
| Caption / Heading | text / text | Section copy |
| Card radius | range (0–32 px) | Card corner radius |
| Image radius | range (0–32 px) | Image corner radius (often = card) |
| Columns desktop | select | 2 / 3 / 4 |
| Columns mobile | select | 1 / 2 |
Blocks: up to 8 Collection 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 | 1:1, 4:5, 3:2, 16:9 |
| Image position | select | Left or Right |
| Vertical align | select | Top, Center, Bottom |
| Text align | select | Start, Center, End |
| Tone | select | Default, Soft, Bold (changes the section bg) |
Blocks (mix and match):
- Heading — large display text.
- Text — body copy.
- Caption — small label or eyebrow text.
- Button — label + link + style (primary / outline / link).
- 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 | range (2–4) | How many to render per row |
| Mobile layout | select | Stack or 2-column |
| Text align | select | Start or Center |
| Tone | select | Default / Soft / Bold |
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. Supports two display modes: a row of cards or a single rotating quote.
| Setting | Type | Notes |
|---|---|---|
| Caption / Heading | text / text | Section copy |
| Display mode | select | Cards (row) or Featured (single, large) |
| Tone | select | Default / Soft / Bold |
Blocks: one block per testimonial. Each has quote, author, meta (e.g. “Verified buyer”, or a star count, or a publication name).
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 surface or Surface alt |
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 surface or Surface alt |
Distinct from Image with text — Editorial story has no image side and reads as a typography-only editorial column.
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 label | text | Button label, e.g. “Subscribe” |
| Require consent | 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 |
| Tone | select | Default / Soft / Bold |
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 | richtext | |
| CTA label | text | e.g. “Shop all” — links to the collection |
| Collection | collection picker | Source collection |
| Product limit | range (4–12) | How many to render |
| Card variant | select | Minimal, Default, Badge |
| Show price | checkbox | Render price under each card |
| Low stock threshold | range (0–10) | “Only N left” inline message |
| Columns desktop | select | 2, 3, 4 |
| Columns mobile | select | 1, 2 |
Page-numbered collection grid (collection-grid-paged)
A signature section: a collection grid with editorial pagination (“Page 2 of 4 →”) instead of pixel-counter pagination. Often used as a home page element to surface a deep collection.
| Setting | Type | Notes |
|---|---|---|
| Heading | text | |
| Subheading | richtext | |
| Collection | collection picker | |
| Product limit | range (8–24) | |
| Show price / columns | checkboxes / selects | Same as Featured collection |
| Page start | range (1–10) | Which “page” to label this section as |
| Page step | range (1–10) | Increment on each visible “page” arrow |
| CTA label / link | text + URL | ”Read full issue →” link |
Product and collection sections
Featured product (featured-product)
A full PDP-grade single-product section that can be embedded on the home page or any non-product template. 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 |
| Tone | select | Default / Soft / Bold |
Blocks (composing the buy-box stack — match Dawn’s pattern):
- Title, Price, Variant picker, Buy buttons,
Description, Trust row, Share row, Accordion,
Custom Liquid,
@app.
Related products (related-products)
Renders Shopify’s algorithmic recommendations API (recommendations.json).
| Setting | Type | Notes |
|---|---|---|
| Heading | text | E.g. “You might also like” |
| Intent | select | related (default) or complementary |
| Limit | range (2–10) | |
| Card variant | select | Minimal, Default, Badge |
| Quick add | checkbox | Show quick-add button on hover |
complementary intent reads merchandising-defined complementary
products from the Search & Discovery Shopify app. related reads
the algorithmic recommendations.
Mercer’s default product template uses complementary for the section
above the fold and related for the section below it.
Recently viewed (recently-viewed)
A horizontal row of products the customer has viewed in this session.
Persisted in localStorage for 30 days. Renders nothing if the
customer has no recent products.
| Setting | Type | Notes |
|---|---|---|
| Heading | text | E.g. “Recently viewed” |
| Limit | range (4–12) |
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.
| Setting | Type | Notes |
|---|---|---|
| Custom Liquid | liquid | Your Liquid / HTML |
| Container width | select | Boxed, Wide, Full |
| Vertical padding top / bottom | range | Spacing controls |
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 | checkbox | Hide-on-scroll-down / reveal-on-scroll-up |
| Main menu | link_list | Defaults to main-menu |
| Show announcement | checkbox | Show the thin announcement bar above the header |
| Announcement text | text | The message displayed in the bar |
| Allow dismiss | checkbox | Render a close button; dismissal sessionStorage-keyed per message |
| Show Follow on Shop | checkbox | Render Shopify’s Follow on Shop button (via the login_button filter) |
| Customer account menu | link_list | Menu shown by <shopify-account>; defaults to customer-account-main-menu |
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.
- Account icon — uses Shopify’s
<shopify-account>web component on desktop (≥1024 px in 1.0.0). Hidden when customer accounts are not enabled. - Cart icon — links to cart drawer or
/cartdepending on Theme settings → Cart → Drawer or page. - Search icon — opens the predictive search overlay.
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 | text | 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 5 columns; each can use a different menu handle (defaults arefooter,shop,support,company,legal). - 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 URL fields. Hides any icon whose URL is empty.
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 persistent bottom navigation bar that appears only on mobile and phablet widths (≤ 1023 px). Hidden on tablet and desktop.
Up to 4 blocks: each block is one tab (icon + label + link). The cart tab uses a special “cart-count” badge that updates live.
Add this section to index.json, collection.json, product.json,
or wherever you want a persistent mobile nav.
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 |
main-account, main-addresses, main-activate-account, main-login, main-order, main-register, main-reset-password | templates/customers/*.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.
What’s next
- Use Custom Liquid for sections this reference doesn’t cover.
- Use Markets for currency / language switchers (which live in the Header section’s settings).
- Use B2B for the wholesale-only sections (catalog selector, tier table, quantity rules).