# Theme settings

Chapter 2 of the Wick user guide.

Open the theme editor and click the gear icon (**Theme settings**). The groups below appear in this order.

## Colors

**Color palette** sets the storefront's twelve colors at once:

| Palette | Page | Paper | Accent | Candlelight | Feels like |
| --- | --- | --- | --- | --- | --- |
| **Beeswax** (default) | Honey cream `#f7eed6` | Ivory `#fffaf0` | Burnt amber `#a3470f` | `#f5b54f` | Candles |
| **Sage** | Soft sage `#e6ebdf` | `#f8faf4` | Clay `#9a472b` | Beeswax gold `#efc777` | Soap, bath and body |
| **Smoke** | Blue charcoal `#1c1c20` (dark) | `#25252a` | Candle gold `#f2b34c` | `#ffb347` | Luxury home fragrance |
| **Rosewater** | Dusty rose `#f4e6e1` | `#fdf7f4` | Plum `#7a2e5d` | Peach `#f4b48a` | Bath and body, gifting, florals |

The **accent** fills primary keys and colors kickers, the focus ring on light backgrounds, selected chips and tiles, the filled flames of the strength meter, the bar under the current menu item and the bag count. **Candlelight** is the warm light: the glow in product wells and bands, and on the dark **dusk band** (the spotlight, the footer and dark hero layouts) it also colors keys, kickers and prices. Every palette meets WCAG AA contrast for text (4.5:1) and controls (3:1) on the backgrounds the theme uses.

Below the palette, each color 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 | Page; Body text; Headings, titles and prices; Secondary text (ledes, meta, notes lines); Quiet text (compare-at prices, the card's detail line, placeholders) |
| Paper and bands | **Paper** (every label, drawer, menu panel and field); **Bands** (the announcement bar, glow bands, disabled keys and the sold-out badge) |
| Lines and accents | **Control borders** (fields, chips, option tiles, steppers and empty flame pips: keep it at 3:1 or more against the page, paper and bands); Accent; Text on accent; Sale and errors (sale prices and badges, low stock, errors); Candlelight |

> **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 | Fraunces | Headings, product titles, big prices and numbers, and the text logo. The theme loads the face you pick, a slightly bolder face for card titles and small headings, and its italic, which sets kickers, scent notes and the "Smells like" line. A font without an italic uses the body font's italic for those. |
| Body font | Nunito Sans | Menus, buttons, labels, badges, descriptions, forms and card prices. The theme loads regular, semibold (600), bold (700) and italic. |
| Base text size | 16px (14 to 18) | Scales all text |

The presets use Marcellus with Nunito Sans (Lather; Marcellus has no italic, so its kickers and notes run in Nunito Sans italic) and Cormorant with Nunito Sans (Vesper). Any font in Shopify's font library works. Wick never fakes a bold or italic the font doesn't have, and all text is in sentence case: the theme never turns text into capitals.

## Layout

| Setting | Default | What it does |
| --- | --- | --- |
| Page width | Medium | Narrow, Medium or Wide |
| Page margin | 40px (20 to 56) | The space either side of the page on large screens. Phones always use 20px. |
| Print a keyline inside labels | On | The thin line printed just inside every paper label |

## Navigation, Brand and Motion

* **Show back-to-top button** (on): appears after shoppers scroll down one screen, and steps aside on phones while the gift box's bottom bar shows. **Position**: Left or Right (default); pick the side opposite your chat button. It is mirrored for right-to-left languages.
* **Brand**: **Use a custom logo** (off: the shop name shows as a text logo in the heading font), **Logo**, **Logo width** (180px, 80 to 320, with a custom logo), **Show a flame above the shop name** (on, text logo only), **Line under the shop name** (a short italic line such as "candle co · since 2019"; empty hides it; the presets fill it in) and **Favicon** (32 × 32px recommended).
* **Motion**: **Fade sections in as they scroll into view** (on: section headings, cards and labels fade up once) and **Flicker the flames on load** (on: the logo flame and the flames in the scene art flicker three times, then rest). Every effect is off for visitors who ask their device for reduced motion.

## Commerce

| Setting | Default | What it does |
| --- | --- | --- |
| Free shipping over | 0 | Your real free-shipping threshold, in your store's currency. Above 0, the cart drawer and cart page show "$22.05 away from free shipping" over a progress track, then "Free shipping unlocked". It only shows to customers shopping in your store's currency. The presets set a demo value (60, 50 or 150): change it. |
| Show currency code | Off | Prints the currency code beside every price |

## Product cards

Every product card is a **vessel card**: the product stands in a glow well, badges sit on the well as small notched tags, and a paper label overlaps the foot of the well with the title, a scent line, a detail line, the price and an **Add** key.

| Setting | Default | What it does |
| --- | --- | --- |
| Image shape | Portrait 4:5 | Square 1:1, Portrait 4:5 or Tall 3:4. The presets use Portrait (Wick), Square (Lather) and Tall (Vesper). |
| Image fit | Contain | Contain suits cut-outs on transparent backgrounds; Cover fills the well, for lifestyle photos |
| Glow behind products | Scent family color | **Scent family color** tints each well with the product's family (`custom.scent_family`, chapter 7; an unknown or missing family glows in candlelight), **Candlelight** uses the one warm light for every card, **None** gives flat paper wells |
| Line under the title | Scent notes | **Scent notes** ("Fig · cedar · amber" in italics, with the family dot), **Smells like** ("Smells like a fig tree after a summer storm.") or **None**. The line hides on products without the data. |
| Detail line | Product type | None, Product type, Vendor, or **Metafield**: the product's `custom.card_meta`, such as "Soy candle · 220 g" (chapter 7) |
| Show New for | 21d (0 to 90) | Days after a product is published. 0 turns the date rule off; products tagged `new` always show it. Vesper sets 0. |
| Bestseller tag | bestseller | Products with this tag show a Bestseller badge |
| Low stock threshold | 5 (0 to 20) | Shows an "Only 3 left" badge when tracked stock is at or below this number. 0 turns it off. |
| Sale badge | Percent saved | "Save 20%", or Amount saved ("Save $10") |
| 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 | On | Products without options go straight to the cart with **Add**. Products with options, a required subscription plan or a gift card recipient show **Choose**, which opens quick view. Sold-out products show **Notify me**, linking to the product page. |
| Show swatches | Off | Shows the values of the first option that has swatches, such as Color. **Swatches before "+" count**: 5 (2 to 8). |
| Show second image on hover | Off | On devices with a mouse |
| 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 using the `page.compare` template (chapter 4). |

A card shows at most two badges, in this order: Sold out, Sale, low stock ("Only 3 left", only for variants whose inventory Shopify tracks and that stop selling at zero), New and Bestseller.

## Scent and Gifting

The settings behind the signature features, each explained in its chapter: **Scent family metafield** (chapter 9) and the eight **Scent family colors** (chapter 8), and the gift wrap, gift note and **Gift box page** settings (chapters 10 and 12).

## Customer accounts and Social media

* **Customer account menu**: the links in the header's account panel. Leave it empty to use the menu Shopify creates for customer accounts.
* **Social media**: Instagram, YouTube, Facebook, X, TikTok, LinkedIn, Pinterest and Threads. Each link you add shows as an icon in the footer.