Features

Quick view

Quick view opens a product in a modal from its card, so shoppers choose a variant and add to cart without leaving the page. The modal shows the gallery with thumbnails, the price with its badges and unit price, the rating, the same variant picker as the product page (swatches included), quantity rules, purchase options, the add to cart button, pickup availability, a short description and a link to the full product page. Adding to cart opens the cart drawer.

Turn it on

1. Open a section that shows product cards: Collection, Featured collection, Search, Recently viewed or Lookbook.
2. Set Quick view to Button on hover or Icon. On touch screens the button is always visible.
3. In Theme settings, Quick view, choose what the modal shows and its card style: Solid, Tinted glass or Glass.

Short description metafield takes the namespace and key of a product metafield, for example custom.short_description; products without it show the first paragraph of their description, cut to Description length. Preload on hover loads the product when the pointer rests on its card so the modal opens at once, at the cost of more data. Without JavaScript the button simply opens the product page.

Quick view is separate from Quick add, the setting that puts an add to cart button on the card itself: Off, Single-variant products, or All products (which opens an option picker for products with variants).

Product badges

Four badges can appear on product cards and, through the Badge block, on the product page. Their position, shape and colors are set once in Theme settings, Product badges.

Set up the Custom badge

1. In your admin, go to Settings, Custom data, Products and add a definition named Badge label, key custom.badge_label, type Single line text.
2. Fill it on the products that need a badge, for example Limited edition or Vegan.
3. In the theme editor, type custom.badge_label in Custom badge metafield on each section that shows product cards: Collection, Search, Featured collection, Product recommendations, Recently viewed and Lookbook.
4. On the product page, add a Badge block, set Badge type to Automatic (Sale, Sold out, New, Custom) and type the same key in its Custom badge metafield.

Page loader

An optional loading screen shown while pages open, with your logo, a progress bar or a spinner, and an exit animation. Turn it on in Theme settings, Loader, under Page loader:

• First visit only (recommended) shows it once per visit.
• Every page shows it on each page view. It can lower speed scores, because the page stays covered while it loads.

Layout combines the logo with a progress bar or a spinner, or shows the bar alone. The logo is the Logo image you pick here, or else the header logo, then the brand logo from your Shopify settings, then the store name. Background is Solid or Glass, on the Color scheme you choose. The Exit animation (Fade, Slide up, Split, Zoom, Circle reveal) plays when the page is ready, never before the Minimum display time and never after the Maximum display time. Page transitions plays the exit in reverse when a visitor follows a link to another page of the store.

To adjust the look, check Preview in the theme editor. To test First visit only on the live store, open a private window, or add ?preview_loader=1 to a page address while the preview is on. Visitors who ask for reduced motion see no animation, and without JavaScript the loader never shows.

Age verifier

A modal that asks visitors to confirm their age before they browse the store. It shows on every page of the online store, never at checkout, and waits for the page loader to leave first.

1. In Theme settings, Age verifier, check Enable the age verifier.
2. Set the Minimum age. Write [age] in the texts to print it. Fields left empty use the translated storefront text.
3. Choose what happens when the visitor declines: Show a message or Redirect to a link.
4. Set Remember the answer for: the number of days before the same browser is asked again. 0 asks on every visit.
5. Style it with a background image, a color scheme and a card style. Check Preview in the theme editor to see it while you edit; answers are not remembered while previewing.

Raising the minimum age asks every visitor again. A decline is never remembered. The age verifier is a self-declaration, not an identity check: make sure it meets the rules that apply to your products in the countries you sell to.

Gift wrapping

Adds a gift wrapping checkbox, and an optional gift message, to the cart drawer and the cart page. Checking the box adds your wrapping product to the cart in quantity 1 and records the cart attribute Gift wrapping: Yes. The message is saved as the cart attribute Gift message. Both appear on the order in your admin.

1. Create a product for the wrapping, for example Gift wrapping, with the price the buyer pays and an image. Make it available on the Online Store sales channel, and keep it out of your collections.
2. In Theme settings, Gift wrapping, check Offer gift wrapping and pick it as the Wrapping product. The option only shows once an available product is chosen.
3. Adjust the Checkbox label, the help text, the gift message and its maximum length, and where it shows: cart drawer, cart page or both.

