# 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.