# Theme settings

Chapter 2 of the Decant user guide.

Open the theme editor, then the **Theme settings** icon. The groups below appear in this order. Everything here applies to the whole store.

## Colors

**Color palette** sets every storefront colour at once. It offers **Flacon** (the default), **Amber**, **Oud** and **Neroli**.

| Palette | Page | Surface | Buttons and fills | Body text | Paper strips | Deep glass band | Used by |
| --- | --- | --- | --- | --- | --- | --- | --- |
| Flacon | Pale glass `#e7edec` | `#dae3e2` | Petrol `#12333a` | `#27363a` | `#fcfbf6` | `#102c33` | The Decant preset |
| Amber | Honey `#efd49e` | `#e7c686` | Oxblood `#6e1423` | `#43241a` | `#fff9ea` | `#4a0e18` | The Attar preset |
| Oud | Smoked brown `#2e1e16` | `#463125` | Rose gold `#e4a48c` | `#ecdfd1` | `#f1e4d1` | `#1e120c` | The Parfumerie preset. A dark shop: the text is light and the button labels are dark. |
| Neroli | White `#ffffff` | `#fff0dd` | Bitter orange `#c85f00`, with dark labels | `#33261c` | `#fff3e0` | `#2c1a0c` | No preset |

Paper stays light in every palette, even on Oud, so print on a strip is always dark. Every text and control colour in the four palettes has been measured for contrast.

The settings under the palette override one colour at a time. Leave them blank to follow the palette. A colour you set overrides the palette until you clear it, and **colours you set are yours to check for contrast**: the measurements no longer apply to them.

| Header | Setting | What it colours |
| --- | --- | --- |
| Page | Page background | The page itself |
| | Body text | Paragraphs |
| | Headings, names and prices | Headlines, product names and prices |
| | Secondary text | Intros, helper text and meta lines |
| | Faint text | The quietest text |
| Panels and fields | Header, drawers and fields | The header, drawers, fields and popovers |
| | Surfaces and panels | Quiet bands and the ground behind images while they load |
| | Control borders | The borders of fields and controls |
| Controls | Accent | Primary buttons, selected chips, accord bars and other fills |
| | Text on accent fills | Labels on those fills |
| | Sale and errors | Sale prices and error messages |
| Paper and glass | Paper strips | The blotter strips: badges, notes and tiles. Keep it light, so its print stays dark. |
| | Deep glass band | The announcement bar, finder and footer |

### Scent families

A strip's wet tip takes its tint from a **family**. There are five, and the tints are the same in every palette: **fresh** (sea green), **floral** (rose), **woody** (brown), **amber** (gold) and **gourmand** (dark brown). Anything else gets a neutral tint.

**Family names** tells the theme how to tint a word that isn't one of the five. It's one line per word, written `Name | family`. It ships with these lines:

```
Citrus | fresh
Green | fresh
Aquatic | fresh
Aromatic | fresh
Musk | floral
Powdery | floral
Fruity | floral
Leather | woody
Smoky | woody
Earthy | woody
Oud | woody
Spicy | amber
Resin | amber
Vanilla | gourmand
```

So a product whose `custom.family` is "Citrus" gets the fresh tint, and so does a collection tile called Citrus. Capitals don't matter. The Attar preset's list starts with its own words instead: `Rose | floral`, `Sandalwood | woody`, `Oud | gourmand` and `Musk | neutral`. These lines only choose a tint. They don't add anything to the finder or the filters (chapters 11 and 13).

## Typography

| Setting | Default | Range | Notes |
| --- | --- | --- | --- |
| Heading font | Halant | Any Shopify font | Headlines, the text logo, product names and notes |
| Heading size | 100% | 85 to 110% | Scales every headline. Each preset sets its own. |
| Body font | Schibsted Grotesk | Any Shopify font | Everything you read and press: text, navigation, buttons, prices and labels |
| Base text size | 100% | 90 to 115%, in steps of 5 | |

## Layout

| Setting | Default | Options |
| --- | --- | --- |
| Page width | Medium | **Narrow**, **Medium** or **Wide** |
| Page margin | 40px | 16 to 80px. The space at each side of the page on large screens. Under 990px it's always 16px. |

## Navigation

**Show back-to-top button** (on) appears after shoppers scroll down one screen. On phones it steps aside while the discovery set's tray or the finder's results line is on screen. **Position** is **Left** or **Right**, and every preset uses Right. It's mirrored for right-to-left languages, so pick the side opposite your chat button.

## Brand

| Setting | Default | Notes |
| --- | --- | --- |
| Use a custom logo | Off | Uses the shop name, in the heading font, when off |
| Logo | | Your logo image |
| Logo width | 180px | 80 to 320px. Shows when **Use a custom logo** is on. |
| Text logo size on phones | 27px | 18 to 28px. Long shop names look better smaller. They wrap to two lines rather than clip. |
| Favicon | | 32 x 32px recommended |

## Commerce

| Setting | Default | Notes |
| --- | --- | --- |
| Free shipping over | 0 | Your real free-shipping threshold, in your store's currency. Leave it at 0 unless you offer free shipping. At 0, the product page and cart messages stay hidden. They show only to customers shopping in your store's currency. |
| Show currency code | Off | Prints the currency code beside every price |

**Free shipping over** only changes what the theme says. Your actual free shipping is a rate or a discount you set up in Shopify admin, so make the two agree.

## Product cards

Cards appear in collections, search, recommendations and Featured collection.

| Setting | Default | What it does |
| --- | --- | --- |
| Image shape | Portrait (4:5) | **Portrait (4:5)**, **Square** or **Tall (3:4)** |
| Show the notes line | On | The first top, heart and base note, joined with dots, from `custom.top_notes`, `custom.heart_notes` and `custom.base_notes` |
| Show price per ml | On | The lowest price per ml among the product's sizes (chapter 8) |
| Show the size line | On | The sizes on offer, such as "1, 5 and 10 ml" |
| 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 (on in every preset) | Products without options go straight to the bag. Products with options, a required subscription plan or a gift card recipient open quick view. |
| Quick add the smallest size | On | Shows with **Show quick add button**. With a Size option, quick add puts the smallest available size in the bag, and the button says so: "Add 1 ml · $6.00". |
| Show swatches | Off | Shows the values of the first option that has swatches, such as Color. **Swatches before "+" count**: 5, from 2 to 8. |
| Show second image on hover | Off (on in every preset) | 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 a page using the `page.compare` template is chosen below. |
| Comparison page | | Create a page in **Online Store › Pages**, set its theme template to `page.compare`, and choose it here. A page with another template is ignored. |
| Best seller tag | `best-seller` | Products with this tag get a **Best seller** badge |
| Show "Only 3 left" at or under | 5 | Products tracked at or under this stock get a low stock badge. Set 0 to turn it off. |

A card shows one badge. A product tagged `new` gets a **New** badge, and Sold out, Pre-order, low stock and Sale take priority over New and Best seller. Scents with a `custom.family` also get a thin hanging strip on the image, with the family's name and tint.

## Size and concentration

The chips and bottles on the product page, and the price per ml. Chapter 8 covers every setting here.

## Discovery set

**Discovery set tag** (`discovery-set`): products with this tag show the set builder and skip quick add (chapter 9).

## Customer accounts

**Customer account menu** sets the links in the header account panel. Leave it empty to use the menu Shopify creates for customer accounts.

## Social media

Links to Instagram, YouTube, Facebook, X, TikTok, LinkedIn, Pinterest and Threads. They appear in the footer's **Social media** block.