Product page blocks

Balm ships one product page, and every product uses it. You shape it from the theme editor, and you can let each product carry its own colors and texts through metafields, so you never need a second template.

How the page is built

The Product section is a two column layout: the media gallery on one side, a column of blocks on the other. Add, remove and reorder the blocks in the theme editor: Online Store, Themes, Customize, then pick Products in the page menu at the top. The section also accepts app blocks, so any app that offers a block (reviews, subscriptions, bundles) drops straight into the column, and the general theme blocks (Heading, Button, Spacer and the others).

The template, templates/product.json, starts with this stack:

Order	Block	What it does
1	Title	The product title.
2	Text	A short tagline under the title. Rich text, so you can bold or link.
3	Popup	A small Specifications link that opens a dialog, for ingredients, sizing or nutrition.
4	Price	Price, compare-at price and unit price.
5	Variant picker	The options the customer chooses from.
6	Quantity	Quantity selector, with any per order limits you have set.
7	Volume pricing	Quantity break pricing, shown only when the variant has price breaks.
8	Purchase options	Subscription or delivery options, shown only when the product has selling plans.
9	Gift card recipient	Recipient name, email and message, shown only on gift card products.
10	Buy buttons	Add to cart and the accelerated checkout buttons. A variant that keeps selling at 0 stock says Pre-order instead.
11	Back in stock	A Notify me when available form, shown only when the selected variant is sold out.
12	Pickup availability	Local pickup for the selected variant, shown only when a location offers it.
13	Payment icons	A secure checkout line with your store's payment icons.
14	Product upsell	Frequently bought together, picked automatically.
15	Icon list	Three short reassurance claims with icons.
16	Description	The product description from the product admin page.
17	Collapsible row	Details, a closed accordion row.
18	Collapsible row	Shipping and returns, a closed accordion row.
19	Product navigation	Previous and next links to the neighboring products.

Blocks marked shown only when render nothing on products that do not need them, so the page stays short even though the stack is long. Below the section, the template also places Product recommendations and a Sticky add to cart bar.

The section picker offers a second version of the section, Balm spotlight: a dark page with a stacked gallery, a radial halo background, a spinning badge, a specifications popup, an icon list and three collapsible rows. Use it as a starting point for a hero product.

Buy button styles

The Style setting of the Buy buttons block offers five looks. Each keeps its own Corner radius, Font weight and Letter case settings, so you can land anywhere between them.

Style	Looks like	Good for
Solid (default)	A filled button in your color scheme's button color.	Most stores. Reads clearly on any background.
Outline	A bordered button that fills in on hover.	Quiet, editorial pages where the button should not shout.
Soft	Filled, generously rounded, lifted by a soft shadow.	A modern, app like feel.
Signature pill	An asymmetric italic pill with one square corner.	A bold, branded look. The only style that can weld to the packs menu.
Glass	A frosted panel: tinted fill, hairline border, blurred backdrop.	Pages with a photo, gradient or halo background, where the button should sit in the artwork.

Welding joins the buy button to the Packs menu variant picker so the two read as one shape. It needs the Signature pill style, because the seam depends on its square corner. Turn on Weld to the buy button in the Variant picker block and Weld to the packs menu in the Buy buttons block.

About the Glass style

Glass takes its recipe from Theme settings, Glass effect: one tint, one opacity, one blur and one border opacity, shared by every glass surface. Change it once and the buy button, the upsell buttons, the popup trigger, the newsletter card and the cart panel move together.

The label keeps the text color of the section's color scheme. Balm measures the contrast between that color and the frosted surface, and only when it falls below 3:1 (the WCAG floor for large text) does it switch the label to black or white, whichever reads better. Over a background image or a gradient the backdrop changes from pixel to pixel, so the theme leaves your scheme color alone there: check the contrast yourself.

Glass is available on the buy button, on the Product upsell buttons (Button style, separate from the card style) and on the Popup trigger.

Variant picker styles

Style	Looks like
Buttons (pills) (default)	Pill shaped option buttons.
Dropdown menu	A select menu. Best when a product has many values.
Color swatches	Round color dots, from the swatches saved on your option values in the admin.
Image swatches	Small image tiles, from the same swatches.
Signature pill	Large italic pills.
Packs menu	A single pill that opens a menu of pack sizes, with a price per option.

Swatch styles fall back to a text pill for option values with no swatch saved. Unavailable option values grays out or hides combinations that cannot be bought. Products that belong to a combined listing switch to the sibling product when a shopper picks one of its values: see Combined listings.

Ready-made backgrounds

The Product section can paint its own background. The setting is Background mode, at the top of the section settings, with five modes: None (use the color scheme), Solid color, Gradient (two colors), Image and Radial halo. The template default is None (use the color scheme). The three combinations below are ready to copy.

A. Soft gradient

A near white wash that lifts the packshot without coloring it. These gradient colors are already typed into the template, so switching the mode is all it takes.

Setting	Value
Background mode	Gradient (two colors)
Gradient start	`#faf8f5`
Gradient end	`#ffffff`
Gradient direction	`180`
Show bottom curve	Off

B. Warm paper

A single flat color. The calmest option, and the easiest to connect to a metafield so each product carries its own shade.

Setting	Value
Background mode	Solid color
Background color	`#f4f1ec`
Show bottom curve	Off

C. Radial halo

A dark halo anchored in one corner over a light base. The most dramatic of the three; use it when the packshot is cut out on a transparent background.

Setting	Value
Background mode	Radial halo
Base color	`#f4f1ea`
Halo color	`#1a1a1a`
Halo position	Top right
Halo size (desktop)	`160`
Halo size (mobile)	`130`
Halo solid area	`24`
Show bottom curve	On, Curve color `#ffffff`

To give every product its own background color, connect these colors to product metafields: the step by step guide is on Metafields.

