# Theme settings

Chapter 2 of the Hooray 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 **Confetti** (the default), **Sand**, **Gilt** and **Disco**.

| Palette | Page | Buttons and fills | Body text | Bright block A | Bright block B | Deep band | Used by |
| --- | --- | --- | --- | --- | --- | --- | --- |
| Confetti | Warm white `#fffbf5` | Cobalt `#2433c9`, white labels | `#2d2b4a` | Tangerine `#ff7d45` | Sunshine `#ffd447` | Cobalt `#1f2bb0` | The Hooray preset |
| Sand | Sand `#f3eadd` | Terracotta `#a94b29` | `#4a3b31` | Sage `#b3c0a1` | Clay `#e3b697` | Eucalyptus `#3e4a3b` | The Garland preset |
| Gilt | Ivory `#fbf7ee` | Deep gold `#86641a` | `#2b2722` | Champagne `#ecdcb4` | Black tie `#16130f` | Black `#16130f` | The Toast preset |
| Disco | Midnight `#0f1230` | Electric pink `#ff4fa8`, dark labels | `#dadcf0` | Silver `#c9ceda` | Electric pink `#ff4fa8` | `#080a1f` | No preset. A dark shop: the text is light. |

Each bright block carries one text colour of its own, dark on the light blocks and light on Gilt's black tie, so text on a block always reads. Every text and control colour in the four palettes has been measured for contrast. Each palette also has five **garland colours** used only for decoration: the hero garland, confetti and the plain balloons that stand in for missing photos.

The settings under the palette override one colour at a time. Leave them blank to follow the palette. Changing a bright block or the deep band keeps the palette's text colour for it: dark on every block except Gilt's black tie and the bands, which carry light text, so choose a replacement of similar lightness. 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, cards and drawers | The header, product card tiles, drawers, fields and popovers |
| | Quiet bands and image tiles | Quiet bands (occasions, newsletter) and the tile behind product images |
| | Control borders | The borders of fields and controls |
| Controls | Accent | Primary buttons, selected chips, the selected day and other fills |
| | Text on accent fills | Labels on those fills |
| | Sale and errors | Sale prices and error messages |
| Colour blocks | Bright block A | The first bright block, such as tangerine. Text on it uses one dark colour from the palette. |
| | Bright block B | The second bright block, such as sunshine |
| | Deep band | The announcement bar, the Turning picker and the footer |

Sections choose their ground with a **Background** setting (chapter 4): **Page**, **Surface**, **Bright block A**, **Bright block B** or **Deep band**.

## Typography

| Setting | Default | Range | Notes |
| --- | --- | --- | --- |
| Heading font | Recursive | Any Shopify font | Headlines, the text logo, prices and number balloons. Each preset sets its own. |
| Heading size | 100% | 85 to 120% | Scales every headline. Each preset sets its own. |
| Body font | Radio Canada Big | Any Shopify font | Everything you read and press: text, navigation, buttons and labels |
| Body text size | 100% | 90 to 115%, in steps of 5 | |

The display faces Hooray ships with have no italic, so a word you make italic in a heading turns the accent colour instead (Toast's "Here's to *you*." is gold).

## Layout

| Setting | Default | Options |
| --- | --- | --- |
| Page width | Medium | **Narrow**, **Medium** or **Wide** |
| Page margin | 60px | 16 to 80px. The space at each side of the page on large screens. It's 40px at most on tablets and 16px on phones. |
| Space between sections | Default | **Compact**, **Default** or **Roomy**: the space above and below each section and colour block |

## Navigation

**Show back-to-top button** (on) appears after shoppers scroll down one screen. It steps aside while a form field or its label passes near it at the bottom of the screen, so it never covers what a shopper is filling in. **Position** is **Left** (the default, and every preset's) or **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 height | 44px | 24 to 80px. Shows when **Use a custom logo** is on. The logo keeps its shape, and the header shrinks it a little once it sticks. |
| Text logo size on phones | 19px | 16 to 26px. Long shop names look better smaller. They wrap to two lines rather than clip. |
| Favicon | | 32 x 32px recommended |

## Motion and effects

Balloons bob on hover and the hero garland sways twice. All motion stops for visitors who prefer reduced motion.

**Pop confetti when a party box or garland goes in the cart** (on): a short burst from the button. It also pops from a card's quick add button, and once when the cart's free shipping bar fills. Never for visitors who prefer reduced motion.

## Commerce

| Setting | Default | Notes |
| --- | --- | --- |
| Free shipping over | 0 (100 in the Hooray preset, 150 in Toast) | Your real free-shipping threshold, in your store's currency. Leave it at 0 unless you offer free shipping. At 0, the product page line ("Free shipping over $100.") and the cart's free shipping bar 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 | Square | **Square** or **Portrait (4:5)** |
| Image fit | Contain | **Contain** shows the whole packshot on a warm tile. **Cover** fills the tile. |
| Show occasion chips | On | Reads the `custom.occasions` metafield: up to two chips, then a count ("+2") |
| Show the note line | On | The first line of the `custom.card_note` metafield, or the vendor when a product has none. Hidden on phones. |
| 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 cart. Products with options, a required subscription plan, a gift card recipient, or the `product.garland` template open quick view. Sold-out products get **Email me when it's back**, which opens the product page. |
| 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. Products with one image don't change. |
| 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, and cards show no Compare. |

## Badges

A card shows one badge, at the top left of its picture. The first that applies wins: **Sold out**, **Sale**, **Pre-order** (with **Show "Pre-order" for oversold products** below), **Only 3 left**, then **New**.

| Setting | Default | What it does |
| --- | --- | --- |
| Sale badge | Percentage, such as "Sale −20%" | Or **The word "Sale"**. A product is on sale when its compare-at price is higher than its price. |
| Show "New" for | 30d | 0 to 90 days. Products published within this many days get a **New** badge. 0 turns the date rule off. A product tagged `new` gets the badge whatever this says. |
| Show "Only 3 left" at or under | 5 | 0 to 20. Products tracked at or under this stock get a low stock badge. It applies to variants that stop selling at zero, not those set to continue selling. 0 turns it off. |
| Show "Pre-order" for oversold products | Off | Cards say **Pre-order** for tracked products that keep selling at zero stock or less ("Continue selling when out of stock"), the same rule as the product page's **Show oversold variants as pre-orders** (chapter 6). A card can't read the product page's setting, so turn both on together. |

## Event date and delivery

The cart's event date, pickup or delivery choice, and postcode check. Chapter 10 covers every setting in this group, how the zones are written, and how to set up Shopify's own local delivery and pickup to match.

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