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 header block (“Header”) and an announcement bar (“Announcement”).
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 block and a country-gate block.

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 two sections by default:

• Announcement — a thin bar above the header. Set the message via Announcement text; toggle visibility with Show announcement. Enable Allow dismiss to let customers close the bar (dismissal persists across pages 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.
  • Account icon — uses Shopify’s <shopify-account> web component on desktop (≥1024 px in 1.0.0). The menu shown is controlled by Customer account menu (defaults to customer-account-main-menu). Hidden when customer accounts are not enabled in your store admin.
  • Cart icon — links to cart drawer or /cart depending on Theme settings → Cart → Drawer or page.
  • 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. To pin it open, set Header → Sticky behavior → Always visible.

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; menus deeper than 3 are clamped to 3 with the deepest items inlined under the level-2 parent.

Footer group

The footer group contains:

• Footer — the main footer with up to 5 link columns + a newsletter signup. Each column can pull from a different menu handle; defaults are “footer”, “shop”, “support”, “company”, “legal” but any handle works.
• Country gate (optional, off by default) — first-visit modal that asks the visitor to pick country / currency. See Markets.

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

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.

Per-preset signature heroes

Mercer ships one index.json template. The home page renders the signature hero matching the active preset (set in Theme settings → Presets). Switching presets swaps the visible signature hero automatically; the rest of the home page composition is preserved across preset switches.

Each preset’s signature hero lives as its own section in the template, but only the section matching the active preset renders. This is managed by the preset_active setting at runtime — you don’t need to manage alt templates or 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 are enabled everywhere except cart, password, and customer/* 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.

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 — blocks let you compose the PDP buy-box (title, price, variant picker, buy buttons, description, trust row, share row, accordion, custom Liquid, app block).
• Testimonials — each block is one testimonial.
• Multi-column — each block is one column.
• Image with text — the section is a single block by default; an optional “Custom Liquid” sub-block lets you append HTML below the text.
• Footer — each block is one column or one widget (newsletter, social row, payment icons).

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 9 panels:

1. Preset — pick one of the 5 presets.
2. Brand — logo + favicon.
3. Typography — font_picker for display + body fonts. Leave at preset default unless your brand has a hard requirement.
4. Buttons — radius, border, letter spacing.
5. Cart — drawer or page; minimum-cart message; checkout button label.
6. Accounts — guest / required / classic / new customer-account behaviors. Defaults to Shopify’s recommended setting.
7. Markets — switcher pattern, country-gate behavior, geolocation prompt.
8. Social — social media URLs (Instagram, TikTok, YouTube, etc.).
9. Colors — 4 foreground / background pairs. Mercer warns at compile time if a pair fails AA contrast.

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 — desktop). Mobile defaults to 120 px; reduce if your logo is very wide.
• “My announcement bar isn’t showing.” The announcement section has separate Show on desktop and Show on mobile toggles, both on by default — but if you’ve disabled both, nothing renders.
• “My mega menu shows as a plain dropdown.” Mega-menu image columns activate when at least one image column is set on the parent menu link. Plain dropdowns render when no image is set.
• “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.