The accelerated checkout buttons

With Dynamic checkout buttons on, the wallet buttons (Shop Pay, PayPal, Google Pay, Apple Pay) show under Add to cart. Which ones appear depends on the payment methods your store has enabled and on the visitor's browser, so the row differs from one shopper to the next.

These buttons are drawn by Shopify, inside an element no theme and no app can style directly. Shopify exposes a short list of settings instead, and Balm sets all of them from your Add to cart button:

What	Follows
Height	Your Button height setting, within Shopify's range of 25 to 55 px
Corner radius	Your Corner radius setting, the same value as Add to cart
Shadow	Removed, so the row stays flat like the buy button
Alignment	Centered
Space between wallet rows	Matched to the gap under the buy button
Loading placeholder	Your color scheme, instead of Shopify's default gray

No theme can change the brand color of each button, its logo, its label or its font: Shop Pay stays purple and PayPal yellow on every Shopify store. Because Shopify caps the wallet height at 55 px, a Button height above 55 makes Add to cart taller than the wallet row; keep it at 55 or below if you want the two to match. The cart drawer and the cart page get the same treatment.

Product section settings

Settings of the Product section itself: background (with the product metafields they connect to), product vignette, bottom curve, layout, gallery, packshot captions, video and 3D, spacing, collapsible rows and breadcrumbs. Select the section in the editor, above its blocks, to see them.

