Getting started with Mercer

Mercer is a five-preset Shopify theme designed for premium DTC brands. Each preset is a complete look — palette, type pair, radius language, and a signature hero — designed end-to-end. Pick one and ship. Switch between them non-destructively if your brand evolves; content is preserved across preset changes.

This guide takes you from “theme installed” to “store ready” in about an afternoon.

What you get

• 5 designed presets: Mercer (editorial fashion / beauty), Warm Craft (ceramics, pantry, slow goods), Bold Pop (DTC beauty and lifestyle), Quiet Luxe (jewelry, fragrance), Tech Forward (electronics and accessories — dark by design).
• 23 merchant-facing sections including 7 hero sections (one per preset, plus a heritage-feel masthead and a secondary H-scroller for Bold Pop), plus the Custom Liquid section and parity blocks in every section that supports @app.
• Full Online Store 2.0 template coverage for product, collection, list-collections, blog, article, page, page.contact, password, gift card, cart, search, 404, and all 7 customer-account templates.
• 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.
• B2B-aware: catalog selector, tier-price table, and per-product quantity rules. B2C requests render zero B2B markup.
• Performance: Lighthouse mobile median 99 / 94 / 93 (home / collection / PDP) on the live storefront. CLS = 0 across all five presets × three page types.
• A11y: WCAG 2.1 AA verified. 100 / 98 / 96 cluster scores perfect-by-page on the LH automated audit.

Step 1 — Install the theme

You can install Mercer from the Shopify Theme Store, or, if you have the theme files in hand, from your store admin.

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 under “Theme library”.
4. Click Customize to open the Theme Editor.

From a theme zip

1. From your store admin, go to Online Store → Themes.
2. Click Add theme → Upload zip file.
3. Select the Mercer zip you received.
4. Once upload finishes, click Customize on the new theme entry.

Step 2 — Pick a preset

Mercer ships with five fully designed presets. Each is selected from the Theme Editor’s Theme settings → Preset picker. Switching presets does not destroy your content; it swaps the design tokens (colors, fonts, radius, button shape) and the signature hero block.

The default preset is Mercer. To switch:

1. Open the Theme Editor.
2. Click Theme settings (the gear icon at the bottom-left).
3. Under Preset, select your preset.
4. Save.

When you switch presets, the storefront reloads with new tokens. Any content you’ve added to the home page or other templates remains in place.

When to use which preset

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

Step 3 — Connect your brand

Go to Theme settings in the Editor and walk down the panel:

1. Brand
   • Logo — 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, ideally 512×512.
2. Typography — leave at preset default unless your brand needs a specific font. The font_picker uses Shopify’s font library. Both fonts are loaded via font_url and respect font_modify for weight / italic derivation.
3. Colors — if you switched to a preset and like the palette, leave it. Otherwise, override the four foreground / background pairs. Mercer enforces a minimum AA contrast at compile time; the Editor warns you if you pair two colors that don’t pass.
4. Buttons — radius (0, 4, 8, 12, 999 px), border (0–2 px), letter spacing (0–0.16 em). Each preset ships with a designed button shape; override only if you have a strong opinion.
5. Cart — choose between Drawer and Page behavior. Drawer slides in from the right; page is a full /cart route.

Step 4 — Set up your home page

Mercer’s default home page (templates/index.json) ships with a sensible composition:

1. Signature hero (preset-specific — see Section reference)
2. Featured collection
3. Image with text
4. Multi-column (icon row)
5. Testimonials
6. Newsletter

Add, remove, or reorder sections from the Editor. Every section that isn’t a main-* template section can go on the home page.

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 Section reference under “Product page” for the optional metafield list.

For collections, Mercer surfaces a collection hero image metafield. If you set collection.metafields.mercer.hero_image to an image, the collection’s banner uses that image; otherwise it falls back to the first product image. Set it for your top collections; it’s worth the 10 minutes.

Step 6 — Markets and B2B

If you sell across multiple countries or in multiple currencies, see Markets. If you offer wholesale, see B2B. Both are optional and disabled by default; B2C-only stores incur zero overhead.

Step 7 — Publish

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

1. From the Editor, click Save to commit your customizations.
2. Click Publish in the top-right. Confirm.
3. Mercer is now live.

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 or contact support .