# Theme settings

Chapter 2 of the Rep 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

**Colour palette** sets every storefront colour at once. It offers **Volt** (the default), **Clay**, **Track** and **Graphite**.

| Palette | Page | Buttons | Body text | Colour block | Second colour block | Dark band | Used by |
| --- | --- | --- | --- | --- | --- | --- | --- |
| Volt | White `#ffffff`, studio grey `#eff0ec` behind product photos | Black `#0c0d0f` with volt labels | `#26282b` | Volt `#dcf74a` | Ice `#d4e5f2` | Black `#0c0d0f` | The Rep preset |
| Clay | Warm stone `#f4efe8` | Terracotta `#a3472a` with light labels | `#3b312b` | Blush `#e9c4af` | Sage `#c9d2be` | Cocoa `#3a2a22` | The Flow preset |
| Track | Blue-navy `#101e3b` | Signal orange `#ff6b2c` with navy labels | `#d4dcec` | Signal orange `#ff6b2c` | Ice `#dbe5f6` | Deep navy `#0a1428` | The Pace preset. A dark shop: the text is light. |
| Graphite | Graphite `#1a1c1f` | Aqua `#45e0cc` with dark labels | `#d8dce0` | Aqua `#45e0cc` | Chalk `#e6e9ec` | Near black `#0f1113` | No preset. A dark shop: the text is light. |

The colour blocks are grounds, never text: volt-lime text on a white page would be unreadable, so Rep never sets it. Each block carries one text colour of its own, and buttons on a block turn that text colour with the block colour as their label, so text and buttons on a block always read. On Track, orange is a fill with navy labels; orange text on navy uses a lighter orange (`#ffa06e`) that has been measured for it. Every text, control and focus colour in the four palettes has been measured for contrast against every ground it sits on (WCAG AA: 4.5:1 for text, 3:1 for controls).

The settings under the palette override one colour at a time. Leave them blank ("From palette") to follow the palette. Changing a colour block or the dark band keeps the palette's text colour for it, 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, prices and focus rings | Headlines, product names, prices, and the ring that shows keyboard focus |
| | Secondary text | Intros, helper text and meta lines |
| | Faint text | The quietest text: compare-at prices, placeholders |
| Panels and fields | Cards, drawers and fields | Drawers, dialogs, fields, label pills and the stuck header |
| | Image grounds and quiet bands | The studio grey behind product images, quote cards and the support band |
| | Control borders | Every field, select, stepper, checkbox and size pill edge. Keep it at 3:1 against the page. |
| Controls | Buttons and selected controls | Buttons, checked boxes and the selected size. Links take it too. |
| | Text on buttons | Labels on those fills |
| | Sale and errors | Sale prices, error messages, low stock and "Not in this colour" |
| Colour blocks | Colour block | The signature colour block: the hero, the newsletter, eyebrow pills, New badges and the bag count. It is never used for text on the page. |
| | Second colour block | The second block: the split hero image ground and image with text |
| | Dark band | The announcement bar, the fit finder promo and the footer |
| | Buttons and links on the dark band | The button, link underline and focus ring colour on the dark band |

The green of the "In stock" line and the set saving, and the lane colour, come from the palette and have no setting of their own.

Sections choose their ground with a **Background** setting (chapter 4): **Page**, **Studio grey**, **Colour block**, **Second colour block** or **Dark band**.

## Typography

| Setting | Default | Range | Notes |
| --- | --- | --- | --- |
| Heading font | Krona One | Any Shopify font | Headlines, the text logo, product page prices and set totals. Each preset sets its own. |
| Heading size | 100% | 80 to 130%, in steps of 2 | Scales every headline. Wide fonts look best smaller: the presets use 100% for Krona One, 116% for Epilogue and 110% for Prompt. |
| Body font | Inter | Any Shopify font | Everything you read and press: text, navigation, buttons, labels, badges and card prices |
| Body text size | 16px | 14 to 18px | Scales body text, buttons and labels. 16px is the design size. |