Product section settings (85)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Pick a mode: a flat color, a two-color gradient, an image, or a radial halo. The settings for the mode you pick appear right below. Keep None to let the color scheme paint the section.
Background mode	None (use the color scheme) Solid color Gradient (two colors) Image Radial halo	None (use the color scheme)	None lets the color scheme paint the section background, like every other section of the theme.
Background colors can be connected to a product metafield, so each product can carry its own color without a separate template. Create a product metafield of type "Color" in Settings → Custom data → Products, then use the dynamic source icon next to a color below.
Fallback background color	Color	None	Do not connect this one: it is the value used when a connected metafield is empty on a product. Leave it as None and those products fall back to the color scheme background instead.
Solid color settings
Background color	Color	`#F4F1EC`	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Background color", set namespace and key to "custom.background_color", and choose type "Color". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists. Shown when Background mode is Solid color.
Gradient settings
Gradient start	Color	`#F4F1EC`	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Background color", set namespace and key to "custom.background_color", and choose type "Color". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists. Shown when Background mode is Gradient (two colors).
Gradient end	Color	`#FFFFFF`	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Background color end", set namespace and key to "custom.background_color_end", and choose type "Color". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists. Shown when Background mode is Gradient (two colors).
Gradient direction	0 to 360 deg, step 15	180 deg	Shown when Background mode is Gradient (two colors).
Image settings
Background image	Image	Empty	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Background image", set namespace and key to "custom.background_image", and choose type "File". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists. Shown when Background mode is Image.
Overlay color	Color	`#000000`	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Overlay color", set namespace and key to "custom.overlay_color", and choose type "Color". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists. Shown when Background mode is Image.
Overlay opacity	0 to 90%, step 5	0%	Shown when Background mode is Image.
Radial halo settings
Base color	Color	`#F4F1EC`	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Background color", set namespace and key to "custom.background_color", and choose type "Color". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists. Shown when Background mode is Radial halo.
Halo color	Color	`#1A1A1A`	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Accent color", set namespace and key to "custom.accent_color", and choose type "Color". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists. Shown when Background mode is Radial halo.
Halo position	Top right Top left Top Center Bottom right Bottom left	Top right	Shown when Background mode is Radial halo.
Halo size (desktop)	40 to 260%, step 10	160%	Shown when Background mode is Radial halo.
Halo size (mobile)	40 to 260%, step 10	130%	Shown when Background mode is Radial halo.
Halo solid area	0 to 80%, step 2	24%	How much of the halo stays a flat color before it fades out. Shown when Background mode is Radial halo.
Background · Product vignette
An image layer behind the product area. It stacks on top of the background above, so both can be used together.
Show product vignette	Checkbox	Off
Vignette image	Image	Empty	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Background media", set namespace and key to "custom.background_media", and choose type "File". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists. Shown when Show product vignette is on.
Vignette opacity	10 to 100%, step 5	100%	Shown when Show product vignette is on.
Vignette width (desktop)	20 to 160%, step 5	70%	Shown when Show product vignette is on.
Vignette horizontal align (desktop)	Left Center Right	Right	Shown when Show product vignette is on.
Vignette vertical align (desktop)	Top Center Bottom	Center	Shown when Show product vignette is on.
Vignette horizontal offset (desktop)	-300 to 300 px, step 10	0 px	Shown when Show product vignette is on.
Vignette vertical offset (desktop)	-300 to 300 px, step 10	0 px	Shown when Show product vignette is on.
Vignette width (mobile)	20 to 200%, step 5	110%	Shown when Show product vignette is on.
Vignette horizontal align (mobile)	Left Center Right	Center	Shown when Show product vignette is on.
Vignette vertical align (mobile)	Top Center Bottom	Top	Shown when Show product vignette is on.
Vignette horizontal offset (mobile)	-200 to 200 px, step 10	0 px	Shown when Show product vignette is on.
Vignette vertical offset (mobile)	-200 to 200 px, step 10	0 px	Shown when Show product vignette is on.
Background · Bottom curve
Show bottom curve	Checkbox	Off	Set the curve color to match the section below so the two blend.
Shape	None Simple curve Wave Diagonal Rounded concave Rounded convex Custom image	Simple curve	Shown when Show bottom curve is on.
Shape image	Image	Empty	Stretched to the band width and height, like the built-in shapes. A PNG or SVG with transparency works best. Shown when Show bottom curve is on and Shape is Custom image.
Curve color	Color	`#FFFFFF`	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Curve color", set namespace and key to "custom.curve_color", and choose type "Color". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists. Shown when Show bottom curve is on and Shape is not None and Shape is not Custom image.
Flip curve	Checkbox	Off	Shown when Show bottom curve is on and Shape is not None.
Curve height (desktop)	12 to 120 px, step 4	48 px	Shown when Show bottom curve is on and Shape is not None.
Curve height (mobile)	8 to 80 px, step 4	24 px	Shown when Show bottom curve is on and Shape is not None.
Layout
Gallery width (desktop)	40 to 65%, step 5	55%
Gap between columns (desktop)	24 to 96 px, step 4	48 px
Sticky product info (desktop)	Checkbox	On
One collapsible row open at a time	Checkbox	Off	Opening a row closes the others.
Media
Gallery layout
Desktop layout	Thumbnails below the viewer Thumbnails left of the viewer Thumbnails right of the viewer Stacked (all media, no viewer) Grid Full-frame carousel	Thumbnails below the viewer
Mobile layout	Carousel (swipe) Thumbnails below the viewer Stacked (all media, no viewer) Grid	Carousel (swipe)
Columns (desktop)	1 to 4	2	Only used by the Grid layout.
Columns (mobile)	1 to 4	1
Gap between media (desktop)	0 to 40 px, step 4	12 px
Gap between media (mobile)	0 to 32 px, step 4	8 px
Viewer height (desktop)	0 to 900 px, step 50	0 px	0 = follow the media aspect ratio.
Carousel position indicator	Dots Counter None	Dots
Next-slide peek (mobile)	0 to 40 px, step 4	0 px	Shows a sliver of the next media so the carousel reads as swipeable.
Media ratio (desktop)	Original (never crops) Square (1:1) Landscape (4:3) Portrait (3:4) Wide (16:9)	Original (never crops)
Media ratio (mobile)	Same as desktop Original Square (1:1) Landscape (4:3) Portrait (3:4)	Same as desktop
Fit (when a ratio is set)	Fill (crops) Contain (never crops)	Fill (crops)
Media corner radius	0 to 48 px, step 4	0 px	Capped by the global corner setting (Theme settings → Corner style).
Show thumbnails	Checkbox	On
Thumbnail size	40 to 96 px, step 8	64 px
Thumbnail size (mobile)	40 to 96 px, step 8	56 px
Zoom image	Checkbox	On
Maximum zoom level	2 to 6 x	3 x	Click or tap the image to step through the levels.
Promo badge	Checkbox	On
Badge text	Text	Translated text	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Badge label", set namespace and key to "custom.badge_label", and choose type "Single line text". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists. Leave empty to use the translated default.
Packshot captions
Adds a caption under each media. Designed for cut-out packshots; combines with every gallery layout, and media with no caption simply render without one.
Show captions	Checkbox	Off
Caption source	Media alt text Product metafield (list)	Media alt text
Metafield	Text	Empty	namespace.key of a list.single_line_text_field. Entry 1 captions media 1, and so on. Falls back to the alt text.
Style	Subtle Spaced capitals Display italic	Subtle
Caption size (desktop)	10 to 24 px	13 px
Caption size (mobile)	10 to 22 px	12 px
Caption weight	Regular Medium Semibold Bold	Regular
Caption case	As typed UPPERCASE lowercase Capitalize	As typed
Caption alignment	Left Center Right	Center
Caption color	Color	None	Leave transparent to inherit the color scheme text color.
Space above the caption	0 to 32 px, step 2	10 px
Video and 3D
Show video controls	Checkbox	On
Autoplay videos	Checkbox	Off	Browsers only honor autoplay on muted videos.
Loop videos	Checkbox	Off
Mute videos	Checkbox	On
Show the AR button on 3D models	Checkbox	On	Hidden automatically on devices with no AR support.
Spacing
Top padding (desktop)	0 to 120 px, step 4	40 px
Bottom padding (desktop)	0 to 120 px, step 4	64 px
Top padding (mobile)	0 to 80 px, step 4	24 px
Bottom padding (mobile)	0 to 80 px, step 4	40 px
Collapsible rows
Set the space between rows here	Checkbox	Off	Overrides the spacing of every collapsible row at once. Leave off to keep each row's own spacing.
Space between rows (desktop)	0 to 48 px, step 2	16 px	Shown when Set the space between rows here is on.
Space between rows (mobile)	0 to 40 px, step 2	12 px	Shown when Set the space between rows here is on.
Breadcrumbs
Breadcrumbs on this page	Use the theme setting Show Hide	Use the theme setting	Overrides Theme settings for this page only. Position and separator stay global.
Breadcrumbs alignment	Use the theme setting Left Center Right	Use the theme setting

Blocks

Every block of the product information column, with the name the block picker shows. Settings that can be connected to a product metafield say so in their notes, with the exact definition to create; the full list is on Metafields.

Title

The product title, the main heading of the page. Keep one Title block on H1; any extra title block should use a subheading level.

Block settings (10)

Setting	Values	Default	Notes
Heading level	Main heading (H1) Subheading (H2) Subheading (H3)	Subheading (H2)	A page should have exactly one main heading. Leave any extra title block on a subheading level.
Typography style	House style (italic, caps) Neutral Uppercase Italic Italic uppercase As typed	House style (italic, caps)
Size (desktop)	24 to 96 px, step 4	48 px
Size (mobile)	20 to 64 px, step 4	32 px
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 48 px, step 4	12 px
Margin bottom (mobile)	0 to 48 px, step 4	8 px

Vendor

The brand or maker name, from the product admin page.

Block settings (6)

Setting	Values	Default
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 48 px, step 4	8 px
Margin bottom (mobile)	0 to 48 px, step 4	8 px

Price

