Merchant field guide
Make the theme unmistakably yours.
Start with a preset, not a blank page. Marque, Sodium and Museum are complete starting systems. Replace the content first; change the system only when the brand needs it.
Start here
- Choose the closest preset. Marque is quiet luxury, Sodium is release-led streetwear, and Museum is restrained editorial.
- Add your identity. Upload the logo and favicon, then set the social links under Theme settings.
- Connect navigation. Assign the main and footer menus before editing promotional blocks.
- Build the catalog. Add product photography, Color and Size options, collections and product metafields.
- Replace demo content. Work down the home page in order. Uploaded merchant imagery always takes priority over demo media.
- Test the complete journey. Check search, collection filters, variant changes, cart and checkout on mobile before publishing.
Brand system
Typography and color
Theme settings control the global type pairing, page width, spacing, button geometry, card treatment and motion character. Adjust these global controls before compensating inside individual sections.
| Preset | Typography | Default character |
|---|---|---|
| Marque | Cormorant Garamond + Jost | Warm paper, hairline rules, caption plates |
| Sodium | Anton + Archivo | Condensed type, square campaigns, signal orange |
| Museum | Playfair Display + Jost | Cool gallery space, tall product imagery |
Motion
Motion level controls intensity. Motion personality controls character. Keep Off as a deliberate minimal mode; visitors who request reduced motion always receive the reduced experience.
Products
Variants and visual swatches
Use Color or Colour and Size as consistent option names. Swatches resolve in this order: Shopify option image or color, custom.swatch_image, variant image, CSS color, then the built-in named-color fallback.
Variant-specific media
Add a bracketed color token to media alt text, for example [Ivory] front or [Bordeaux] detail. Untagged media remain shared. Filtering activates only when the product has a Color/Colour option and media for at least two color tokens.
Size charts
Marque supports linked size-guide pages, product-specific chart data and category defaults. Enter measurements in centimetres; the storefront can display centimetres or inches.
The Atelier Ledger
| Metafield | Purpose |
|---|---|
custom.run | Production entry or run number |
custom.cloth | Fabric and provenance |
custom.maker | Maker or workshop |
custom.run_size | Total pieces in the run |
custom.remaining | Remaining pieces, using real inventory facts only |
custom.fit_note | Concise product-specific fit advice |
Campaigns
Atelier Bulletin
Add up to six messages in the header. Each message can have a link, start and end time, countdown, free-shipping synchronization and dismiss behavior. Use ISO dates with a timezone.
Complete the fitting
Choose a styled image and two to four products. Customers select an exact available variant for each row, then add the complete look in one action. The displayed total updates from live product data.
Reviews and back-in-stock
Rating displays read Shopify's standard review metafields and accept review-app blocks. Back-in-stock records demand through Shopify's native contact form; automated inventory notifications require Shopify Flow or a dedicated app.
Section field notes
| Section | Best use |
|---|---|
| Editorial hero | One clear campaign thesis; image or poster-first ambient video |
| Campaign categories | Three to four primary shopping routes |
| Atelier Ledger | Material, maker and limited-run storytelling |
| Drop counter | A real release date with an honest post-drop state |
| Lookbook | Editorial image with optional shoppable hotspots |
| Moving ledger | Short text, image or product records; keep the rail concise |
| Image comparison | Material, process or before/after detail with aligned source images |
| Testimonials | Verified client or press quotations |
| FAQ | Delivery, returns, care, fit and service questions |
Keep it fast
- Upload correctly cropped images rather than relying on oversized originals.
- Keep the first home-page section focused: one hero image or one short muted film.
- Avoid duplicating product rails above the fold.
- Remove apps that inject storefront scripts when their function is no longer used.
- Test the published theme rather than judging performance from Shopify's preview editor.
- Keep all interactive labels, alt text and focus states intact when customizing Liquid.
Troubleshooting
A section shows no image
Choose an uploaded image in the section. Demo imagery is not the merchant's content and should be replaced before launch.
Swatches display as plain labels
Confirm the option is named Color or Colour, then add Shopify option colors/images, a swatch metafield or variant images.
Variant media does not filter
Use matching bracket tokens in media alt text and make sure at least two color groups exist. Untagged media intentionally remain shared.
Complementary products are empty
Curate complementary products in Shopify Search & Discovery. Related products can populate automatically; complementary products need merchant selection.
The back-in-stock form does not send customer alerts
The theme records the request. Configure Shopify Flow or an inventory-notification app to send automated restock messages.
The theme looks slower in preview
Shopify's preview bar adds scripts and network work. Measure an uploaded published or production-equivalent theme in a fresh browser profile.
Support boundary
Theme support covers Marque defects, clarification of built-in settings and reasonable help reproducing a theme issue. Critical bugs are triaged immediately.
Support does not include custom storefront development, third-party app configuration, catalog entry, photography production or changes to Shopify platform behavior. Those can be scoped separately.