Getting started with Mercer

Mercer is a five-preset Shopify theme by Zbang , designed for premium DTC brands. Each installed preset supplies a palette, type pair, styling accents, and starting section layout. You can customize that layout and its settings after installation. Changing styling accents, applying a theme style, and installing a different preset are distinct actions, explained below.

This guide covers the setup steps from installation through storefront preview and publishing. The work depends on your catalog, content, and integrations.

Mercer has not yet been submitted to the Shopify Theme Store. It is not approved or available to buy or install. The installation steps below describe the intended process after a listing becomes available; no release date is announced.

What you get

• 5 designed presets: Mercer (editorial fashion / beauty), Tactility (ceramics, pantry, slow goods), Confetti (DTC beauty and lifestyle), Poise (jewelry, fragrance), Gridline (electronics and accessories — dark by design).
• 34 addable sections: 31 template sections and 3 group-only sections (Header, Footer, Mobile bottom navigation). The library includes 7 hero sections — Magazine cover hero plus six signature sections — and Custom Liquid. Every section that supports @app also supports a Custom Liquid block. Newer merchandising sections include image hotspots, lookbook, before / after, press coverage, promo tiles, and B2B quick order.
• Full Online Store 2.0 storefront template coverage for product, collection, list-collections, blog, article, page, page.contact, password, gift card, cart, search, and 404.
• Native Shopify swatches via option_value.swatch.color and .swatch.image — no per-merchant swatch metafields.
• Markets-ready: currency / language switchers in three patterns (header dropdown, full modal, footer-only) plus a first-visit country gate. French, German, Italian, and Spanish starter locale packs are included for native-speaker review before production use.
• B2B-aware: company-location switching, tier-price information, and per-variant quantity rules for eligible signed-in B2B customers.
• Per-section color schemes: 5 choices on 17 sections (11 reusable plus the 6 signature heroes). Default follows the global palette; the four named palettes can be edited separately.
• Performance: performance-focused templates prepared for Shopify benchmark testing across home, collection, and PDP surfaces.
• A11y: accessibility-minded contrast, focus, labeling, and reduced-motion patterns aligned with WCAG 2.1 AA goals.

Step 1 — Install the theme

If Mercer is approved and listed, you will be able to install it from the Shopify Theme Store. It is not available to buy or install there yet.

From the Theme Store

1. Visit the Mercer listing in the Shopify Theme Store.
2. Click Try theme to load Mercer onto your store as an unpublished draft theme. (This doesn’t replace your live theme; you can preview and customize before publishing.)
3. From your store admin, go to Online Store → Themes. Mercer appears among your draft themes.
4. Click Edit theme to open the Theme Editor.

Step 2 — Pick a preset

Mercer ships with five designed presets. Choose the installation whose starting layout fits your store, then customize its sections and settings.

There are three different controls to keep in mind:

• Theme settings → Style accents → Style changes styling accents, including shape, interface details, and the curated color for each global color you have not changed. It preserves content, section layout, your selected fonts, and the colors you changed.
• Theme settings → Theme style is Shopify’s style selector. Applying it updates presentation settings, including colors and fonts; it does not install a different section layout. Review the preview before saving, especially if you have already customized those settings. See Shopify’s theme-style guidance .
• Installing a preset supplies its starting template composition, section values, and presentation settings. A different installed theme is a separate customization, not a saved layout you can recover by switching Style accents.

Fonts always come from the Typography font pickers. The installed preset or applied theme style seeds those pickers; the Style accents control does not replace them. Density changes section spacing, not the type scale.

You can also choose color schemes for individual sections.

When to use which preset

• Mercer — clothing, footwear, leather goods, perfume, beauty editorial. Good “default premium” if you’re not sure.
• Tactility — pottery, candles, kitchen tools, food, body care with handmade-feel branding.
• Confetti — beauty, supplements, skincare, food brands wanting high-energy modern with vivid color.
• Poise — fine jewelry, fragrance, leather goods at the high end. Generous whitespace, thin hairlines.
• Gridline — electronics, audio, accessories, anything in a technical / engineered space. The only dark preset.

Step 3 — Connect your brand

Open Theme settings in the Editor and review these essentials:

1. Brand
   • Logo image — upload your brand mark. The Editor lets you set logo width separately for mobile and desktop. Default is 120 px / 180 px; if your logo is wide, keep it small on mobile.
   • Favicon — upload a square PNG; the theme recommends 32×32 px. The theme requests a 32×32 rendition.
2. Typography — leave at preset default unless your brand needs a specific font. The font_picker uses Shopify’s font library. Both fonts are emitted via the font_face filter and respect font_modify for weight / italic derivation.
3. Colors — a global color you change replaces only that color and keeps applying after later Style accents changes; colors you leave unchanged follow the active style. See how Colors interact with Style. Review text and button contrast after changing colors.
4. Buttons — a single Button shape picker with Use preset default, Sharp corners (0), Rounded (8 px), and Pill options (default Use preset default). Each preset ships with a designed button shape; override only if you have a strong opinion.
5. Cart — choose between Drawer (mobile-first, default) and Cart page behavior. Drawer slides in from the right; page is a full /cart route.

Step 4 — Set up your home page

The Mercer installation starts with:

1. Magazine cover hero (hero-magazine-cover)
2. Page-numbered grid (collection-grid-paged)
3. Featured collection
4. Image with text
5. Multi-column

The other installations have their own starting compositions: Tactility opens with Warm · collections, Confetti with Color block, Poise with Luxe · single product, and Gridline with Specification strip. See the home page compositions. Changing Style accents or applying a theme style leaves your section layout in place.

Add, remove, or reorder eligible sections in the Editor. A few sections work only on certain templates, and the header and footer sections live in their section groups; the sections overview lists which. Internal rendering endpoints are not merchant page layouts.

Step 5 — Add products and collections

Mercer reads native Shopify product data. No custom metafields are required to launch — although several optional metafields surface extra storefront features when present. See the product, collection and shop metafields for names, value types, and where each is used.

For collections, Mercer surfaces a collection hero image metafield. If you set collection.metafields.custom.hero_image to an image, the collection’s banner uses that image; otherwise it falls back to the collection image, then to the first product image. Use an image suited to the banner’s wide crop.

Step 6 — Markets and B2B

If you sell across multiple countries or in multiple currencies, see Markets. If you offer wholesale, see B2B. B2B order controls appear for eligible signed-in B2B customers. The Markets switcher defaults to Header dropdown (8 markets or fewer) — default and appears once there’s something to switch to (2+ countries or 2+ published languages) — set it to Off (single market) under Theme settings → Markets if you don’t want it.

Step 7 — Publish

Once you’ve previewed your store and you’re happy:

1. Save your customizations and preview the draft theme.
2. Publish the draft from Online Store → Themes or the Theme Editor’s Publish action, then confirm.
3. The published theme becomes the storefront theme; any storefront password remains in effect. See Shopify’s publishing instructions .

What’s next

• Browse the Section reference to learn what each section does and when to use it.
• Walk through the Theme Editor walkthrough to understand how blocks compose into sections and section groups.
• Hit a wall? See FAQ, support policy, or contact support.