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 five 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; Show announcement bar is off by default in the section schema. Mercer, Tactility, and Poise installations keep it off; Confetti and Gridline installations turn it on. 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. On desktop the links appear in the header only when they all fit on one line; otherwise the header shows the menu button, as on phones and tablets.
  • Mega-menu columns — choose 2, 3, or 4 columns for enriched desktop dropdowns. Images come from Mega image blocks.
  • Mega-menu enrichment blocks — add Mega image, Mega collection, Mega product, or Mega promo blocks to the Header section, then set Parent menu item URL (parent_link_url) to the URL of a top-level menu link that has child links (or a unique fragment such as #women for a label-only parent). See Header for the block settings.
  • Account icon — uses Shopify’s <shopify-account> web component on mobile and desktop. 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 when enabled in Theme settings → Search; otherwise links to the search page.
  • Country / language switcher — see Markets for pattern options.

The header is sticky in the supplied installations except Poise, with a hide-on-scroll-down / reveal-on-scroll-up pattern when enabled. 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 in desktop dropdowns. The slide-in menu drawer — used on phones and tablets, and on desktop when the menu doesn’t fit — renders the same 3 levels, followed by your footer menu. Mega-menu blocks appear only in desktop dropdowns. 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 navigation — 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; below 1024 px it is also hidden on the cart page.

Below 768 px, footer link columns become interactive accordions and start open.

Templates

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

Choose a page template in the Editor to customize its sections. The home page uses index.json. Gift cards use the separate gift_card.liquid template.

The four layout: false product templates — product.card.json, product.card-state.json, product.quantity-rule.json, and product.quick-view.json — are internal HTML/JSON responses used by recently viewed cards, product-card state, quantity rules, and quick view. Do not assign them to products as storefront layouts. They are not editorial PDP variants.

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

Each installation supplies its own starting index.json composition:

Theme settings → Style accents → Style changes styling accents and supplies the curated color for each global color you have not changed. It does not replace fonts or section layouts. Fonts always use the Typography pickers; Density controls section spacing. The active style also affects interface details throughout the theme, including the product trust strip.

Shopify’s Theme settings → Theme style selector updates presentation settings, including colors and fonts, while the section composition remains in place. The compositions above are supplied at install time. To change the hero on an installed theme, add the desired eligible section and arrange the page in the Editor. See Getting started for the distinction between these controls.

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 Section color scheme (Slideshow uses Control color scheme, which recolors its primary slide buttons, image placeholders and the hover and focus colors of links in slide text, not the arrows or dots). Default inherits the active global palette, including customized global colors. The four named palettes are editable in Theme settings → Section color schemes. See Color schemes for the supported sections and palette behavior.

App blocks

Mercer declares app blocks (@app) in 24 sections. A Blocks panel alone does not imply app support: sections such as Slideshow, Lookbook, and Header have their own fixed block types. Where @app is supported, installed apps can render inline UI, and the same section also offers a Custom Liquid block.

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 Heading / 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

Open Theme settings from the Editor navigation. These settings apply globally. Mercer’s theme settings are organized into 14 panels:

1. Style accents — the Style control selects Mercer, Tactility, Confetti, Poise, or Gridline accents without replacing fonts or section layouts.
2. Brand — favicon, social sharing image, logo + logo widths.
3. Typography — display and body font pickers, Density, and animations. The font pickers always supply the fonts; Density adjusts section spacing.
4. Buttons — button shape (preset / sharp / rounded / pill).
5. Navigation — show breadcrumbs.
6. Cart — drawer or page; the drawer’s free-shipping progress bar and the threshold it shares with the cart and product pages (each of those sections has its own Show free-shipping progress setting); 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), plus Product card option selector (default Color swatches).
10. Markets — switcher style, country selection prompt, and price localization pattern.
11. Social media — social media URLs (Instagram, TikTok, YouTube, etc.).
12. Colors — eight global values for background, text, surface, surface text, accent, accent text, border, and strong border. Each value you change replaces that color and keeps applying after Style accents changes; unchanged values use the active style’s colors. Check contrast against the style’s colors too.
13. Section color schemes — edit the named section palettes that individual sections can opt into via Section color scheme (or Slideshow’s Control color scheme). See Color schemes for the full list.
14. 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 your customizations and preview the draft theme.
• Publish the draft from Online Store → Themes or the Theme Editor’s Publish action, then confirm.
• The published theme becomes the storefront theme; any storefront password remains in effect. See Shopify’s publishing instructions .

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. Check its saved value and set Announcement text; installation defaults differ between styles.
• “My mega menu shows as a plain dropdown.” Mega-menu enrichment blocks attach when Parent menu item URL matches a top-level menu link that has child links. Your store’s domain, letter case, and a trailing slash don’t matter, but a language prefix or a different ?query prevents a match. If several parents link to #, blocks attach only to the first; give each a unique fragment such as #women. Plain dropdowns render when no block matches that parent link.
• “My desktop header shows a menu button instead of links.” The header shows the menu inline only when every top-level link fits on one line beside the logo and icons: from 1024 px with a left logo, or from 1200 px with a centered logo, which leaves only the space to its left. Otherwise it uses the menu drawer; there is no setting for this. Shorten or combine top-level links, reduce Logo width (desktop), or set Logo position to Left. The Theme Editor preview is often narrower than a full browser window.
• “The Style control did not change my fonts or hero.” Style accents preserves those choices. Use Typography for fonts and edit the template sections for layout. Applying a Shopify theme style can replace presentation settings; duplicate the theme before experimenting. Switching Style accents back does not restore a separate saved template or undo other edits.

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.