Theme settings

Theme settings apply to the whole store. In the theme editor, select the Theme settings icon (the gear) in the left sidebar. The categories below are in the same order as there.

Balm 1.0.0 4 min read

#Logo

Setting	What it does
Logo	Your logo image. Shows the store name when no logo is set. Any aspect ratio works; a .png or .svg with a transparent background looks best.
Desktop logo width	60 to 300px. Default 140px.
Mobile logo width	40 to 200px. Default 100px.

The password page uses the same logo.

#Colors

Balm comes with eight color schemes. Every section has a Color scheme setting that picks one of them, so changing a scheme here changes every section that uses it.

Scheme	Used for, by default
Scheme 1	Warm milk background: most sections and the header
Scheme 2	Paper, a lighter raised surface: cart drawer, testimonials, panels
Scheme 3	Evening, a dark dusk background: footer, newsletter, the header in PM
Scheme 4	Ink, the darkest background: announcement bar
Scheme 5	Cleanse step color
Scheme 6	Treat step color
Scheme 7	Moisturize step color
Scheme 8	Protect step color

Each scheme has these colors. Every background has a matching text color, so keep each pair readable (a contrast ratio of at least 4.5:1 for text).

Color	Used for
Background	The section background
Text	Headings and body text
Secondary text	Captions, notes and other quieter text
Border	Lines, input borders and dividers
Accent	Links, active states and highlights
Sale price	Sale prices and sale badges
Button background	Primary buttons
Button label	Text on primary buttons

The four step colors are picked in Ritual, not here: change which scheme each step uses there, or edit Schemes 5 to 8 to change the step colors themselves.

#Typography

Balm uses three fonts, all from Shopify's font library. Bold, italic and bold italic styles load automatically.

Setting	What it does
Heading	Headings and the product name. Default Fraunces.
Body	Body text, buttons and forms. Default Instrument Sans.
Label	Step numbers, sizes and captions. Default IBM Plex Mono. Pick the body font for a softer look.
Heading size	90 to 120%. Scales every heading.
Body text size	90 to 110%. Scales body text.

#Layout

Setting	Options
Page width	Narrow, Standard (default, 1440px) or Full width

#Ritual

The settings that tie your catalog to the ritual. The data for each product (step, time of day and so on) comes from the products themselves, see Ritual data.

Steps

Setting	What it does
Cleanse collection, Treat collection, Moisturize collection, Protect collection	The collection for each step. Used for step links, breadcrumbs, and to fill a step that has no product picked. See Getting started.
Cleanse color scheme, Treat color scheme, Moisturize color scheme, Protect color scheme	The color scheme for each step: product card backgrounds, step tags, rails and the Key ingredients section on that step's product pages. Defaults are Schemes 5 to 8.

Time of day

Setting	What it does
Starting time of day	AM (default), PM or Visitor's local time. Visitor's local time shows PM from 5 PM to 4 AM on the visitor's device. Visitors can always switch, and the theme remembers their choice on their device.

#Buttons

Setting	What it does
Corner radius	0 to 12px. Default 6px. 0 gives square corners.

#Product cards

These apply to product cards everywhere: collections, search, featured collections, recommendations and the ritual menu.

Setting	Default	What it does
Show step color	On	Tints the card background with the product's step color. Off uses the plain paper background.
Image ratio	Portrait	Portrait, Square or Adapt to image
Show second image on hover	On	Shows the product's second image when a visitor hovers on desktop
Show description	On	Shows the first sentence of the product description
Show texture and skin type	On	Shows texture and skin type as chips
Show quick add button	On	Adds products with one variant straight to the bag. Products with options link to the product page.

#Cart

Setting	Default	What it does
Cart type	Drawer	Drawer opens the cart over the page. Page goes to the cart page.
Show ritual coverage	On	Shows a four-step rail of which steps the cart covers, for the current time of day
Show missing step suggestion	On	Suggests a product from the collection of the first missing step
Show cart note	On	Lets customers add a note to their order

The cart drawer and cart page show discounts, selling plans (subscriptions) and unit prices automatically, and accelerated checkout buttons such as Shop Pay and Apple Pay whenever they're turned on in Settings > Payments.

#Search

Setting	Default	What it does
Enable predictive search	On	Shows products, collections, pages and articles as visitors type in the search dialog

#Animations

Setting	Default	What it does
Enable animations	On	Reveals, the AM/PM sweep, counting figures and the dose icons. Always follows the reduced motion setting on the visitor's device.

Social media accounts: enter the full link to each profile, for example https://www.instagram.com/yourbrand. Facebook, Instagram, Pinterest, TikTok, X (Twitter), YouTube, Vimeo, Snapchat, Tumblr and Threads are available. Icons show in the footer for every account you fill in, when FooterShow social media icons is on.

#Favicon

Setting	What it does
Favicon	The small icon in the browser tab. 32 x 32px .png recommended.

These pages describe Balm 1.0.0 and are updated with every release. See the release notes for what changed.