The price, the compare-at price, the unit price and an optional taxes and shipping note. It follows the selected variant.

Block settings (11)

Setting	Values	Default	Notes
Show compare-at price	Checkbox	On
Show unit price	Checkbox	On
Taxes and shipping note	Checkbox	On	Says when prices include tax, and links your shipping policy when one is published. Nothing shows on a store with neither.
Size (desktop)	12 to 48 px, step 4	24 px
Size (mobile)	12 to 40 px, step 4	20 px
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 48 px, step 4	16 px
Margin bottom (mobile)	0 to 48 px, step 4	12 px

SKU

The SKU of the selected variant, with an optional prefix.

Block settings (7)

Setting	Values	Default	Notes
Prefix	Text	Translated text	Leave empty to use the translated default.
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 48 px, step 4	8 px
Margin bottom (mobile)	0 to 48 px, step 4	8 px

Rating

Stars, the numeric value and the review count, read from the standard reviews.rating and reviews.rating_count metafields that review apps fill. It renders nothing until an app fills them.

Block settings (14)

Setting	Values	Default	Notes
Reads the standard reviews.rating metafields. The block renders nothing until a review app fills them.
Show the numeric value	Checkbox	On
Show the review count	Checkbox	On
Star size (desktop)	10 to 32 px	16 px
Star size (mobile)	10 to 28 px	14 px
Text size (desktop)	10 to 22 px	13 px
Text size (mobile)	10 to 20 px	12 px
Star color	Color	None	Leave transparent to inherit the text color.
Alignment (desktop)	Left Center Right	Left
Spacing
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	12 px
Margin bottom (mobile)	0 to 48 px, step 4	8 px

Text

A free rich text paragraph. Connect it to the custom.tagline metafield to give each product its own tagline.

Block settings (9)

Setting	Values	Default	Notes
Text	Rich text	Add extra details about your product.	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Tagline", set namespace and key to "custom.tagline", and choose type "Single line text". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.
Size (desktop)	12 to 24 px, step 2	14 px
Size (mobile)	12 to 20 px, step 2	12 px
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 48 px, step 4	12 px
Margin bottom (mobile)	0 to 48 px, step 4	8 px

Variant picker

The options the customer chooses from, in one of six styles (see Variant picker styles). It handles products with many variants, combined listings and unavailable combinations.

Block settings (15)

Setting	Values	Default	Notes
Style	Buttons (pills) Dropdown menu Color swatches Image swatches Signature pill Packs menu	Buttons (pills)	Swatch styles fall back to a text pill for option values with no swatch saved in the admin.
A pill that opens a menu listing every option with its price.
Show a price per option	Checkbox	On	Prices follow the selection and the currency automatically. Shown when Style is Packs menu.
Weld to the buy button	Checkbox	Off	Also turn this on in the Buy buttons block so both share one row. Shown when Style is Packs menu.
Show option names	Checkbox	On
Show the selected value next to the option name	Checkbox	On
Swatches
Swatch shape	Circle Rounded Square	Circle	Capped by the global Corner style setting, like the rest of the theme.
Size (desktop)	24 to 72 px, step 4	44 px
Size (mobile)	20 to 64 px, step 4	36 px
Unavailable combinations
Unavailable option values	Gray out (recommended) Hide	Gray out (recommended)	Graying out keeps the full range visible, which helps product discovery.
Spacing
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 48 px, step 4	16 px
Margin bottom (mobile)	0 to 48 px, step 4	12 px

Quantity

The quantity selector. It respects the minimum, maximum and increment of quantity rules set in B2B catalogs.

Block settings (8)

Setting	Values	Default	Notes
Show label	Checkbox	On
Label	Text	Translated text	Leave empty to use the translated default. Shown when Show label is on.
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 48 px, step 4	16 px
Margin bottom (mobile)	0 to 48 px, step 4	12 px

Volume pricing

Quantity price breaks, as a table or a list. It renders nothing when the variant has none.

Block settings (12)

Setting	Values	Default	Notes
Shows quantity price breaks when the product has them. Renders nothing otherwise.
Show heading	Checkbox	On
Heading	Text	Translated text	Leave empty to use the translated default. Shown when Show heading is on.
Style	Table List	Table
Show the price for the chosen quantity	Checkbox	On
Text size (desktop)	10 to 22 px	13 px
Text size (mobile)	10 to 20 px	12 px
Spacing
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	16 px
Margin bottom (mobile)	0 to 48 px, step 4	12 px

Purchase options

One-time purchase and subscription options from your subscription app, with the plan names, descriptions and savings. It renders nothing unless the product has a selling plan.

Block settings (13)

Setting	Values	Default	Notes
Shows one-time and subscription options. Renders nothing unless the product has a selling plan.
Heading	Text	Translated text	Leave empty to use the translated default.
One-time purchase label	Text	Translated text	Leave empty to use the translated default.
Show the plan group name	Checkbox	On
Show the plan description	Checkbox	On
Show the savings	Checkbox	On
Text size (desktop)	11 to 22 px	14 px
Text size (mobile)	10 to 20 px	13 px
Spacing
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	16 px
Margin bottom (mobile)	0 to 48 px, step 4	12 px

Gift card recipient

Lets the buyer send a gift card to someone else, with a name, an email, a message and a send date. It only renders on gift card products.

Block settings (9)

Setting	Values	Default	Notes
Lets the buyer send the gift card to someone else. Only renders on gift card products.
Toggle label	Text	Translated text	Leave empty to use the translated default.
Text size (desktop)	11 to 22 px	14 px
Text size (mobile)	10 to 20 px	13 px
Spacing
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	16 px
Margin bottom (mobile)	0 to 48 px, step 4	12 px

Buy buttons

Add to cart, the accelerated checkout buttons and the Shop Pay Installments banner. See Buy button styles and accelerated checkout.