The wrapping line stays at quantity 1, and a cart that holds only the wrapping is emptied, so nobody checks out with the wrapping alone.

Lookbook

The Lookbook section turns a photo into a shop: each point on the image opens the product card, with its quick add. On a phone a tap opens the same content as a sheet from the bottom of the screen.

1. Add a Lookbook section and choose an image, plus an optional mobile image.
2. Add one Hotspot block per product and pick the product. A hotspot can carry a text and a link instead.
3. Place each hotspot with Horizontal position and Vertical position, in percent of the image: 0% is the left or top edge, 100% the right or bottom edge. Desktop and mobile positions are separate.
4. For a shoppable list, set Layout to Image with product list: the products line up beside the image, and hovering a card lights its hotspot.

Compare products

The Compare products section sets up to five products side by side. Built in rows show the image, price, availability, vendor and rating. Your own rows read product metafields.

1. Create one product metafield definition per fact you want to compare, in Settings, Custom data, Products. For example specs.caffeine (Integer), specs.serving (Single line text), specs.vegan (True or false).
2. Fill the values on each product.
3. Add the section, pick the products, then add one Row block per fact: a Label, the Product metafield key, and a Value type: Text, Number with unit (with its Unit, such as mg) or Yes or no.

Empty values show as n/a. Highlight differences marks the rows where products differ. On a phone the label column stays in place while the product columns scroll.

Recently viewed

The product page records each product a visitor opens, in that visitor's own browser. The Recently viewed section reads that list and shows the products, newest first. Nothing is sent to a server and no app or account is needed. The section takes no space until the visitor has a history; in the theme editor it shows example cards instead.

Add it to the product template, below Product recommendations, with Exclude the current product on, or to the cart, collection or home page. Maximum products caps the list.

Pagination

The Collection and Search sections have a Pagination setting with three modes:

• Page numbers: classic numbered pages.
• Load more button: the next page is added under the grid when the shopper asks for it.
• Infinite scroll: the next page is added as the shopper reaches the end of the grid. After three pages a Load more button takes over, so the footer stays reachable.

Load more and infinite scroll show a Showing X of Y counter. The number of products per page is set with Products per page on collections and Results per page on search. The blog, the list of collections and blog post comments use page numbers, with their own per page setting. Promo tiles appear on the first page only.

Translations

Balm ships in five languages: English, French, German, Italian and Spanish. That covers every storefront text of the theme (buttons, cart, forms, filters, accessibility labels) and the theme editor itself, which follows the language of your admin.

1. Add and publish your languages in Settings, Languages. The theme's own texts switch automatically.
2. Translate the content you typed in the editor (headings, paragraphs, button labels) with Shopify's free Translate & Adapt app.
3. Leave the text settings marked Leave empty to use the translated default empty on a multilingual store: they then show the built in text in each language.

To change the wording of a theme text, use Edit default theme content in the theme's ... menu in your theme library. For a language Balm does not ship, Translate & Adapt can translate the theme texts too.

Combined listings

Combined listings group separate products into one listing, for example one product per color, and are available to Shopify Plus stores through Shopify's Combined Listings app. Balm supports them with nothing to configure:

• On the product page, picking a value that belongs to another product of the listing switches the page to that product without a reload, keeping the values already chosen and updating the address.
• Swatches on product cards link to the matching product.
• In quick view, a value from another product loads that product into the modal.
• In the quick add option picker, such a value opens that product's page, where the full picker takes over.

Pre-order

A variant that keeps selling once its stock reaches 0 is a pre-order. In the product admin, track its quantity and check Continue selling when out of stock. At 0 stock, the add to cart button, the sticky add to cart bar and the quick add button then read Pre-order, or the Button label you set in Theme settings, Pre-order. The Stock status block keeps its own text.

The label does not change how checkout works: the order is paid at checkout like any other. To take a deposit or charge later, use a pre-order app that creates selling plans; its options then show in the Purchase options block. Tell buyers when the product will ship, for example in a Text block or a Collapsible row.