Theme settings

Colors

Balm organizes its colors in color schemes. A scheme is a set of seven colors designed to work together, and every section, popup and drawer picks one scheme with its own Color scheme setting. Edit a scheme here and every place that uses it follows.

The Balm preset ships two schemes. Scheme 1 is the main one, white; Scheme 2 is its contrasting partner, near black. Add as many schemes as you need with Add scheme.

• Background: the section background. Background gradient is optional and replaces it where set.
• Text: body text, headings and icons.
• Button / accent and Button label: the fill and the text of primary buttons.
• Secondary background: the second surface of the scheme, used by cards, drawers, panels, inputs and secondary buttons. Balm derives a raised tone and a hairline from it, so dark schemes keep visible layers.
• Accent (links / highlights): links and highlighted details.

Keep the text and button colors readable on their background: aim for a contrast ratio of at least 4.5:1 for body text. Glass surfaces measure their own contrast and switch the label to black or white when needed, but plain surfaces use exactly the colors you set.

Typography

Two fonts drive the whole theme: the Heading font for headings and titles, and the Body font for paragraphs, forms and everything else. Both come from the Shopify font library, so they are served by Shopify and free to use on your store.

Three shared recipes follow. Headings sets the case, the slant and the weight of every display heading. Button labels sets the case, weight, letter spacing and slant of every button. Labels and small text sets the case of eyebrows, badges, prices, filters, variant pills, the announcement bar, the footer links and the main menu. Because the recipes are global, a section title, a product card and a page title always speak with the same voice.

Not every family offers every weight or an italic. When a family lacks the face you ask for, the browser uses the closest one it has, or slants an upright face. The help text of Heading style lists the weights available in italic for the default font.

Corner style

Four sliders set the maximum corner radius of the whole theme: Buttons and pills, Cards and panels, Form fields and Images and media. Each value is a ceiling: elements designed with smaller corners keep them, and 0 gives square corners everywhere. Section settings that carry their own radius, such as the floating header or the cart drawer, are capped by these values too.

The Balm preset sets buttons and form fields to 12 px, cards and media to 20 px.

Product badges

Four badges can sit on the product cards: Sale and Sold out follow the prices and the stock, New follows the product creation date, and Custom prints the value of a product metafield. This group sets their position, shape and colors once for the whole store.

The Custom badge needs one more step: name the metafield in the Custom badge metafield setting of each section that shows product cards (Collection, Search, Featured collection, Product recommendations, Recently viewed, Lookbook) and of the product page Badge block. The same badges appear on the product page when you add a Badge block and set Badge type to Automatic (Sale, Sold out, New, Custom). See Product badges for the full walkthrough.

Pre-order

A variant that keeps selling once its stock reaches 0 is treated as a pre-order. The add to cart button, the sticky add to cart bar and the quick add button then read Pre-order, or the label you type here. See Pre-order.

Quick view

Quick view opens a product in a modal from its card, so shoppers can pick a variant and add to cart without leaving the page. This group sets what the modal shows and how it looks. You turn it on per section, with the Quick view setting of the Collection, Featured collection, Search, Recently viewed and Lookbook sections. See Quick view.

Gift wrapping

Adds a gift wrapping checkbox, and an optional gift message, to the cart drawer and the cart page. The wrapping is a real product you create in your admin, so its price, taxes and stock work like any other product. See Gift wrapping for the setup.

Back to top

A round button in a bottom corner that scrolls back to the top of the page. It appears after the visitor has scrolled the distance set in Show after scrolling, can be turned on for desktop and mobile separately, lifts above the sticky add to cart bar and steps aside from the hero video controls. Visitors who ask their device for reduced motion get an instant jump instead of a smooth scroll.

Age verifier

A modal that asks visitors to confirm their age before they browse the store, for brands that sell alcohol, tobacco or other age restricted products. The answer is remembered in the visitor's browser for the number of days you choose. See Age verifier.

Glass effect

One frosted glass recipe shared by every glass surface of the theme: the glass header and mega menu, the announcement bar in Glass style, glass buttons, the popups and the cart drawer when they use a glass card. Set the Tint, Fill opacity, Blur and Border opacity once and every surface moves together.

Glass on phones decides what happens on screens under 768 px wide: Frosted keeps the blur, Near opaque swaps it for an almost solid fill that is lighter to scroll on older phones. Browsers without backdrop blur and visitors who ask for reduced transparency always get the near opaque fill.

Loader

Two things live here. The first is the small loading indicator used across the store while something loads, such as the hero video: pick its Style, size and color. The second, under Page loader, is an optional loading screen shown while pages open, with your logo, a progress bar or a spinner, and an exit animation. See Page loader.

Favicon

The small icon shown in browser tabs and bookmarks. Upload a square image of at least 32 by 32 pixels; a PNG with a transparent background works best.

Social sharing

Controls how your pages look when someone shares a link on social media or in a messaging app. Product, collection and blog post pages use their own featured image. The Fallback share image covers every other page, and the X (Twitter) account is shown as the source of shared cards.

Breadcrumbs

A trail of links back to the home page, shown on product, collection and blog post pages. Position, separator and alignment are set here for the whole store. The Product, Collection and Article sections each have a Breadcrumbs on this page setting that shows or hides the trail on that page type only.

Search

Search scope decides what the storefront searches, both in the header suggestions and on the results page. Products only keeps the results page to product cards, which is also what the search filters need. Products, articles and pages adds your blog posts and pages to the results.

Search engines

Shopify already tells search engines to treat a filtered or sorted collection URL as the plain collection URL. Internal search results pages are not covered by default, and they rarely deserve a place in Google. This setting adds a noindex instruction to them, and optionally to filtered collections too.