Block settings (19)

Setting	Values	Default	Notes
Style	Solid Outline Soft Signature pill Glass	Solid	Signature pill keeps its own shape and italic type, and is the only style that can weld to the packs menu. Glass uses the global Glass effect (Theme settings). Its label keeps the section text color and is switched automatically only if that color would fall below a 3:1 contrast on the frosted surface.
Corner style	Follow the theme corners Custom radius	Follow the theme corners	Following the theme corners makes the buttons pills in a rounded theme and square in a square one. Shown when Style is not Signature pill.
Corner radius	0 to 48 px, step 4	8 px	Ignored by the signature pill. Shown when Style is not Signature pill and Corner style is Custom radius.
Button height	40 to 64 px, step 2	52 px	Also drives the accelerated checkout button. Shopify caps that one at 55px, so above 55 the two heights stop matching.
Font weight	Theme setting Regular Medium Semibold Bold Extra bold	Theme setting	Shown when Style is not Signature pill.
Letter case	Theme setting As typed Uppercase Lowercase Capitalize	Theme setting	Shown when Style is not Signature pill.
Add to cart label	Text	Translated text	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Buy button label", set namespace and key to "custom.buy_button_label", and choose type "Single line text". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists. Leave empty to use the translated default.
Sold out label	Text	Translated text	Leave empty to use the translated default.
Unavailable label	Text	Translated text	Leave empty to use the translated default.
Dynamic checkout buttons	Checkbox	On	Wallet buttons (Shop Pay, PayPal, Google Pay, Apple Pay) are rendered by Shopify, not by the theme. This theme matches everything Shopify allows a theme to set: height, corner radius, shadow, alignment, spacing between rows and the loading placeholder. Their brand color, logo, label text and font are fixed by each payment provider and cannot be changed by any theme, because the button markup sits in a closed shadow DOM. That is a Shopify rule, not a fault in this theme. Height is also capped by Shopify between 25 and 55 px. Everything that can be matched is taken from the Add to cart button above, so raising its height past 55 px is the one case where the two stop lining up.
Shop Pay Installments banner	Checkbox	On	Shows the pay-in-installments message under the buttons. Shopify renders it, and only when Shop Pay Installments is enabled for your store.
Weld to the packs menu	Checkbox	Off	Pairs with the same setting in the Variant picker block. Overrides full width. Shown when Style is Signature pill.
Full width	Checkbox	On
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 48 px, step 4	24 px
Margin bottom (mobile)	0 to 48 px, step 4	16 px

Stock status

In stock, low stock or out of stock for the selected variant, with a colored dot and an optional exact quantity. Low stock only applies when inventory is tracked and the variant stops selling at zero.

Block settings (18)

Setting	Values	Default	Notes
Reads the variant's inventory. "Low stock" only applies when inventory is tracked and the variant stops selling at zero.
Show the exact quantity	Checkbox	Off	Only shown when inventory is tracked.
Low stock threshold	1 to 50	10
In-stock label	Text	Translated text	Leave empty to use the translated default.
Low-stock label	Text	Translated text	Leave empty to use the translated default.
Out-of-stock label	Text	Translated text	Leave empty to use the translated default.
In-stock color	Color	`#2E7D32`
Low-stock color	Color	`#E0921A`
Out-of-stock color	Color	`#B3261E`
Dot size	4 to 20 px	8 px
Text size (desktop)	10 to 22 px	13 px
Text size (mobile)	10 to 20 px	12 px
Alignment (desktop)	Left Center Right	Left
Spacing
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	12 px
Margin bottom (mobile)	0 to 48 px, step 4	8 px

Back in stock

A back in stock form, shown only while the selected variant is sold out. Requests arrive as contact form messages, at the store address set in Settings, Notifications, and name the exact variant; no app is needed.

Block settings (16)

Setting	Values	Default	Notes
Only shown while the variant the shopper selected is sold out. Requests arrive as a contact form message, at the store address set in Settings, then Notifications, and name the exact variant.
Show heading	Checkbox	On
Heading	Text	Translated text	Leave empty to use the translated default. Shown when Show heading is on.
Subtext	Rich text	Empty
Ask for a name	Checkbox	Off
Email placeholder	Text	Translated text	Leave empty to use the translated default.
Button label	Text	Translated text	Leave empty to use the translated default.
Success message	Text	Translated text	Leave empty to use the translated default.
Style
Button style	Solid Glass	Solid	Glass uses the global Glass effect (Theme settings). Check contrast over the section background.
Text size (desktop)	11 to 20 px	14 px
Text size (mobile)	11 to 18 px	13 px
Spacing
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	20 px
Margin bottom (mobile)	0 to 48 px, step 4	16 px

Pickup availability

Local pickup availability for the selected variant, and a button that opens the list of locations. It renders nothing unless a location has pickup enabled.

Block settings (6)

Setting	Values	Default
Shows local pickup availability for the selected variant. Renders nothing unless a location has pickup enabled.
Spacing
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	16 px
Margin bottom (mobile)	0 to 48 px, step 4	12 px

Payment icons

A reassurance line and the icons of the payment methods enabled in your store (Settings, Payments). A theme cannot add or reorder these icons; to show another badge, upload it as the block image.

Block settings (14)

Setting	Values	Default	Notes
The marks are your store's own enabled payment methods (Settings, then Payments). A theme cannot add, remove or reorder them. To show a badge Shopify does not know about, upload it as the image below.
Show the reassurance line	Checkbox	On
Text	Text	Translated text	Leave empty to use the translated default.
Image	Image	Empty	Drawn under the payment marks. Use it for a trust badge, a delivery promise or a guarantee.
Alignment (desktop)	Left Center Right	Left
Icon size	20 to 48 px, step 2	32 px
Space between icons	2 to 20 px, step 2	8 px
Text size (desktop)	10 to 20 px	12 px
Text size (mobile)	10 to 18 px	11 px
Spacing
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	16 px
Margin bottom (mobile)	0 to 48 px, step 4	12 px