Rep sets everything in sentence case and never in capitals, so your words appear as you type them. The heading font is used at the one weight and style you pick in the font picker (Pace's Prompt is bold italic). The body font loads its regular and semibold weights.

## Layout

| Setting | Default | Range | Notes |
| --- | --- | --- | --- |
| Page width | 1440px | 1200 to 1600px, in steps of 20 | The widest the content gets on large screens |
| Page margin | 40px | 16 to 64px, in steps of 2 | The space at each side of the page on large screens. It is 24px on tablets and 16px on phones. |
| Space between sections | Default | **Compact**, **Default** or **Roomy** | The space above and below each section. A section on the same background as the one above drops its top space, so two Page sections in a row sit as one. A section right after a colour block or the dark band starts close under it. |

## Navigation

**Show back-to-top button** (on) appears after shoppers scroll down one screen. **Position** is **Left** or **Right** (the default). It's mirrored for right-to-left languages, so pick the side opposite your chat button. The setting shows while the button is on.

## 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 | 140px | 80 to 320px, in steps of 10. Shows when **Use a custom logo** is on. The logo keeps its shape and is never taller than 40px (34px on phones). |
| Text logo size on phones | 17px | 13 to 22px. Long shop names look better smaller. They wrap to two lines rather than clip. |
| Favicon | | 32 x 32px recommended |

On a computer the text logo is 22px. A long shop name takes two lines only past about 260px wide; the menu folds links into **More** before it wraps (chapter 3).

## Style

Every colour block has one curved corner, the bend of a running track, and two thin lanes run along its floor and round the bend.

| Setting | Default | What it does |
| --- | --- | --- |
| Show lanes | On | Off keeps the curved corner and hides the lane lines, everywhere |
| Draw lanes in | On | The lanes draw in once, left to right, as a block comes into view. Shows while **Show lanes** is on. Never for visitors who prefer reduced motion, and never in the theme editor, where the lanes are simply shown. |

Nothing else moves on scroll. Images lift a little on hover, the quick add tray slides up, and drawers slide in; nothing loops, and all motion stops for visitors who prefer reduced motion.

## Commerce

| Setting | Default | Notes |
| --- | --- | --- |
| Free shipping over | 0 (100 in the Rep and Pace presets, 120 in Flow) | Your store's real free-shipping threshold, in its currency. Leave it at 0 unless you offer free shipping. At 0, the trust row's "Free shipping over $100" line, the buy buttons' free shipping line and the cart's free shipping meter 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. Each card is your product photo standing on the studio grey in a 4:5 box, with its status badge at the top left and the support pill at the bottom left, then the name, a meta line with the shown colour and the colour dots, and the price with the activity icons beside it.

| Setting | Default | What it does |
| --- | --- | --- |
| Image shape | Portrait (4:5) | Or **Square**. Product photos are contained, so cut-outs and ghost-mannequin shots stand whole on the grey. |
| 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 | On a computer, hovering or focusing the card slides up a tray: a product with a size option, and no option besides colour and size, shows its sizes as pills, and one click adds that size in the card's shown colour. A single-variant product shows **Add to bag**; any other product, such as leggings sold in two inseams, or one that needs a subscription plan or a gift card recipient, shows **Choose options**, which opens quick view. On phones and tablets, a round **+** opens quick view. Sold-out products have no quick add. See the note below. |
| Show swatches | On | Shows the colour option (the one named in **Colour option names**, Theme settings › Sets, else the first option whose values have swatches) as small dots, when it has more than one colour. Choosing a dot shows that colour's image and makes quick add use that colour; pointing at a dot with a mouse previews its image. |
| Swatches before "+" count | 4 | 2 to 8. Shows while **Show swatches** is on. |
| Show the back on hover | On | Crossfades to the second image, such as the back of a garment, while a mouse is over the card. Products with one image don't change. |
| Show activity icons | On | Up to three small activity icons beside the price, from the `custom.activities` metafield (chapter 8). |
| Activity icons per card | 3 | 1 to 3. Shows while **Show activity icons** is on. |
| Show the support level | On | From the `custom.support_level` metafield: **Low**, **Medium** or **High support** with a three-bar meter, at the bottom left of the photo (chapter 8). |
| Show compare checkbox | Off | Shoppers tick up to 3 products and see them side by side on the comparison page. 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. |

The quick add tray reads your options by name: the colour is the option named in **Colour option names** (Theme settings › Sets) and the sizes are the option named in **Size option names** (Theme settings › Fit finder). When a shopper has saved a size in the fit finder, the tray rings that size with a small **You** tab.

> **Note:** Quick add's size pills only appear when colour and size are the whole choice. A product with a third option, such as leggings sold in two inseams, shows **Choose options** instead, so the shopper picks the inseam in quick view.

## Badges

A card shows one badge, a small pill at the top left of its picture, and the product page shows it on the main image. The first that applies wins: **Sold out**, **Pre-order** (product page only), **Sale**, **Only 3 left**, **New**, then a custom badge. Badges never show in the cart or in search suggestions.

| Setting | Default | What it does |
| --- | --- | --- |
| Sale badge | Percentage, such as "−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 in the colour block. Set 0 to turn it 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. Set 0 to turn it off. |

**Custom badges**: give a product a tag that starts with `badge:` and the card shows the rest as its badge: the product tag `badge:Back in stock` prints "Back in stock". Keep it to a word or two.

## Activity

**Activity list** ("Train, Run, Yoga, Pilates, Lounge"): comma-separated activity names, shown as pills above the products on collection and search pages and at the top of the phone menu. Each pill links to that activity's filter. Clear it to hide them. Chapter 8 covers how the pills, tiles and card icons read each product's `custom.activities` metafield.

## Fabric and fit

The words and rules of the **Fabric and fit** card and the inseam: **Compression words**, **Suggest sizing up from compression**, **Size-up line**, **Inseam option names** and **Inseam labels**. Chapter 9 covers every setting in this group.

## Sets

**Colour option names** (shared with the swatches and quick add) and **Set discount**. Chapter 10 covers both, including the automatic discount you must create for a set saving to apply.

## Fit finder

**Turn on the fit finder**, the **Size chart**, **Size option names**, **Default units**, **Weight share**, **Preselect the shopper's size** and the **Privacy line**. Chapter 11 covers every setting in this group. **Size option names** is also how the quick add tray, the facets and Complete the set find your sizes.

## 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, which the presets don't include: add it to the footer to show them.