Theme Editor walkthrough

This guide explains how Mercer’s content composes inside the Shopify Theme Editor. If you’re new to Shopify themes, the language can feel unfamiliar — section, block, group, template — so we’ll walk through each unit and show what it controls in Mercer.

Mental model

A Mercer storefront is built from four types of unit:

Settings live inside blocks and sections. Blocks live inside sections. Sections live inside templates or section groups. Section groups live inside layout/theme.liquid.

What’s in your Editor sidebar

When you open the Theme Editor, the left sidebar shows three regions:

1. Header group — the top of every page. Mercer ships with a single header section (“Header”); the announcement bar is a feature rendered inside the Header section, not a separate section.
2. Template area — the page-specific sections. The page picker (top of the Editor) decides which template you’re editing (Home, Product, Collection, Cart, …).
3. Footer group — the bottom of every page. Mercer ships with a footer section and a mobile bottom-nav section.

You can add sections to the template area. You cannot add sections to the header or footer group beyond what those groups support — that’s intentional.

Header group

The Mercer header group contains a single Header section by default. The announcement bar is rendered inside that section, configured via its own settings:

• Announcement — a thin bar above the header, controlled by settings within the Header section. Set the message via Announcement text; toggle visibility with Show announcement bar (off by default). A close button is shown by default (Allow visitors to dismiss) — uncheck it for a non-dismissible bar. Dismissal persists across pages in the same browser session until you edit the message.
• Header — the main header. Includes:
  • Logo (set in Theme settings → Brand).
  • Main menu — picks the navigation menu. Defaults to your store’s “main-menu” handle.
  • Mega-menu image columns — when a top-level link has a child submenu, you can attach an image column per column to render a visual mega menu instead of a plain dropdown. Per-column setting; leave empty to fall back to the plain dropdown.
  • Mega-menu enrichment blocks — add mega_image, mega_collection, mega_product, or mega_promo blocks to the Header section, then set parent_link_url to the exact URL of a top-level menu link. See Header for the block settings.
  • Account icon — uses Shopify’s <shopify-account> web component on desktop (≥1024 px in 1.0.0). The menu handle is fixed at customer-account-main-menu (hardcoded on the component) and is not exposed as a theme setting. Hidden when customer accounts are not enabled in your store admin.
  • Cart icon — links to cart drawer or /cart depending on Theme settings → Cart → Cart style.
  • Search icon — opens the predictive search overlay.
  • Country / language switcher — see Markets for pattern options.

The header is sticky by default with a hide-on-scroll-down / reveal-on-scroll-up pattern. Sticky on scroll is a single checkbox — uncheck Header → Sticky on scroll to make the header static (non-sticky). There is no separate “Always visible” sticky mode.

Multi-level navigation

Mercer renders 3 levels of menu depth on desktop and in the mega-menu. Mobile renders the same 3 levels via the slide-in mobile nav drawer. There’s no max-depth setting; Shopify’s navigation only exposes 3 levels of nesting, so there are no deeper items to render.

Footer group

The footer group contains:

• Footer — the main footer with up to 4 link columns + a newsletter signup. Each column can pull from a different menu handle; every column defaults to the “footer” handle, but any handle works.
• Mobile bottom nav — a fixed tab bar shown at the bottom of the viewport on mobile (Shop, Browse, Search, Account tabs).

The country gate is not part of the footer group — it’s a Markets-driven layout overlay (a dismissible first-visit suggestion toast that offers to switch the visitor to their detected country/currency), rendered at the layout level. See Markets.

The footer also renders the powered-by-Shopify line per Theme Store rules and your social media links from Theme settings → Social media.

Payment icons are available as an opt-in Footer block — add it via the Footer’s “Add block” menu in the Editor. The block uses your enabled Shopify payment gateways automatically.

Back to top is a theme-level toggle in Theme settings → Footer. When enabled, the button appears on every page except product pages.

On mobile (≤768 px), footer link columns collapse to accordions automatically.

Templates