Product upsell

Products to buy alongside this one, from Shopify recommendations or your own selection. Bundle (tick boxes, one total) adds every ticked product in one action; Simple list (add one by one) adds them separately.

Block settings (31)

Setting	Values	Default	Notes
Show heading	Checkbox	On
Heading	Text	Translated text	Leave empty to use the translated default. Shown when Show heading is on.
Presentation	Bundle (tick boxes, one total) Simple list (add one by one)	Bundle (tick boxes, one total)	Bundle adds every ticked product in one action.
Source
Products come from	Shopify recommendations A manual selection	Shopify recommendations
Recommendation intent	Complementary (pairs well with) Related (similar products)	Complementary (pairs well with)	Only used with Shopify recommendations.
Products	Product list	Empty	Connectable to a product list metafield.
Number of products	2 to 10	3	Shopify recommendations return 10 products at most.
Layout
Layout	List (thumbnail beside the text) Grid	List (thumbnail beside the text)
Columns (desktop)	1 to 4	3
Columns (mobile)	1 to 4	1
Show product image	Checkbox	On
Thumbnail size	40 to 120 px, step 4	64 px
Content
Show price	Checkbox	On
Show compare-at price	Checkbox	On
Tick every product by default	Checkbox	On	Bundle mode only.
Products with several variants	Pick the variant inline Link to the product page	Pick the variant inline	Single-variant products are always addable inline.
Bundle button label	Text	Translated text	Leave empty to use the translated default.
Row button label	Text	Translated text	Leave empty to use the translated default.
Style
Card style	Bare Bordered Filled Glass	Bordered	Glass uses the global Glass effect (Theme settings). Check contrast over the section background.
Button style	Solid Glass	Solid	Glass uses the global Glass effect (Theme settings). Check contrast over the section background.
Corner radius	0 to 40 px, step 2	12 px	Capped by the global corner radius (Theme settings, Corner style).
Card title size (desktop)	10 to 24 px	14 px
Card title size (mobile)	10 to 22 px	13 px
Spacing
Card gap (desktop)	0 to 40 px, step 2	12 px
Card gap (mobile)	0 to 32 px, step 2	10 px
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	20 px
Margin bottom (mobile)	0 to 48 px, step 4	16 px

Complementary products

A small grid of product cards: complementary products from Shopify recommendations, curated in the Search & Discovery app, or your own selection, which can be connected to a product list metafield.

Block settings (17)

Setting	Values	Default	Notes
Show heading	Checkbox	On
Heading	Text	Translated text	Leave empty to use the translated default. Shown when Show heading is on.
Products come from	Shopify recommendations A manual selection	Shopify recommendations
Products	Product list	Empty	Connectable to a product list metafield.
Number of products	2 to 8	4
Columns (desktop)	1 to 4	2
Columns (mobile)	1 to 4	2
Card title size (desktop)	10 to 28 px	14 px
Card title size (mobile)	10 to 24 px	13 px
Spacing
Card gap (desktop)	0 to 40 px, step 2	16 px
Card gap (mobile)	0 to 32 px, step 2	12 px
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	20 px
Margin bottom (mobile)	0 to 48 px, step 4	16 px

Description

The product description from the product admin page.

Block settings (8)

Setting	Values	Default
Size (desktop)	12 to 24 px, step 2	16 px
Size (mobile)	12 to 20 px, step 2	14 px
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 48 px, step 4	16 px
Margin bottom (mobile)	0 to 48 px, step 4	12 px

Collapsible row

An accordion row whose content is rich text, which can be connected to a metafield, or a page, to share one policy page across every product. The Product section can keep only one row open at a time.

Block settings (13)

Setting	Values	Default	Notes
Heading	Text	Collapsible row	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Row heading", set namespace and key to "custom.row_heading", and choose type "Single line text". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.
Content comes from	Rich text A page	Rich text
Content	Rich text	Share details about shipping, returns, materials or care instructions.	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Ingredients", set namespace and key to "custom.ingredients", and choose type "Rich text". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.
Page	Page	Empty	Share one policy page across every product.
Icon	Image	Empty
Icon size	12 to 48 px, step 2	20 px
Open by default	Checkbox	Off
Spacing
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 48 px, step 4	16 px
Margin bottom (mobile)	0 to 48 px, step 4	12 px

A link or button that opens a dialog with rich text or a page. The Under-title link style sits right below the product title.

Block settings (18)

Setting	Values	Default	Notes
Trigger label	Text	Size guide	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Specs label", set namespace and key to "custom.specs_label", and choose type "Single line text". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.
Trigger style	Link Button Glass button Under-title link	Link	Under-title link is a quiet underlined caption meant to sit right below the product title.
Alignment (desktop)	Left Center Right	Left
Text size (desktop)	10 to 24 px	14 px
Text size (mobile)	10 to 22 px	13 px
Modal content
Modal title	Text	Empty
Content comes from	Rich text A page	Rich text
Content	Rich text	Describe your sizing, composition or shipping details here.	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Specifications", set namespace and key to "custom.specifications", and choose type "Rich text". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.
Page	Page	Empty	Share one policy page across every product.
Modal width	320 to 900 px, step 20	560 px
Spacing
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	16 px
Margin bottom (mobile)	0 to 48 px, step 4	12 px
Margin top (desktop)	-40 to 40 px, step 4	0 px	Use a negative value to tuck the trigger under the block above.
Margin top (mobile)	-32 to 32 px, step 4	0 px

Specifications

A label and value table built from Specification blocks, with lines, dots or zebra stripes between rows.

Block settings (17)

