Theme settings
Chapter 2 of the Atelier user guide.
Open the theme editor and click the gear icon (Theme settings). The groups below appear in this order.
Colors
Color palette sets all twelve colors at once:
| Palette | Page | Stone wells | Accent | Feels like |
|---|---|---|---|---|
| Travertine (default) | Warm limestone #eeeae3 | #e2dcd2 | Moss #4a5636 | A design-furniture gallery: editorial and calm |
| Plaster | Near-white limewash #f7f6f3 | #ebe9e4 | Deep teal #1d5c58 | A bright home store with many products |
| Walnut | Dark walnut #1c1713, cream text | #2e2620 | Brass #cfab6c | Lighting studios and evening-mood decor; lit photography glows on it |
| Concrete | Cool grey #e3e3df | #d5d5d0 | Ochre #7c5306 | Architectural, modernist and outdoor furniture |
Every palette meets WCAG AA contrast for text (4.5:1) and controls (3:1) on every background the theme uses.
Below the palette, each of the twelve colors can be set on its own. A color you set overrides the palette until you clear it (the field then reads "From palette"):
| Group | Colors |
|---|---|
| Grounds | Page background; Panels and drawers (paper white: the cart drawer, popovers, the material close-up, the sample box, the drawing sheet); Stone wells and bands (product wells, the footer, the announcement bar and stone bands) |
| Text | Headings, prices and buttons (also selected options and the primary button fill), Body text, Secondary text (designer lines, captions, wall labels), Tertiary text (compare-at prices, placeholders) |
| Controls and signals | Control borders (fields, steppers and option pills; keep it at 3:1 against the page, panel and stone colors), Accent (kickers, sale badges, the focus ring), Text on accent, Alerts (low stock and errors), In stock and confirmations (in-stock dots, "Sample in your cart", "Fits" results) |
Overriding a color can lower contrast. Check text on your new color with a contrast checker before you publish.
Typography
| Setting | Default | Notes |
|---|---|---|
| Heading font | Jost Light | Display, headings, the collection index, pull quotes and drawer titles. Set light and large. |
| Body font | Jost | Everything else: body, buttons, labels, prices, tables and the text logo. The theme loads the regular weight, a medium (500) for labels and buttons, and the italic for emphasis in rich text. |
| Base text size | 16px (14 to 18) | Scales all text |
With Jost in both roles the page loads one family. The presets use Tenor Sans with Jost (Lumen) and Host Grotesk Medium with Host Grotesk (Commons). Any font in Shopify's font library works; light geometric and humanist sans serifs suit the heading role best. Headings are never given a faked bold or slant, so a single-weight heading font is used as it is. Prices, dimensions and dates use the body font with lining, even-width figures.
Layout
| Setting | Default | What it does |
|---|---|---|
| Page width | Standard, 1360px | Narrow (1200px), Standard (1360px) or Wide (1600px) |
| Page margin | 40px (16 to 64) | The space either side of the page on large screens. Phones always use 20px. |
Navigation, Brand and Motion
- Show back-to-top button (on): adds a "Back to top" link to the bottom row of the footer, and a small floating up arrow that appears after shoppers scroll down two screens. The arrow shows only on wide screens where it fits in the margin beside the content (for example a 1600 px screen at the standard page width), so it never covers a product or a button; on phones, tablets and narrower desktops the footer link is the way up. Position: Left (default) or Right for the floating arrow; pick the side opposite your chat button. It is mirrored for right-to-left languages.
- Use a custom logo (off: the shop name shows as a text logo), Logo, Logo width (140px, 80 to 320, shown when the custom logo is on), Show the lintel mark beside the shop name (on: a small lintel drawn before the shop name; hidden when you use a logo image), Tagline ("Furniture studio": a short line beside the shop name on wide screens) and Favicon (32 × 32px).
- Reveal sections as they scroll into view (on): section headings and product grids fade up once as they come into view. It is off inside the theme editor so you can always see what you are editing.
- Draw dimension lines in (on): dimension lines and the delivery timeline draw themselves outwards from the middle the first time they show.
Neither motion setting moves anything for visitors who ask their device to reduce motion.
Product cards
A card is a gallery plinth: a stone well with the piece multiplied into it, the dimension line under it ("W 240 · D 98 · H 72 cm"), the title and price on one line, the designer line, small material chips and a stock or lead-time line.
| Setting | Default | What it does |
|---|---|---|
| Image ratio | Portrait 4:5 | Or Square 1:1, or Landscape 4:3 |
| Image fit | Contain | Contain shows the whole piece inside the well. Cover fills the well and suits room photographs. |
| Blend white backgrounds into the stone well | On | Multiplies white photo backgrounds into the stone color, so cut-out product shots sit on the stone. Shown with Contain only; ignored on the Walnut palette. |
| Dimensions | Always | The dimension line from custom.width, custom.depth and custom.height (chapter 7). On hover shows it while the card is hovered or focused; Off hides it. |
| Show designer and material line | On | The designer from custom.designer, or the vendor, then custom.material_summary |
| Show stock and lead time | On | In stock, made to order, pre-order or low stock, with lead times from Delivery and lead times (chapter 11) |
| Show "Made to order" badge | On | On products the theme treats as made to order (chapter 11) |
| Show "Ready to ship" badge | Off | On products the theme treats as ready to ship: in stock and not tagged made-to-order (chapter 11). The theme decides this from stock, so no tag is needed. |
| "New" badge for products added within | 45 d (0 to 90) | Products tagged new always show it. 0 shows the badge only on tagged products. |
| Sale badge | Percentage saved | Or The word "Sale" |
| Show quick view button | Off | Opens the product's media, options and buy buttons in a panel without leaving the page |
| Show quick add button | Off | Products without options go straight to the cart. Products with options, a required subscription plan or a gift card recipient open quick view. |
| Show swatches | On | Shows the values of the first material option (named in Materials and samples) that has a swatch to show, else the first option whose values have Shopify swatches, such as Color. A material value uses its material metaobject's swatch, else its Shopify swatch image or colour, the same order as the product page. Choosing one swaps the card's image. Swatches before "+" count: 4 (2 to 8). |
| Show second image on hover | Off | On devices with a mouse, shows the product's second image while the card is hovered or focused |
| Show compare checkbox | Off | Shoppers tick up to 3 products and see them side by side. Stays hidden until you choose a Comparison page: a page set to the page.compare template (chapter 4, Compare). |
A card shows at most two badges, in this order: Sold out, Sale, Pre-order, New, then Made to order or Ready to ship. The Atelier and Lumen presets turn quick view on; Commons turns on quick add, the second image on hover, the Ready to ship badge and dimensions on hover.
Materials and samples, Delivery and lead times, Trade
These three groups drive Atelier's signature features and are described with them: Materials and samples in chapter 8, Delivery and lead times in chapter 11 and Trade in chapter 12. One setting needs attention straight away: Delivery and lead times › Free delivery from, where the presets set demo values (3000, 500 and 200). Set your real threshold, or 0 to hide the cart's delivery meter.
Commerce, Customer accounts and Social media
- Show currency code (off): prints the currency code beside every price.
- Customer account menu: the links in the header account panel. Leave it empty to use the menu Shopify creates for customer accounts.
- Social media: links for Instagram, Pinterest, YouTube, Facebook, X, TikTok, LinkedIn and Threads. They appear as icons in the footer.