Each template in templates/*.json arranges sections into a page layout. Mercer ships these JSON templates:

The Editor’s page picker corresponds 1:1 to these. Picking “Home” in the picker edits index.json.

Customer-account pages are not shipped in this theme — there is no templates/customers/ directory. Account pages are handled by Shopify’s new customer accounts.

The home page composition

Mercer ships one index.json template with a fixed set of sections. Out of the box it renders, in order: a Magazine cover hero (hero-magazine-cover), a paged collection grid (collection-grid-paged), a featured collection (featured-collection), an image-with-text story block (image-with-text), and a multi-column value-props row (multi-column). There is one hero section in the template — the home page does not auto-swap a “signature hero” by preset.

Switching the active preset (set in Theme settings → Preset) swaps only design tokens — fonts, button shape, type scale, and the color palette — while your home page content and section composition are preserved. Presets do not carry hero or content data. (The one place preset_active affects rendering is the product-page trust strip, where it adjusts the icon stroke weight — it is not used to select a hero.) You can change the home hero by editing the hero section directly in the Editor; you don’t need to maintain parallel JSON files per preset.

Sections in the template area

Mercer’s section library is documented in detail in Section reference. For the Editor, the key idea is:

• Add section lets you pick from any section that’s enabled for the current template. Most sections can be added to every section-based template — including cart and password. The one storefront template that can’t host them is the gift-card page, because gift_card is a non-sectioned .liquid template. A few sections are intentionally scoped to specific templates (for example, the featured-product hero only appears on the home and page templates).
• Drag to reorder changes the section order on the page.
• Click a section opens its settings panel.

The Custom Liquid section

If you need to embed an arbitrary HTML / Liquid snippet on a page — custom analytics, a third-party widget, an editorial paragraph that doesn’t fit any other section — use the Custom Liquid section. See Custom Liquid for examples, backup guidance, and support-scope notes.

Color schemes on sections

Seventeen sections expose a Color scheme select. This applies a named palette to that section only; Default keeps the section tracking Theme settings → Colors. See Color schemes for the supported sections and palette behavior.

App blocks

Mercer supports app blocks in every section that has a “Blocks” panel. App blocks are added via Shopify apps and let third-party tools render inline UI inside Mercer’s sections without you touching code.

Blocks inside sections

Some Mercer sections expose a “Blocks” panel where you can add, reorder, or remove smaller units inside the section. The most common pattern:

• Featured product — the buy box is not composable; it renders a fixed layout driven by the section settings, and the only blocks are @app and Custom Liquid. (The composable Title / Price / Variant picker / Buy buttons / Description blocks live on the product-page section, main-product.)
• Testimonials — each block is one testimonial.
• Multi-column — each block is one column.
• Image with text — the text column is fully composable: Caption, Heading, Body, and Button blocks (the preset ships all four), plus optional Custom Liquid and @app sub-blocks.
• Footer — the footer block types are a link column (link_list), a rich-text column (rich_text), and payment icons (payment_icons). The newsletter is a section-level setting (Show newsletter signup), and the social row is auto-rendered from Theme settings → Social media — neither is a block.

Blocks within a section can be reordered, removed, and re-added. Each block has its own settings.

Section groups vs sections

A section group is a wrapper that lets sections recur on every page. Mercer has two:

• header-group.json — sections rendered before the page content.
• footer-group.json — sections rendered after the page content.

You don’t usually edit section groups directly; you edit them via the Header / Footer regions in the Editor sidebar.

Theme settings

Below the page picker in the Editor is the Theme settings gear icon. Theme settings apply globally — every page sees them. Mercer’s theme settings are organized into 13 panels:

1. Preset — pick one of the 5 presets.
2. Brand — favicon, social sharing image, logo + logo widths.
3. Typography — font_picker for display + body fonts, type scale density, and animations. Leave at preset default unless your brand has a hard requirement.
4. Buttons — button shape (preset / sharp / rounded / pill).
5. Navigation — show breadcrumbs.
6. Cart — drawer or page; free-shipping progress bar + threshold; order note in drawer; empty-cart copy; gift-wrap options.
7. Search — predictive search toggle and which result types to show.
8. Promo popup — newsletter / CTA popup with content, timing, and frequency controls.
9. Product page — PDP and product-card behaviors (sticky CTA, size guide, image rollover, quick view, dynamic checkout, badges, pre-order).
10. Markets — switcher style, country selection prompt, and price localization pattern.
11. Social media — social media URLs (Instagram, TikTok, YouTube, etc.).
12. Colors — background/text, surface, accent, and line color pairs. Mercer is designed around AA-oriented contrast targets; review custom pairs before publishing.
13. Footer — back-to-top toggle.

Customer-account behavior (guest / required / classic / new accounts) is configured in your Shopify admin, not in a Mercer theme panel.

Saving and previewing

• Save commits your customizations to the active theme.
• Preview opens the storefront with your current customizations applied (as an unauthenticated visitor would see them).
• Publish is on the theme’s row in Online Store → Themes, not in the Editor. The Editor only saves; publishing is one more step.

Common Editor pitfalls

• “My logo looks huge on mobile.” Mobile and desktop logo widths are independent (Theme settings → Brand → Logo width (mobile) vs Logo width (desktop)). Mobile defaults to 120 px; reduce if your logo is very wide.
• “My announcement bar isn’t showing.” The announcement is part of the Header section and is controlled by a single Show announcement bar checkbox, which is off by default — enable it (and set Announcement text) for the bar to render.
• “My mega menu shows as a plain dropdown.” Mega-menu enrichment blocks attach by exact parent_link_url match against a top-level menu link. Plain dropdowns render when no block matches that parent link.
• “My customizations vanished after switching presets.” They didn’t — they’re saved against the preset’s home template. Switching back restores them.

What’s next

• Read the Section reference to learn each section’s settings.
• Read Custom Liquid for embedding custom markup.
• Read Markets if you sell across multiple regions.