Setting	Values	Default
Heading	Text	Empty
Style
Row separator	Line Dotted Zebra None	Line
Value alignment	Left Center Right	Right
Typography
Label size (desktop)	10 to 24 px	13 px
Label size (mobile)	10 to 22 px	12 px
Value size (desktop)	10 to 24 px	13 px
Value size (mobile)	10 to 22 px	12 px
Spacing
Row padding (desktop)	0 to 32 px, step 2	10 px
Row padding (mobile)	0 to 28 px, step 2	8 px
Gap between columns (desktop)	8 to 80 px, step 4	24 px
Gap between columns (mobile)	8 to 64 px, step 4	16 px
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	20 px
Margin bottom (mobile)	0 to 48 px, step 4	16 px

Accepts these blocks inside it: Specification.

Specification

One row of the Specifications block. Both the label and the value can be connected to product metafields.

Block settings (2)

Setting	Values	Default	Notes
Label	Text	Label	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Spec label", set namespace and key to "custom.spec_label", and choose type "Single line text". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.
Value	Text	Value	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Net weight", set namespace and key to "custom.net_weight", and choose type "Single line text". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.

Icon list

Reassurance claims built from Icon item blocks, stacked, side by side, or on one row with a button.

Block settings (27)

Setting	Values	Default	Notes
Heading	Text	Empty
Layout
Style	Vertical (icon beside the text) Horizontal (icon above the text) Inline with button	Vertical (icon beside the text)
Claims sit on one row with the button on the right. Each claim takes an equal share, so the row stays centered whatever the number.
Button label	Text	Shop now	Shown when Style is Inline with button.
Button link	Link	Empty	Shown when Style is Inline with button.
Button style	Filled pill Outlined Text link	Filled pill	Shown when Style is Inline with button.
Button text size (desktop)	12 to 34 px	20 px	Shown when Style is Inline with button.
Button text size (mobile)	11 to 28 px	16 px	Shown when Style is Inline with button.
Space before the button	8 to 80 px, step 4	24 px	Shown when Style is Inline with button.
Columns (desktop)	1 to 4	1	Ignored in the inline layout, where the claim count sets the columns.
Columns (mobile)	1 to 4	1
Alignment (desktop)	Left Center Right	Left
Icon size (desktop)	14 to 72 px, step 2	28 px
Icon size (mobile)	12 to 64 px, step 2	24 px
Typography
Title size (desktop)	10 to 28 px	14 px
Title size (mobile)	10 to 24 px	13 px
Body text size (desktop)	10 to 24 px	13 px
Body text size (mobile)	10 to 22 px	12 px
Spacing
Gap between items (desktop)	0 to 48 px, step 2	14 px
Gap between items (mobile)	0 to 40 px, step 2	10 px
Gap icon/text (desktop)	0 to 32 px, step 2	12 px
Gap icon/text (mobile)	0 to 28 px, step 2	10 px
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	20 px
Margin bottom (mobile)	0 to 48 px, step 4	16 px

Accepts these blocks inside it: Icon item.

Icon item

One claim of the Icon list: a built in glyph or your own image, a heading and a text.

Block settings (5)

Setting	Values	Default	Notes
Icon type	Built-in glyph Image No icon	Built-in glyph
Glyph	Check Leaf Shield Truck Refresh Drop Heart Star	Check
Icon image	Image	Empty	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Claim icon", set namespace and key to "custom.claim_icon", and choose type "File". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.
Heading	Text	Your highlight	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Claim title", set namespace and key to "custom.claim_title", and choose type "Single line text". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.
Text	Text	Empty	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Claim body", set namespace and key to "custom.claim_body", and choose type "Single line text". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.

Image

An image inside the information column, with an optional caption. Connect it to a metafield to show a different image per product.

Block settings (17)

Setting	Values	Default	Notes
Image	Image	Empty	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Product image", set namespace and key to "custom.product_image", and choose type "File". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.
Image width (desktop)	10 to 100%, step 5	100%
Image width (mobile)	10 to 100%, step 5	100%
Aspect ratio	Original Square (1:1) Landscape (4:3) Portrait (3:4) Wide (16:9)	Original
Fit (when a ratio is set)	Fill (crops) Contain (never crops)	Fill (crops)
Alignment (desktop)	Left Center Right	Left
Corner radius	0 to 60 px, step 4	0 px	Capped by the global corner setting (Theme settings → Corner style).
Caption
Caption	Text	Empty	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Image caption", set namespace and key to "custom.image_caption", and choose type "Single line text". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.
Text size (desktop)	10 to 22 px	13 px
Text size (mobile)	10 to 20 px	12 px
Space above the caption	0 to 24 px, step 2	8 px
Spacing
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	20 px
Margin bottom (mobile)	0 to 48 px, step 4	16 px

Badge

Automatic (Sale, Sold out, New, Custom) shows the same badges as the product cards, styled in Theme settings, Product badges. Text and Image place a sticker of your own in a corner of the gallery.

Block settings (19)

Setting	Values	Default	Notes
Badge type	Text Image Automatic (Sale, Sold out, New, Custom)	Text	Automatic draws the same badges as the product cards, from Theme settings, Product badges. Text and Image are a sticker of your own.
Custom badge metafield	Text	Empty	namespace.key of a product text metafield, for example custom.badge. Colours, shape and position are in Theme settings, Product badges.
Text	Text	New	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Badge label", set namespace and key to "custom.badge_label", and choose type "Single line text". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.
Image	Image	Empty
Position	Top left Top right Bottom left Bottom right	Top right
Size (desktop)	40 to 200 px, step 4	96 px
Size (mobile)	32 to 160 px, step 4	68 px
Edge offset (desktop)	0 to 80 px, step 4	12 px
Edge offset (mobile)	0 to 60 px, step 4	8 px
Text size (desktop)	8 to 32 px	13 px
Text size (mobile)	8 to 26 px	11 px
Badge background	Color	`#121212`	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Badge background", set namespace and key to "custom.badge_background", and choose type "Color". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.
Badge text color	Color	`#FFFFFF`	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Badge text color", set namespace and key to "custom.badge_text_color", and choose type "Color". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.
Spacing
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	0 px
Margin bottom (mobile)	0 to 48 px, step 4	0 px

