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).
• 30+ merchant-facing sections including 7 hero sections — the editorial magazine cover plus six signature heroes (one per other preset, with a heritage masthead and a secondary H-scroller for Bold Pop) — plus the Custom Liquid section and parity blocks in every section that supports @app. 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: catalog selector, tier-price table, and per-product quantity rules. B2C requests render zero B2B markup.
• Per-section color schemes: 5 named palettes on 17 sections (11 reusable plus the 6 signature heroes), independent of the global Theme Settings colors.
• 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

You can install Mercer from the Shopify Theme Store once the listing is live.

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.

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) while your content is preserved.

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.

Once installed, you can also apply named color schemes to individual sections — see Color schemes.

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 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. (Shopify upscales from a small square.)
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 — if you switched to a preset and like the palette, leave it. Otherwise, override the four foreground / background pairs. Mercer is designed around AA-oriented contrast targets; review custom color pairs before publishing.
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

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

1. Magazine cover hero (hero-magazine-cover) — the same hero across all presets; switching presets swaps only design tokens (fonts, colors, button shape, type scale), not sections
2. Collection grid (paged) — “The Index”
3. Featured collection
4. Image with text
5. Multi-column (icon row)

Testimonials and Newsletter sections ship with the theme but are not placed on the default home page; add them from the Editor if you want them. 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.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. 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. B2B renders only for logged-in B2B customers (off by default). 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. Single-market B2C stores incur zero overhead either way.

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