Theme settings
Chapter 2 of the Roast 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 sixteen colors at once:
| Palette | Page | Accent | Labels | Feels like |
|---|---|---|---|---|
| Kraft (default) | Cream paper #f4ede1 | Cherry red #9c2a25 | Apricot, butter, sage, rose | A coffee roaster's packing bench |
| Cacao | Dark chocolate #1e1411 | Pistachio #bcd58f | Cocoa rose, caramel, olive, plum | Chocolate makers, evening cafés, premium tea |
| Matcha | Rice-paper green #eff1e6 | Matcha green #3f6020 | Matcha, hojicha, sakura, yuzu | Tea, wellness drinks, plant-based pantry |
| Bakehouse | Butter #fbf3e2 | Raspberry jam #ad2758 | Strawberry, custard, pistachio, blueberry | Cafés, bakeries and merch |
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 sixteen 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 |
|---|---|
| Page and text | Page background, Body text, Headings and buttons (also primary buttons and selected options), Secondary text, Fine print |
| Surfaces and lines | Cards, drawers and inputs; Product wells and bands (the kraft well behind product photos, and the Kraft section background); Control borders (keep it at 3:1 against the page) |
| Accent and status | Accent (hero block, stamps, sale badges, kickers, links and the focus ring), Text on accent, Alerts and low stock, Savings and in stock |
| Label colors | Label 1 to Label 4: the tints that cycle across product card labels and collection tiles, and the "Label" backgrounds sections offer |
Note
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 | Young Serif | Headings, product names, prices and big figures (brew stats, stamp dates) |
| Body font | Work Sans | Everything else. The theme loads its regular, medium (500) and semibold (600) weights. |
| Base text size | 16px (14 to 18) | Scales all text |
Young Serif has one weight and no italic, and Roast never fakes a bold or slanted version. The presets use Hepta Slab with Karla (Pantry) and Caprasimo with Rethink Sans (Café). Any font in Shopify's font library works; chunky serifs and slab serifs suit the heading role best.
Layout
| Setting | Default | What it does |
|---|---|---|
| Page width | Standard | Narrow, Standard or Wide |
| Page margin | 40px (16 to 64) | The space either side of the page on large screens. Phones use 16px. |
| Crimped edges | On | The heat-sealed bag edge along the top of product images and the footer. Off gives them rounded corners. |
| Kicker icon | Coffee bean | The small mark before the line above each section heading: Coffee bean, Leaf, Dot or None |
| Cart name | Bag | The word the header uses for the cart, such as Bag or Basket |
Navigation, Brand and Motion
- Show back-to-top button (on): appears after two screens of scrolling. Position: Left or Right (default); 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 (150px, 80 to 320), Tagline (a short line beside the logo, such as "coffee roasters") and Favicon (32 × 32px).
- Reveal sections on scroll (on): content fades up once as it comes into view. Turn the hero ring stamp (on): one slow turn every 40 seconds. Neither moves for visitors who ask their device for reduced motion.
Cart
| Setting | Default | What it does |
|---|---|---|
| Free delivery over | 0 | Your real free-delivery threshold, in your store's currency. At 0 the product page and bag messages stay hidden. They show only to customers shopping in that currency. The presets set a demo value (60, 75 or 80): change it. |
| Cart drawer suggestion | Empty | Suggests one product from this collection in the cart drawer, such as filter papers |
| Show currency code | Off | Prints the currency code beside every price |
Product cards
| Setting | Default | What it does |
|---|---|---|
| Card style | Label block | Puts origin, name, tasting notes and roast level on a colored label under the image. Plain drops the label color. |
| Image shape | Bag | Bag, Square or Portrait |
| Image fit | Fill the well | Or Show the whole image |
| Show origin and process | On | From the origin and process metafields, or the vendor when both are empty |
| Show tasting notes | On | From custom.tasting_notes |
| Show roast level | On | Five roast dots from custom.roast_level |
| Show quick view button | Off | Opens media, options and buy buttons in a panel |
| Show quick add button | On | Products without options go straight to the bag. Products with options, a required subscription plan or a gift card recipient open quick view. |
| Show swatches | Off | Shows the values of the first option with swatches. Swatches before "+" count: 5 (2 to 8). |
| Show second image on hover | Off | For mouse users |
| Show compare checkbox | Off | Shoppers tick up to 3 products to compare. Needs a Comparison page (chapter 4, Compare). |
| Sale badge | Sale | Or Percentage off |
| New badge for products added in the last | 30 d (0 to 90) | 0 turns it off. Products tagged new always show it. |
| Low stock word | bags | "Only 6 bags left from this lot". Leave empty for "Only 6 left". |
| Size option name | Size | The variant option that holds the bag size, shown after the price on cards |
Tasting and roast
The names for the flavour profile, roast scale and grind picker. Rename them for tea, chocolate or anything else you sell.
| Setting | Default |
|---|---|
| Flavour profile axes | Sweetness, Acidity, Body, Bitterness, Finish (five names, in the order of the custom.flavour_profile values) |
| Roast level names | Light, Medium-light, Medium, Medium-dark, Dark (five, lightest first) |
| Roast scale word | roast ("Light roast") |
| Roast meter colors | Roasted beans (a bean-brown gradient) or Accent |
| Grind option name | Grind (the variant option shown as the grind picker) |
| Grind names | Extra fine, Fine, Medium-fine, Medium, Medium-coarse, Coarse, Extra coarse |
| Grind comparisons | like flour, like caster sugar, like fine sea salt, like table salt, like raw sugar, like coarse salt, like breadcrumbs |
| Grind levels | Whole bean: 0, Espresso: 1, Stovetop: 2, AeroPress: 2, Pour over: 3, Filter: 3, Plunger: 5, Cold brew: 6 |
| Grind help page | Empty. Linked as "Which grind?" beside the grind picker. |
Roast schedule, Customer accounts and Social media
- Roast schedule: see chapter 8.
- 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, TikTok, YouTube, Facebook, X, LinkedIn, Pinterest and Threads. They appear as icons in the footer's Brand column and Social media block.