Spinning badge

A round badge with text turning around a ring, placed over a corner of the product image or behind it. The rotation stops for visitors who ask for reduced motion.

Block settings (16)

Setting	Values	Default	Notes
Text	Text	Your claim here	To vary this per product, create the metafield first. Go to Settings → Custom data → Products. Name it "Badge label", set namespace and key to "custom.badge_label", and choose type "Single line text". Then come back here and connect it with the dynamic source icon. It cannot be connected until it exists.
Repeats	1 to 6	3	How many times the text goes around the circle.
Separator	Text	·
Text size	6 to 20	11	Relative to the badge, so it scales on every screen.
Text color	Color	`#FFFFFF`
Background color	Color	None	Leave transparent for text only.
Motion
One full turn	4 to 60 s, step 2	20 s	Rotation stops for visitors who ask for reduced motion.
Direction	Clockwise Anticlockwise	Clockwise
Position
Anchor	Top left Top right Middle left Middle right Bottom left Bottom right	Top right
Place behind the product	Checkbox	Off	The product image cuts into the ring.
Size (desktop)	60 to 260 px, step 4	140 px
Size (mobile)	40 to 180 px, step 4	96 px
Horizontal offset (desktop)	-200 to 200 px, step 4	0 px
Vertical offset (desktop)	-200 to 200 px, step 4	0 px
Horizontal offset (mobile)	-140 to 140 px, step 4	0 px
Vertical offset (mobile)	-140 to 140 px, step 4	0 px

Share links for X, Facebook and Pinterest, and a copy link button.

Block settings (15)

Setting	Values	Default	Notes
Show label	Checkbox	On
Label	Text	Translated text	Leave empty to use the translated default. Shown when Show label is on.
Show X	Checkbox	On
Show Facebook	Checkbox	On
Show Pinterest	Checkbox	On
Show copy link	Checkbox	On
Alignment (desktop)	Left Center Right	Left
Text size (desktop)	9 to 20 px	12 px
Text size (mobile)	9 to 18 px	11 px
Spacing
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	16 px
Margin bottom (mobile)	0 to 48 px, step 4	12 px

Product navigation

Links to the previous and next product of a collection (the product's first collection by default). Only the first 50 products of the collection are read.

Block settings (16)

Setting	Values	Default	Notes
Links to the previous and next product. Only the first 50 products of the collection are read.
Collection	Collection	Empty	Leave empty to use the product's first collection.
Loop around	Checkbox	On	The last product links back to the first.
Previous label	Text	Translated text	Leave empty to use the translated default.
Next label	Text	Translated text	Leave empty to use the translated default.
Show product names	Checkbox	On
Layout
Style	Text link Outlined pill	Text link
Horizontal alignment	Opposite edges Left Center Right	Opposite edges
Gap	8 to 64 px, step 4	24 px
Size (desktop)	10 to 24 px	14 px
Size (mobile)	9 to 20 px	12 px
Spacing
Padding top (desktop)	0 to 80 px, step 4	0 px
Padding top (mobile)	0 to 64 px, step 4	0 px
Padding bottom (desktop)	0 to 80 px, step 4	0 px
Padding bottom (mobile)	0 to 64 px, step 4	0 px
Margin bottom (desktop)	0 to 64 px, step 4	16 px
Margin bottom (mobile)	0 to 48 px, step 4	12 px

Sticky add to cart

The sticky add to cart bar as a block, for a product template that does not use the Sticky add to cart section. Use one or the other, not both.

Block settings (12)

Setting	Values	Default	Notes
Enable the bar	Checkbox	On	Renders the bar for this product page. Leave the separate Sticky add to cart section off if you use this block: the first bar on the page is the one that gets wired.
Position
Position (desktop)	Top Bottom	Bottom
Position (mobile)	Top Bottom	Bottom
Bar height	56 to 120 px, step 2	80 px
Displayed content
Product thumbnail (desktop)	Checkbox	On
Product thumbnail (mobile)	Checkbox	Off
Product title	Checkbox	On
Selected variant	Checkbox	On
Price	Checkbox	On
Behavior
Always visible	Checkbox	Off	Unchecked: the bar appears when the main buy button scrolls out of view.
Button
Button background	Color	`#FFFFFF`
Button text	Color	`#111111`	An accent inherited from the product section only replaces this color when it stays readable on the button background.

Liquid

Your own Liquid or HTML, or the insertion code of an app that has no app block. See Custom code.

Block settings (5)

Setting	Values	Default	Notes
Liquid code	Liquid code	Empty	Add app snippets or any other Liquid / HTML code.
Top padding (desktop)	0 to 80 px, step 4	0 px
Top padding (mobile)	0 to 64 px, step 4	0 px
Bottom padding (desktop)	0 to 80 px, step 4	0 px
Bottom padding (mobile)	0 to 64 px, step 4	0 px

When one product needs a different layout

Metafields let one template carry different colors, texts and images per product. Some settings cannot be connected to a metafield: sliders, checkboxes, dropdowns, the color scheme and Liquid code. When a product needs a different value for one of those, create a second template: in the theme editor, open Products in the page menu, choose Create template, base it on the default product template, then assign it to the product from its admin page, under Theme template.

Products that used an older template

Early versions of Balm shipped extra product templates. They have been folded into the default one. A product still assigned to one of them falls back to the default product template and renders normally. To clear the setting, open the product in the admin and choose Default product under Theme template.