Theme settings — Rep docs

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.

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.

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.