Theme settings

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 Citrus (the default), Moss, Charge and Berry.

Palette	Page	Buttons and fills	Body text	Colour block	Second colour block	Dark band	Used by
Citrus	Warm white `#fffcf7`	Deep green `#0b3a2f`, white labels	`#22463c`	Tangerine `#ff8b25`	Mint `#cdeedf`	Deep green `#0b3a2f`	The Dose preset
Moss	Pale moss `#f3f6ee`	Forest `#2e5b37`	`#2d4233`	Sage `#c6d9aa`	Oat `#ecdcbd`	Forest `#1d3a25`	The Botanic preset
Charge	Charcoal `#16181b`	Electric blue `#4d8dff`, near-black labels	`#d5dae0`	Electric blue `#4d8dff`	Ice `#e3ebf7`	Near black `#0c0e10`	The Fuel preset. A dark shop: the text is light.
Berry	Light lilac `#f8f3fb`	Berry `#a3175c`	`#3d2948`	Berry pink `#f6b3cf`	Lilac `#d9ccf3`	Plum `#3b1342`	No preset

Each palette also carries six goal colours, used by position in Goal names (Theme settings › Goals): in Citrus, goal 1 is lilac, 2 apricot, 3 sky, 4 lemon, 5 mint and 6 pink, and the other palettes have their own six (deep versions in Charge). They're the ground behind product photos, the goal tiles, goal tags and the ingredient tiles, each with a darker mark of the same colour for its icon and dot. They have no settings of their own; a goal tile can take its own colour (chapter 9).

The supplement facts label stays light in every palette, white with dark text, like a printed label, even on Charge's charcoal page.

The colour blocks are grounds, never text: each carries its own dark text colour, and buttons on a block turn that colour with the block colour as their label. The dark band carries light text. Every text, control, dot and badge colour in the four palettes has been measured against every ground it sits on: 312 pairs, each at least 4.5:1 for text and 3:1 for controls, dots and focus rings.

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, meta
Panels and fields	Cards, drawers and fields	Product cards, drawers, dialogs, fields, chips and the stuck header
	Quiet grounds	The search field, quiet bands, the evidence row and image grounds without a goal colour
	Control borders and empty dots	Every field, select, stepper, checkbox and chip edge, and the empty dose dots. Keep it at 3:1 against the page.
Controls	Buttons and selected controls	Buttons, checked boxes, the selected chip and quick add
	Text on buttons	Labels on those fills
	Links and section markers	Links, section marker text and the subscription price line. Never use the colour block here: it is too light for text.
	Sale and errors	Sale prices, error messages and the low stock line
Colour blocks	Colour block	The signature colour: the hero stage, the newsletter block, New badges and the bag count. A background only, never text on the page.
	Second colour block	The supply calculator band, the "Save 15%" tag and the hero's tick boxes
	Dark band	The announcement bar, the fact row and the footer
	Buttons, links and dots on the dark band	The button, link, dot and focus ring colour on the dark band
Dose dots	Filled dose dots	Serving dots, the dot calendar, quiz progress, section markers and the current menu item. Keep it at 3:1 against the page.

The green of "In stock" and of the certification chips' icons comes from the palette and has no setting of its own.

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

Typography

Setting	Default	Range	Notes
Heading font	Fustat ExtraBold	Any Shopify font	Headlines, the text logo, the supplement facts title and the supply calculator result. Each preset sets its own.
Heading size	100%	80 to 130%, in steps of 2	Scales every headline
Heading letter spacing	Tight	Tight, Snug or Normal	Tight suits round fonts such as Fustat; normal suits narrow ones
Body font	Asap	Any Shopify font	Everything you read and press: text, navigation, buttons, labels, badges, prices and every number
Body text size	16px	14 to 18px	Scales body text, buttons and labels. 16px is the design size.

Dose 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. Every number, including the facts panel's amounts and daily values, prices and day counts, is set in the body font with figures of even width, so columns line up.

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 starts closer.

