Theme settings — Scruff 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 Tomato (the default), Peanut, Mint and Liquorice.

Palette	Page	Buttons and fills	Body text	Colour block A	Colour block B	Deep band	Used by
Tomato	Cream `#fbf4e9`	Tomato `#c4361c`, cream labels	`#3b2a24`	Butter `#f6d37a`	Peach `#f5c4ad`	Spruce `#1d4034`	The Scruff preset
Peanut	Warm tan `#f1e1c9`	Chocolate `#5b321e`	`#3d2a1e`	Caramel `#d9a35e`	Strawberry `#ebb8b2`	Dark chocolate `#3a2116`	The Barkery preset
Mint	Pale mint `#e9f4ed`	Deep teal `#0e5c58`	`#1d3935`	Coral `#f3b7a0`	Lilac `#cbc2ee`	Deep green `#12332f`	The Whisker preset
Liquorice	Charcoal `#1f1c1a`	Mustard `#e4b43e`, dark labels	`#e8e0d5`	Coral `#f08d72`	Sage `#a9c4a2`	Near black `#151311`	No preset. A dark shop: the text is light.

Each colour block carries one text colour of its own (dark on every block in all four palettes), 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. The deep band carries light text. Every text, control and badge colour in the four palettes has been measured for contrast against every ground it sits on.

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 deep 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 and prices	Headlines, product names and prices
	Secondary text	Intros, helper text and meta lines
	Faint text	The quietest text: compare-at prices, placeholders
Panels and fields	Cards, drawers and fields	Product card info, drawers, dialogs, fields and the stuck header
	Quiet bands and image grounds	Quiet bands, the ground behind product images, and the search field
	Control borders	Every field, select, stepper, checkbox and size tile edge. Keep it at 3:1 against the page.
Controls	Accent	Primary buttons, selected chips and sizes, the quick add button and the bag count
	Text on accent fills	Labels on those fills
	Sale and errors	Sale prices, error messages and "Too small"
Colour blocks	Colour block A	The first colour block, such as butter. Text on it uses one dark colour from the palette.
	Colour block B	The second colour block, such as peach
	Deep band	The announcement bar, the "Never run out" band and the footer

The fit green of the Fits Mabel bone and the "In stock" line come from the palette and have no setting of their own.

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

Typography

Setting	Default	Range	Notes
Heading font	Funnel Display	Any Shopify font	Headlines, the text logo, prices and size letters. Each preset sets its own.
Heading size	100%	85 to 120%, in steps of 5	Scales every headline
Body font	Funnel Sans	Any Shopify font	Everything you read and press: text, navigation, buttons, labels and badges
Body text size	16px	14 to 18px	Scales body text, buttons and labels. 16px is the design size.

Scruff 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 you pick in the font picker; Funnel Display's heavy 800 is the design.

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.

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	160px	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 44px.
Text logo size on phones	21px	16 to 26px. Long shop names look better smaller. They wrap to two lines rather than clip.
Favicon		32 x 32px recommended

Motion

Images lift a little on hover and drawers slide. Nothing loops, and all motion stops for visitors who prefer reduced motion.

Swing badges on hover (on): the round tag on a product card swings once, like a tag on a collar, when the card is hovered or focused.

Commerce

Setting	Default	Notes
Free shipping over	0 (79 in the Scruff preset, 69 in Whisker)	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 $79.") 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 in a squircle on a colour, with its round tag at the top left, the fit bone at the bottom left and the quick add button at the bottom right, then a meta line, the name, the price and the colour swatches.

Setting	Default	What it does
Image background	Rotate block A, block B and surface	Rotate block A, block B and surface puts the two colour blocks and the surface behind product photos in turn, card by card. Surface or None uses one. A card on a section of the same colour takes the panel colour instead, so it never disappears.
Image shape	Square	Square or Portrait (4:5)
Image fit	Contain	Contain shows the whole product on its colour: best for packshots on a plain or transparent background. Cover fills the tile.
Show the meta line	On	One small line above the name: the product's `custom.card_meta` metafield (chapter 7), or its product type and the number of sizes ("Collar · 5 sizes")
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	A round plus button. Products without options go straight to the cart, and the plus turns into a check. Products with options, a required subscription plan or a gift card recipient open quick view. Products you engrave or embroider open their product page, so the shopper personalises them there (chapter 10). Sold-out products have no quick add.
Show swatches	On	Shows the values of the first option that has swatches, such as Color. Hidden on phones.
Swatches before "+" count	4	2 to 8. Shows while Show swatches is on.
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 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.

Badges

A card shows one round tag, at the top left of its picture, and the product page shows a larger one on the main image. The first that applies wins: Sold out, Sale, Only 3 left, New, then a custom tag. Tags 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 tag. Set 0 to turn the date rule off. A product tagged `new` gets the tag 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 tag. It applies to variants that stop selling at zero, not those set to continue selling. Set 0 to turn it off.

Custom tags: give a product a tag that starts with badge: and the card shows the rest as its round tag: the product tag badge:Gift idea prints "Gift idea". Keep it to a word or two; the round tag is small.

Pet profile

Shoppers add their dog or cat once; cards say "Fits Mabel" and collections can show only what fits. Turn on the pet profile, the sample pet, the Size option names, the Weight range per size, and the switches for fit badges, the species filter and the birthday banner are all in this group. Chapter 8 covers every setting in it.

Sizing

The size guide and the size tiles on product pages: Default size table, Measurement unit, Size tile detail, Breeds and How to measure. Chapter 9 covers every setting in this group.

Personalisation

Engraved tags and embroidered collars: Personalisation fee product, Only on tagged products and Product tag. Chapter 10 covers every setting in this group.

Feeding and autoship

The feeding calculator's activity levels and rounding, and how it matches your delivery plans: Low activity, High activity, Round the daily amount to, Weeks per delivery plan and Preselect the closest plan. Chapter 11 covers every setting in this group.

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.