Show back-to-top button (on) appears after shoppers scroll down one screen. It steps aside while it would sit over a button, link, field, chip or table (a card's quick add, say), and comes back once the corner is clear. 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.
Show the dot after the shop name	On	A dose dot after the text logo. Hidden when you use a logo image.
Text logo size on phones	23px	16 to 26px. Long shop names look better smaller. They wrap to two lines rather than clip.
Favicon		32 x 32px recommended

Style

Setting	Default	What it does
Show the dot grid on colour blocks	On	A faint grid of dots in a corner of the hero stage and the newsletter block
Fill dots in	On	Dots fill in once as they come into view: the supply calendar, serving chips, section markers. Never for visitors who prefer reduced motion.

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

Commerce

Setting	Default	Notes
Free shipping over	0 (60 in the Dose preset, 80 in Botanic, 99 in Fuel)	Your real free-shipping threshold, in your store's currency. Leave it at 0 unless you offer free shipping. At 0 the cart's free shipping meter stays hidden (except for a bag of subscriptions, chapter 13). The meter and the product page line show only to customers shopping in your store's currency.
Show currency code	Off	Prints the currency code beside every price

The threshold also feeds "Free shipping over $60." under the add to bag button when you turn on the Buy buttons block's Show free shipping note (off in the shipped templates). It only changes what the theme says: your actual free shipping is a rate or a discount 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 rounded square on the product's goal colour (the first of its custom.goals that's in Goal names; a product without one sits on the quiet ground), with one badge at the top left, the serving chip at the bottom left and the quick add button at the bottom right. Under the picture: up to two goal tags, the name, a meta line, the price and the subscription price.

The meta line shows the first two key ingredients joined with "+" ("Magnesium glycinate + L-theanine", from custom.key_ingredients), or the product type without them, then the count in the container from the serving size and custom.servings ("· 60 gummies" for 30 servings of 2 gummies, or "· 30 servings" when the serving size has no number).

Setting	Default	What it does
Image shape	Square	Square or Portrait (4:5)
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 square plus button. Products without options go straight to the bag, and the plus turns into a check. Products with options, a required subscription plan or a gift card recipient open quick view. Sold-out products have no quick add.
Quick add the subscription	Off	Shows while Show quick add button is on. Quick add picks the delivery plan that matches the supply (chapter 10), when the product has one. Off adds a one-time purchase.
Show the serving chip	On	Dots and "2 a day · 30 days" on the image, from the product's serving size and servings (chapter 10). Phones show "2 a day".
Show the subscription price	On	"$28.90 on subscription" under the price: the lowest delivery plan price, when the product has plans
Goal tags per card	2	0 to 3. From the `custom.goals` metafield, each with its goal colour's dot. Set 0 to hide them.
Show swatches	On	Shows the values of the first option that has swatches, such as a flavour with colours set in Shopify admin
Swatches before "+" count	4	2 to 8. Shows while Show swatches is on.
Colour and flavour option names	Color, Colour, Flavour, Flavor	Filter groups for these options are drawn as dots in the collection filters (chapter 14). Separate several with commas.
Show the second image on hover	On	On devices with a mouse, crossfades to the product's second image, such as a pile of gummies, while the card is hovered or focused
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 badge, at the top left of its picture. The first that applies wins: Sold out, Pre-order (when Show "Pre-order" on product cards is on), Sale, New, then a custom tag. Badges never show in the cart or in search suggestions. Low stock isn't a badge in Dose: it's a line under the price, "Only 4 left", with a small dot.

Setting	Default	What it does
Sale badge	Percentage, such as "−17%"	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. Set 0 to turn the date rule off. A product tagged `new` gets the badge whatever this says.
Show "Only 4 left" at or under	5	0 to 20. Products tracked at or under this stock show a low stock line on cards and on the product page. It applies to variants that stop selling at zero, not those set to continue selling. Set 0 to turn it off.
Show "Pre-order" on product cards	Off	A Pre-order badge on cards, by the product page's pre-order rules (chapter 6): tracked variants that keep selling at zero stock, and products sold only with single-delivery purchase options. Cards can't read the Product section's opt-ins, so turn this on when you turn those on, and both say Pre-order.

Custom badges: give a product a tag that starts with badge: and the card shows the rest as its badge: the product tag badge:Best seller prints "Best seller". Keep it to a word or two.

Goals

Goals come from each product's custom.goals metafield (chapter 7). Filtering by them needs the Search & Discovery app (chapter 14).

Setting	Default	What it does
Goal names	Sleep, Energy, Focus, Immunity, Gut, Skin	Up to six, separated by commas, in the goal finder's order. Each takes the palette's goal colour at its position: the first is goal colour 1, and so on. They give product cards their colour and goal tags their dot, and they're the goal chips above collections and in Featured collection, and the goal tiles in the menus.
Menu item with goal tiles	Goals	The title of the top-level link in your header menu whose child links show as goal tiles in the mega menu and the mobile menu (chapter 3)

Spell each goal the same way everywhere: in Goal names, on the goal tiles, in the menu and in custom.goals (chapter 7).

Subscriptions

The supply calculator works out how long a bottle lasts from custom.servings and the shopper's daily dose, then picks the delivery plan to match. Chapter 10 covers it in full.

Setting	Default	What it does
Plan lengths in days	30, 60, 90	Used when a plan's name has no number of days, weeks or months in it, such as "Monthly". One per plan, in order, separated by commas.
Supply tolerance	2d	0 to 7 days. A plan up to this many days longer than the supply still counts as a match.
Subscriptions ship free	On	When everything in the bag is a subscription, the cart's free shipping meter fills and says "Subscriptions ship free"; with a one-time item in the bag it counts towards Free shipping over as usual. The Subscribe and save option says "Free shipping." Set up the matching shipping rate in Settings › Shipping and delivery.
Container word	bottle	Words the result: "This bottle lasts 30 days". You can list more than one, separated by commas: the first is the default, and another word wins on products it suits (chapter 10). The presets use "bottle, tub, box", "bottle, pouch, jar" and "tub, box, bottle".

Label line ("Always read the label and follow the directions for use.") is shown in the footer's bottom bar. Change it to the wording you want, or clear it.

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.