Sections

Every section Balm offers, with where it can be used, what it does, a typical use and its full list of settings. Add a section from the theme editor with Add section; drag it to reorder it. Settings tables are folded: open one to see every label, its values and its default.

Settings most sections share

A handful of settings come back in almost every section. They work the same way everywhere, so they are explained once here.

Color scheme

Picks one of the schemes defined in Theme settings, Colors. The scheme paints the section background, its text and its buttons.

Section background

Most sections can paint their own background on top of the color scheme. Background mode offers five choices, and the settings of the mode you pick appear right below it:

None (use the color scheme): the default. The scheme background shows, like everywhere else.
Solid color: one Background color.
Gradient (two colors): Gradient start, Gradient end and Gradient angle.
Image: a Background image with an optional Overlay color and Overlay opacity to keep text readable.
Radial halo: a Halo color glowing from one corner over a Base color, with Halo position, Halo size (desktop), Halo size (mobile) and Halo solid area.

The colors and the image can be connected to shop metafields, so one value restyles every section at once. The Fallback background color is used when a connected metafield is empty; leave it on None to fall back to the color scheme, and never connect it to a metafield itself. The keys to create are listed on Metafields. On the product page the same settings connect to product metafields instead, so every product can carry its own background.

Spacing, desktop and mobile

Sizes and spacings come in pairs: a label ending in (desktop) applies from 768 px wide, one ending in (mobile) applies below. Top and bottom padding set the space inside the section, above and below its content.

Transparent header

Hero, Slideshow, Video, Products showcase and Brand story hero carry an Allow transparent header setting. When the section is first on the page and the Header section has Transparent header over the first section turned on, the header floats over it, transparent, then materializes on scroll. The extra top padding settings keep your content clear of the header only while it is transparent.

Inner panel and text color

The About page sections and Contact place their content on an inner panel, the layer between the background and the text: Solid uses the color and opacity you set, Glass uses the shared glass recipe, Hidden removes it. Text color left on None lets the section work out a readable color from the background and the panel; pick a color only to force one.

Heading level

Search engines and screen readers expect exactly one main heading (H1) per page. Sections that often open a page (Hero, FAQ, Contact, Featured set, Store locator, Brand story hero) let you choose Main heading (H1) or a subheading level. The templates that open with one of them already set H1; keep H2 anywhere else. Product, collection, blog and page templates set their own H1.

Text left empty

Many text settings say Leave empty to use the translated default. Left empty, they show a built in text that is already translated into every language the theme ships (English, French, German, Italian and Spanish). Typing your own text replaces it in every language, so on a multilingual store either leave these fields empty or translate your text with the Translate & Adapt app. See Translations.

Spam protection notice

Shopify protects the contact and newsletter forms with hCaptcha, which must be disclosed. Balm prints the required sentence, with its two links, under each form, which removes the hCaptcha badge from the corner of the page. The Spam protection notice settings only change its size, color and alignment.

Header and footer

These sections live in the header and footer groups, shared by every page of the store.

Announcement bar

WhereHeader group only.

A thin bar above the header, made of Message blocks. With two messages or more they rotate on their own, with optional previous and next arrows, and each message can link somewhere. With Show close button on, visitors can dismiss the bar for the rest of their visit.

Scroll behavior keeps the bar pinned, lets it scroll away with the page, or hides it on the way down and brings it back on the way up. Bar layout set to Floating turns it into a card that matches the floating header, and Bar style set to Glass uses the shared glass recipe.

Typical use. Two or three short messages that rotate: a free shipping threshold, a returns promise and a launch announcement that links to the new product.

Section settings (21)

Setting	Values	Default	Notes
Show announcement bar	Checkbox	On
Behavior
Scroll behavior	Always visible (pinned) Scrolls away with the page Hide on scroll down, show on scroll up	Always visible (pinned)
Show close button	Checkbox	Off	Visitors can dismiss the bar for the rest of their browsing session.
Layout
Bar layout	Full width Floating	Full width	Floating turns the bar into a card with the side margins, corner radius and shadow of the floating header card (Header section), even when the header itself is full width. A Glass bar also takes the glass border. With a transparent header, the first section rises behind both cards.
Top margin (desktop)	0 to 24 px	8 px	Shown when Bar layout is Floating.
Top margin (mobile)	0 to 24 px	6 px	Shown when Bar layout is Floating.
Match the header corner radius	Checkbox	On	Unticked, the bar takes its own radius below, since the same radius reads rounder on a shorter bar. Either way the radius stops at half the bar's height, where its ends become a full half circle. Shown when Bar layout is Floating.
Corner radius (desktop)	0 to 40 px	8 px	Shown when Bar layout is Floating and Match the header corner radius is off.
Corner radius (mobile)	0 to 40 px	6 px	Shown when Bar layout is Floating and Match the header corner radius is off.
Rotation
Rotation delay	3 to 12 s	5 s
Show arrows	Checkbox	Off	Previous / next arrows, shown from 2 messages up.
Typography
Text size (desktop)	10 to 18 px	12 px
Text size (mobile)	10 to 18 px	12 px
Spacing
Top padding (desktop)	0 to 24 px	7 px
Bottom padding (desktop)	0 to 24 px	7 px
Top padding (mobile)	0 to 24 px	7 px
Bottom padding (mobile)	0 to 24 px	7 px
Space before the header
Space before the header (desktop)	0 to 40 px	12 px
Space before the header (mobile)	0 to 40 px	12 px
Colors
Bar style	Solid Glass	Solid	Glass uses the frosted recipe of Theme settings, Glass effect, like a glass header. In both styles the text and icons take the text color of the color scheme, and it never changes on its own. With Glass, pick a scheme whose text reads on the frost and on what passes under the bar: the first section behind a floating bar, the page scrolling under a pinned one. Visitors who ask their device for less transparency get a nearly solid fill of the scheme, as the header does, and so do phones when Glass on phones (Theme settings, Glass effect) is Near opaque.
Color scheme	Color scheme	Scheme 2

Block: Message

One message, with an optional link that makes the whole message clickable.

Message block settings (2)

Setting	Values	Default	Notes
Message	Text	Announce something here
Link	Link	Empty	Optional. Makes the whole message clickable.

Header

WhereHeader group only.

The logo, the main menu, predictive search, the account and cart icons, and an optional Instagram link. The logo is an image, or a text wordmark set in the heading font. On phones the menu opens as a sheet under the header or as a full height drawer.

The header can take three looks. Materialized surface is Solid or Glass. Transparent header over the first section lets it float, transparent, over a first section that allows it, then materialize on scroll; Logo image (transparent header) swaps in a light logo while it is transparent. Floating header (detached) pulls it away from the screen edges as a rounded card.

Mega menus are built from blocks. Add a Mega menu block, type the exact title of a top level item of your main menu in Linked menu item, then fill the panel with Link column, Image, Products, Promo and Banner blocks. See Mega menu blocks.

Typical use. A header that floats transparent over the home page hero and turns to glass on scroll, with a mega menu under the Shop item: two link columns and four best sellers.

Section settings (51)

Setting	Values	Default	Notes
Logo
Logo type	Image (uses shop name if no image uploaded) Text	Image (uses shop name if no image uploaded)
Logo text	Text	Empty
Wordmark size (desktop)	12 to 40 px	16 px	The header grows to fit the wordmark's line when it is taller than the navigation row. It is kept on one line and clipped if the centre zone is too narrow. Shown when Logo type is Text.
Wordmark size (mobile)	12 to 40 px	14 px	Shown when Logo type is Text.
Logo image	Image	Empty
Logo image (transparent header)	Image	Empty	Shown only while the header is transparent at rest over the first section, with the menu, the search and the mobile menu closed. Everywhere else, and on pages without a transparent header, the main logo image is used. Both share the width settings and the same box, so nothing moves when they swap. Needs a main logo image and the transparent header option (Header group below). Shown when Logo type is Image (uses shop name if no image uploaded).
Logo width (desktop)	80 to 280 px, step 10	140 px	The picture always keeps its proportions: its height follows from this width and its own ratio, and the header grows to fit it, between the vertical paddings. It stops at 120px tall on desktop and 80px on mobile, where a wider setting makes it no larger. A narrow centre zone can also make it narrower. Shown when Logo type is Image (uses shop name if no image uploaded).
Logo width (mobile)	80 to 280 px, step 10	140 px	Shown when Logo type is Image (uses shop name if no image uploaded).
Logo link	Link	Empty	Defaults to the home page if empty.
Navigation
Menu	Menu	main-menu
Mobile menu
Mobile menu style	Sheet under header Drawer	Sheet under header	Sheet: the menu hangs under the header card. Drawer: a full height panel slides in from the side, with a backdrop, a close button, the page scroll locked and the focus kept inside.
Product menu
Mega menu color scheme	Color scheme	Scheme 1
Mega menu surface	Match header Solid	Match header	Match header: the panel turns glass when the header is glass or transparent, and card and panel form one surface while the menu is open (see the opacity sliders). Solid: keep the opaque panel.
Surface opacity when the menu is open (desktop)	60 to 100%, step 2	92%	Applies to the Match header surface over a glass or transparent header. While a mega menu panel, the search panel or the mobile menu is open, the header card and the panel share one surface at this opacity, so nothing of the page reads through.
Surface opacity when the menu is open (mobile)	60 to 100%, step 2	92%
Follow the global corner radius	Checkbox	On	The mega menu panels, the search panel and the mobile menu sheet take the card radius from Theme settings, Corner style, like the floating header. Untick to set their radius here.
Panel corner radius (desktop)	0 to 40 px, step 2	20 px	Shown when Follow the global corner radius is off.
Panel corner radius (mobile)	0 to 40 px, step 2	16 px	Shown when Follow the global corner radius is off.
Show product tagline	Checkbox	On
Show a background behind the thumbnail	Checkbox	Off
Thumbnail background color	Color	`#F4F1EA`
Thumbnail size	40 to 72 px, step 2	52 px
Mega menu alignment (desktop)	Left Center Right	Center
Max thumbnail width (desktop)	120 to 320 px, step 10	220 px
Actions
Instagram URL	Link	Empty
Show cart icon	Checkbox	On
Search
Enable predictive search	Checkbox	On
Search placeholder	Text	Translated text	Leave empty to use the translated default.
Results per resource type	4 to 10, step 2	6
Show collections in results	Checkbox	On
Icons (cart and account)
Cart icon	Bag (rounded handle) Tote (two handles) Basket (cart) Classic bag	Bag (rounded handle)
Account icon	Bust (simple) Bust (circled) Head and shoulders	Bust (simple)
Customer account menu	Menu	customer-account-main-menu	Shown in the account component sheet. "customer-account-main-menu" keeps the links aligned with the customer account pages (Orders, Profile).
Icon size (desktop)	16 to 32 px, step 2	24 px
Icon size (mobile)	16 to 32 px, step 2	24 px
Stroke width (desktop, value / 10)	12 to 24, step 2	16	Actual stroke = value / 10 (e.g. 16 gives a 1.6 stroke).
Stroke width (mobile, value / 10)	12 to 24, step 2	16	Actual stroke = value / 10 (e.g. 16 gives a 1.6 stroke).
Layout
Sticky header	Checkbox	On
Header vertical padding (desktop)	8 to 40 px, step 2	20 px	Space above and below the header content. The header's height is this padding twice, plus the taller of the navigation row and the logo, so raising it makes the header taller without shrinking the logo.
Header vertical padding (mobile)	6 to 24 px	10 px
Header
Transparent header over the first section	Checkbox	Off	The header overlays the first section (compatible hero) and becomes transparent, then materializes on scroll. No effect if the first section does not carry the compatibility marker.
Transparent header color scheme	Color scheme	Scheme 1	Applied ONLY in the transparent state (before scrolling). Pick a light scheme (light text and icons) to stay legible over a dark hero. Shown when Transparent header over the first section is on.
Materialized surface	Solid (color scheme) Glass (frosted)	Solid (color scheme)	Header background when materialized: on scroll if transparent is enabled, or permanently otherwise. In both surfaces the text and icons take the text color of the header color scheme, and it never changes on its own. With Glass, pick a scheme whose text reads on the frost and on what scrolls under the header. At the top of the page, a transparent header keeps its own color scheme.
Floating header (detached)	Checkbox	Off	Detaches the header from the edges: top and side margins plus rounded corners (floating navigation bar).
Floating top margin (desktop)	0 to 40 px, step 2	16 px	Shown when Floating header (detached) is on.
Floating top margin (mobile)	0 to 32 px, step 2	12 px	Shown when Floating header (detached) is on.
Floating side margins (desktop)	0 to 48 px, step 2	16 px	Shown when Floating header (detached) is on.
Floating side margins (mobile)	0 to 32 px, step 2	10 px	Shown when Floating header (detached) is on.
Floating corner radius (desktop)	0 to 40 px, step 2	20 px	Capped by the global corner radius (Theme settings, Corner style). Shown when Floating header (detached) is on.
Floating corner radius (mobile)	0 to 32 px, step 2	16 px	Capped by the global corner radius (Theme settings, Corner style). Shown when Floating header (detached) is on.
Colors
Color scheme	Color scheme	Scheme 1

This section holds Mega menu blocks.

WhereFooter group only.

The footer is a row of blocks: Brand / logo, Link column (one of your menus), Newsletter, Social (Instagram and the Follow on Shop button), Text and Localization (country or currency, and language selectors, shown only when there is more than one choice). Each block sets its own width and margins for desktop and mobile.

An optional Top decorative band draws a curve, a wave, a diagonal or your own image where the footer meets the section above. The Copyright bar at the bottom can take its own color scheme. Newsletter sign ups are added to your Shopify customers, with the tag you choose.

Typical use. Logo and tagline on the left, Shop and Help link columns, a newsletter block, and a localization block for a store that sells in several countries.

Section settings (19)

Setting	Values	Default	Notes
Top decorative band
Show top decorative band	Checkbox	On	Turn off for a straight edge between the footer and the section above.
Shape	None Simple curve Wave Diagonal Rounded concave Rounded convex Custom image	Simple curve	Shown when Show top decorative band is on.
Custom image	Image	Empty	Stretched to the band's full width and height, like the built-in shapes. Shown when Show top decorative band is on and Shape is Custom image.
Shape color	Color	None	Leave empty to follow the footer background, so the transition stays invisible. Shown when Show top decorative band is on and Shape is not None and Shape is not Custom image.
Flip shape vertically	Checkbox	Off	Shown when Show top decorative band is on and Shape is not None.
Band height (desktop)	0 to 120 px, step 4	0 px	0 keeps the automatic height that adapts to the viewport. Shown when Show top decorative band is on and Shape is not None.
Band height (mobile)	0 to 80 px, step 4	0 px	0 keeps the automatic height that adapts to the viewport. Shown when Show top decorative band is on and Shape is not None.
Copyright bar
Show copyright bar at bottom	Checkbox	On
Copyright text	Text	Empty
Vertical padding (desktop)	0 to 48 px, step 2	22 px	Shown when Show copyright bar at bottom is on.
Vertical padding (mobile)	0 to 32 px, step 2	10 px	Shown when Show copyright bar at bottom is on.
Colors
Color scheme	Color scheme	Scheme 1
Copyright bar colors	Same as footer Custom scheme	Same as footer	Shown when Show copyright bar at bottom is on.
Copyright bar color scheme	Color scheme	Scheme 2	Shown when Show copyright bar at bottom is on and Copyright bar colors is Custom scheme.
Spacing
Padding top (desktop)	0 to 120 px, step 2	56 px
Padding bottom (desktop)	0 to 120 px, step 2	56 px
Padding top (mobile)	0 to 120 px, step 2	50 px
Padding bottom (mobile)	0 to 120 px, step 2	50 px
Horizontal spacing between blocks	0 to 80 px, step 2	40 px

Your logo, or the store name when no logo is set, with an optional tagline.

Brand / logo block settings (8)

Setting	Values	Default	Notes
Logo image	Image	Empty	Falls back to the shop name if left empty.
Tagline (optional)	Text	Empty
Spacing
Width (desktop)	0 to 100%, step 5	25%
Width (mobile)	0 to 100%, step 5	100%
Margin top (desktop)	0 to 80 px, step 2	0 px
Margin top (mobile)	0 to 80 px, step 2	0 px
Margin bottom (desktop)	0 to 80 px, step 2	0 px
Margin bottom (mobile)	0 to 80 px, step 2	0 px

A heading and one of your menus.

Link column block settings (10)

Setting	Values	Default	Notes
Header	Text	SHOP
Menu	Menu	footer	Create a menu in Settings → Navigation and select it here. Shows placeholder links if empty.
Spacing
Width (desktop)	0 to 100%, step 5	15%
Width (mobile)	0 to 100%, step 5	30%
Title spacing (desktop)	0 to 40 px, step 2	4 px
Title spacing (mobile)	0 to 40 px, step 2	6 px
Margin top (desktop)	0 to 80 px, step 2	0 px
Margin top (mobile)	0 to 80 px, step 2	0 px
Margin bottom (desktop)	0 to 80 px, step 2	0 px
Margin bottom (mobile)	0 to 80 px, step 2	0 px

An email sign up field. Subscribers are added to your customers with the tag you set, which email apps such as Klaviyo or Mailchimp can read.

Newsletter block settings (15)

Setting	Values	Default	Notes
Label	Text	Translated text	Leave empty to use the translated default.
Input placeholder	Text	Translated text	Leave empty to use the translated default.
Customer tag for subscribers	Text	newsletter	Subscribers are added to the Shopify Customers list with this tag. Compatible with Klaviyo, Mailchimp, etc.
Spam protection notice
Shopify protects this form with hCaptcha and discloses it in one of two ways: the hCaptcha badge in the corner of the page, or this sentence under the form. Showing the sentence is what removes the badge, and hCaptcha requires the disclosure with its two links wherever its branding is hidden, so the notice cannot be turned off. Its wording and links come from Shopify, already translated, and Shopify only serves it where spam protection applies to the form: if no notice appears, bot protection is off for your store rather than missing from the theme. The settings below change only how it looks here.
Notice text size (desktop)	9 to 18 px	11 px
Notice text size (mobile)	9 to 18 px	11 px
Notice color	Color	None	None keeps the color this form was designed with, dimmed as it is today. Any other color is drawn at full opacity.
Notice alignment	Same as content Left Center Right	Same as content
Spacing
Width (desktop)	0 to 100%, step 5	25%
Width (mobile)	0 to 100%, step 5	100%
Title spacing (desktop)	0 to 40 px, step 2	4 px
Title spacing (mobile)	0 to 40 px, step 2	6 px
Margin top (desktop)	0 to 80 px, step 2	0 px
Margin top (mobile)	0 to 80 px, step 2	0 px
Margin bottom (desktop)	0 to 80 px, step 2	0 px
Margin bottom (mobile)	0 to 80 px, step 2	0 px

An Instagram icon and the Follow on Shop button, which Shopify shows only on stores that use the Shop sales channel.

Social block settings (8)

Setting	Values	Default	Notes
Instagram URL	Link	Empty	Leave blank to hide the icon.
Show the Follow on Shop button	Checkbox	On	Lets buyers follow your store in the Shop app. Shopify renders the button with its own branding, and only on stores that use the Shop sales channel.
Spacing
Width (desktop)	0 to 100%, step 5	15%
Width (mobile)	0 to 100%, step 5	100%
Margin top (desktop)	0 to 80 px, step 2	0 px
Margin top (mobile)	0 to 80 px, step 2	0 px
Margin bottom (desktop)	0 to 80 px, step 2	0 px
Margin bottom (mobile)	0 to 80 px, step 2	0 px

Block: Text

A heading and rich text, for an address or a short note.

Text block settings (10)

Setting	Values	Default
Heading	Text	Empty
Body	Rich text	Empty
Spacing
Width (desktop)	0 to 100%, step 5	30%
Width (mobile)	0 to 100%, step 5	100%
Title spacing (desktop)	0 to 40 px, step 2	4 px
Title spacing (mobile)	0 to 40 px, step 2	6 px
Margin top (desktop)	0 to 80 px, step 2	0 px
Margin top (mobile)	0 to 80 px, step 2	0 px
Margin bottom (desktop)	0 to 80 px, step 2	0 px
Margin bottom (mobile)	0 to 80 px, step 2	0 px

Country or currency, and language selectors. Each appears only when your markets and languages offer more than one choice.

Localization block settings (8)

Setting	Values	Default
Country/currency and language selectors (Shopify Markets). Each appears only when there's more than one option to choose from.
Show country / currency selector	Checkbox	On
Show language selector	Checkbox	On
Spacing
Width (desktop)	0 to 100%, step 5	20%
Width (mobile)	0 to 100%, step 5	100%
Margin top (desktop)	0 to 80 px, step 2	0 px
Margin top (mobile)	0 to 80 px, step 2	0 px
Margin bottom (desktop)	0 to 80 px, step 2	0 px
Margin bottom (mobile)	0 to 80 px, step 2	0 px

Hero and storytelling

Large visual sections, usually at the top of the home page or of a landing page.

Hero

WhereAny template. Not available in the header or footer group.

A full screen image or Shopify hosted video with a title and a button. Desktop and mobile each get their own image and video, cropped on the focal point you set in the admin. Video playback covers autoplay per device, a sound button, what happens at the end (loop, stop, or show the cover again), the style and position of the controls, and what shows while the video loads, using the loader from Theme settings.

The text block is placed separately on desktop and mobile, with a fine vertical offset, over an optional darkening overlay. Height mode fits the screen, adapts to the content or takes a custom height.

Typical use. The first section of the home page: a short muted video of the product in use, a two line title, one Shop now button, and the header transparent over it.

Section settings (38)

Setting	Values	Default	Notes
Media
Media type	Image Video	Image
Hero image (overrides bundled default)	Image	Empty	The crop follows the focal point set on the image. In Video mode, this image is the cover shown until the video plays, and the video keeps the same crop.
Hero image (mobile)	Image	Empty	Optional. Shown below 768px, cropped on its own focal point, in Image and Video modes. When empty, the image above is used.
Shopify-hosted video	Shopify-hosted video	Empty	Without an image above, the video's preview image is the cover. Shown when Media type is Video.
Shopify-hosted video (mobile)	Shopify-hosted video	Empty	Optional. Shown below 768px. When empty, the desktop video is used. Shown when Media type is Video.
Video playback
Autoplay (desktop)	Checkbox	On	Shown when Media type is Video.
Autoplay (mobile)	Checkbox	On	Off: the cover stays with a play button in the center, and the video starts on click. Visitors who ask for reduced motion never get autoplay. Shown when Media type is Video.
Sound	Always muted Sound button	Always muted	Browsers block autoplay with sound, so an autoplaying video always starts muted: the sound button lets visitors turn it on. A video started by a click plays with sound. Shown when Media type is Video.
When the video ends	Loop Stop on the last frame Show the cover image	Loop	Shown when Media type is Video.
Controls style (desktop)	Always visible Minimal Hidden	Always visible	Minimal: small and translucent, fully visible on hover and keyboard focus, and always visible on touch screens. Hidden: nothing on screen, a click or tap on the video pauses and resumes it, and the pause button appears on keyboard focus, because a video that plays on its own must stay pausable (WCAG 2.2.2). The sound button, when used, stays visible. Shown when Media type is Video.
Controls style (mobile)	Always visible Minimal Hidden	Always visible	Shown when Media type is Video.
Controls position (desktop)	Bottom right Bottom left Bottom center	Bottom right	The controls never cover the text or the button: when they would touch, they move up above them. Shown when Media type is Video.
Controls position (mobile)	Bottom right Bottom left Bottom center	Bottom right	Shown when Media type is Video.
While the video loads	Cover image, then fade Cover image with a loader Blurred cover with a loader Loader only	Cover image, then fade	The loader is set in Theme settings, Loader. Loader only shows the color scheme background and the loader until the video plays; the cover image still shows whenever the video cannot start on its own (autoplay off or refused, reduced motion). The other styles paint the cover first, and Cover image, then fade is the lightest. Shown when Media type is Video.
Start loading the video	After the page has loaded As soon as possible	After the page has loaded	After the page has loaded is recommended for speed: the video never competes with the cover, fonts and scripts. As soon as possible starts the download once the hero is on screen, so the video appears sooner but the rest of the page can load slower on mobile networks. Shown when Media type is Video.
Text
Title	Multi-line text	YOUR HEADLINE HERE
Heading level	Main heading (H1) Subheading (H2) Subheading (H3)	Subheading (H2)	A page should have exactly one main heading. The templates that open with this section set it to H1; keep H2 anywhere else.
Color scheme	Color scheme	Scheme 2
Content placement (desktop)
Vertical position	Top Center Bottom	Center
Horizontal alignment	Left Center Right	Left
Fine vertical offset	-120 to 120 px, step 4	0 px	Negative moves the block up, positive moves it down.
Content placement (mobile)
Vertical position	Top Center Bottom	Top
Horizontal alignment	Left Center Right	Center
Fine vertical offset	-120 to 120 px, step 4	-16 px	Negative moves the block up, positive moves it down. The negative default lifts the block above the character.
Button
Button label	Text	Shop now
Button link	Link	Empty	Leave blank for a placeholder (#).
Button style	Default (solid) Glass	Default (solid)	Glass uses the global Glass effect (Theme settings). Keeps the button text color, so check contrast over the hero image.
Button background (hover)	Color	`#F7F7F6`
Button text color (hover)	Color	`#000000`
Overlay (optional darkening)
Overlay opacity	0 to 80%, step 5	0%	Darken the image for better text contrast. The bundled default image has natural contrast; keep at 0% unless you upload an image with poor contrast.
Overlay color	Color	`#000000`
Layout
Height mode (desktop)	Fit screen Adapt to content Custom height	Fit screen
Custom height (desktop)	80 to 100%, step 5	100%	Percentage of viewport height (uses dvh for accurate sizing on mobile with browser bars). Shown when Height mode (desktop) is Custom height.
Height mode (mobile)	Fit screen Adapt to content Custom height	Fit screen
Custom height (mobile)	40 to 100 dvh, step 5	100 dvh	Shown when Height mode (mobile) is Custom height.
Transparent header
Allow transparent header	Checkbox	Off	When this section is first on the page and the header's 'Transparent header over the first section' setting is on, the header overlays this section and starts transparent.
Transparent header top padding (desktop)	0 to 160 px, step 4	0 px	Extra top padding applied only while the transparent header overlays this section. 0 = unchanged.
Transparent header top padding (mobile)	0 to 120 px, step 4	0 px

Slideshow

WhereAny template. Not available in the header or footer group.

A carousel of Slide blocks. Each slide has its own desktop and mobile image, color scheme and overlay, a heading and subtext placed in one of nine positions, and up to two buttons in Solid, Outline or Glass style. Slides change on their own or on demand, with a slide or fade transition, arrows and dots.

Typical use. Two to four campaigns at the top of the home page: a new product, a seasonal collection and a bundle offer.

Section settings (33)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
More settings
Carousel accessibility label	Text	Translated text	Leave empty to use the translated default.
Height
Slide height	Adapt (60vh minimum) Full screen Custom	Adapt (60vh minimum)
Custom height (desktop)	400 to 900 px, step 20	600 px
Custom height (mobile)	300 to 800 px, step 20	480 px
Behavior
Autoplay	Checkbox	Off
Autoplay delay	3 to 10 s	5 s
Transition	Slide Fade	Slide
Show arrows (desktop)	Checkbox	On
Show arrows (mobile)	Checkbox	On	Turn off on a phone to give the slide text the full width; swipe and the dots still change slide.
Show dots	Checkbox	On
Transparent header
Allow transparent header	Checkbox	Off	When this section is first on the page and the header's 'Transparent header over the first section' setting is on, the header overlays this section and starts transparent.
Space under a transparent header (desktop)	0 to 160 px, step 4	0 px	Text, buttons and arrows already stay below the announcement bar and the header on their own, while the media runs behind them. This sets a minimum distance from the top of the section to the content, used only when it is larger than that automatic clearance. 0 = automatic only.
Space under a transparent header (mobile)	0 to 120 px, step 4	0 px
Spacing
Top padding (desktop)	0 to 160 px, step 4	0 px
Bottom padding (desktop)	0 to 160 px, step 4	0 px
Top padding (mobile)	0 to 120 px, step 4	0 px
Bottom padding (mobile)	0 to 120 px, step 4	0 px

Block: Slide

One slide: images, overlay, heading, subtext, content position and up to two buttons.

Slide block settings (15)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Image (desktop)	Image	Empty
Image (mobile)	Image	Empty	Falls back to the desktop image.
Overlay opacity	0 to 90%, step 5	20%
Content
Heading	Text	Tell your story
Heading size (desktop)	24 to 96 px, step 4	52 px
Heading size (mobile)	20 to 64 px, step 4	32 px
Subtext	Text	Empty
Content position	Top left Top center Top right Middle left Middle center Middle right Bottom left Bottom center Bottom right	Middle center
Buttons
First button label	Text	Empty
First button link	Link	Empty
First button style	Solid Outline Glass	Solid
Second button label	Text	Empty
Second button link	Link	Empty
Second button style	Solid Outline Glass	Outline

Products showcase

WhereAny template. Not available in the header or footer group.

Full screen product Spotlight blocks that take over the screen one after another. On desktop a scroll pinned wipe reveals the next product as the visitor scrolls, progressively or with a snap and a pause; phones get the same animation with a layout of their own, or a simple vertical stack. When animations are off, or the visitor asks for reduced motion, spotlights stack. The animation library loads only when the section comes near the screen.

Each spotlight carries a name, a tagline, a media image, a Shop now button, highlights (a title and up to four claims with icons), an optional featured set cartouche, a two color gradient and a watermark. Section settings share the media sizing and texts across every spotlight, and can hide the header while the section holds the screen.

Typical use. Presenting a small range, three to five products, one by one on the home page or on the Products page template.

Section settings (29)

Setting	Values	Default	Notes
Header
Hide the header during this section (desktop)	Checkbox	On	The header slides up while the section holds the screen, and comes back as soon as the section is left, in either direction. Uncheck to keep the header visible throughout.
Hide the header during this section (mobile)	Checkbox	On	Same choice for phones and small tablets, made separately because a masked header costs more on a small screen.
Layout and animation
Enable scroll-pinned wipe	Checkbox	On	When off, slides stack vertically and the page scrolls normally.
Scroll per transition (wipe)	50 to 200%, step 10	100%	Scroll distance consumed by each wipe transition between spotlights (% of viewport height).
Hold per spotlight (dwell)	0 to 200%, step 10	50%	Scroll distance each spotlight stays fully visible before the next wipe starts. 0 = continuous wipe (no pause).
Wipe direction	Bottom to top (new slide rises) Top to bottom (new slide descends)	Bottom to top (new slide rises)
Mobile behavior	Pin enabled (wipe animation, same as desktop) Disable pin, stack vertically	Pin enabled (wipe animation, same as desktop)	Mobile uses the same wipe animation with a dedicated mobile layout (badge left of media, claims vertical right). Switch to stack if pinning feels janky on real devices (iOS Safari URL bar can disrupt the pin scroll).
Scroll mode (desktop)	Progressive (scrub on scroll) Snap with dwell	Progressive (scrub on scroll)
Scroll mode (mobile)	Progressive (scrub on scroll) Snap with dwell	Snap with dwell
Snap dwell (pause between spotlights)	0 to 3000 ms, step 100	800 ms
Shared text (used on every slide)
Ingredients (one per line)	Multi-line text	Empty
Subtitle (size)	Text	Empty
Media · Size and position (all spotlights)
Default media sizing for every spotlight. A spotlight can override these in its own block (Media group). Oversized media is clipped at the slide's edges and never causes sideways scrolling.
Media size (desktop, scale %)	40 to 220%, step 5	100%
Media vertical align (desktop)	Top Center Bottom	Center
Media horizontal offset (desktop)	-120 to 120 px, step 4	0 px
Media vertical offset (desktop)	-120 to 120 px, step 4	0 px
Media size (mobile, scale %)	40 to 220%, step 5	100%
Media vertical align (mobile)	Top Center Bottom	Center
Media horizontal offset (mobile)	-120 to 120 px, step 4	0 px
Media vertical offset (mobile)	-120 to 120 px, step 4	0 px
Decorative assets
Badge image (spins)	Image	Empty
Colors
Text color on slides	Color	`#FFFFFF`
Transparent header
Allow transparent header	Checkbox	Off	When this section is first on the page and the header's 'Transparent header over the first section' setting is on, the header overlays this section and starts transparent.
Space under a transparent header (desktop)	0 to 160 px, step 4	0 px	Text, buttons and arrows already stay below the announcement bar and the header on their own, while the media runs behind them. This sets a minimum distance from the top of the section to the content, used only when it is larger than that automatic clearance. 0 = automatic only.
Space under a transparent header (mobile)	0 to 120 px, step 4	0 px
Spacing
Top padding (desktop)	0 to 160 px, step 4	0 px
Bottom padding (desktop)	0 to 160 px, step 4	0 px
Top padding (mobile)	0 to 120 px, step 4	0 px
Bottom padding (mobile)	0 to 120 px, step 4	0 px

Block: Spotlight

One product spotlight: content, media, the Shop now button, highlights, the featured set cartouche, colors and watermark.

Spotlight block settings (74)

Setting	Values	Default	Notes
Hiding the header while this section holds the screen is set once for the whole section, in the Header group at the top of the section settings.
Content
Name	Text	Title
Title link (optional)	Link	Empty	If set, the spotlight title becomes clickable. Leave empty for a non-clickable title.
Tagline	Text	Add a short description.
Media image (overrides bundled default)	Image	Empty
Default media asset filename	Text	Empty	Used when no image is uploaded. Filename of an image present in the theme's /assets folder.
Media · Size and position (this spotlight)
Sizes and positions THIS spotlight's media image, replacing the section's 'Media · Size and position' defaults. Oversized media is clipped at the slide's edges and never causes sideways scrolling.
Use custom media size and position	Checkbox	Off	When unchecked this slide uses the section's media settings.
Media size (desktop, scale %)	40 to 220%, step 5	100%	Shown when Use custom media size and position is on.
Media vertical align (desktop)	Top Center Bottom	Center	Shown when Use custom media size and position is on.
Media horizontal offset (desktop)	-120 to 120 px, step 4	0 px	Shown when Use custom media size and position is on.
Media vertical offset (desktop)	-120 to 120 px, step 4	0 px	Shown when Use custom media size and position is on.
Media size (mobile, scale %)	40 to 220%, step 5	100%	Shown when Use custom media size and position is on.
Media vertical align (mobile)	Top Center Bottom	Center	Shown when Use custom media size and position is on.
Media horizontal offset (mobile)	-120 to 120 px, step 4	0 px	Shown when Use custom media size and position is on.
Media vertical offset (mobile)	-120 to 120 px, step 4	0 px	Shown when Use custom media size and position is on.
Button · Shop now
Product (button link)	Product	Empty
Or custom URL	Link	Empty	Used only if no product is selected above.
Style	Solid (filled) Outline Glassmorphism (frosted)	Solid (filled)	Glassmorphism uses the same frosted-glass recipe as the newsletter popup.
Background color	Color	None	Empty = white (Solid), transparent (Outline), frosted white (Glass).
Text color	Color	None	Empty = the spotlight accent color (Solid) or the slides' text color (Outline and Glass).
Border color	Color	None	Empty = text color (Outline) or frosted white (Glass). Shown when Style is not Solid (filled).
Text size (desktop)	14 to 48 px, step 2	26 px	At the default value the text keeps its original automatic responsive size.
Text size (mobile)	12 to 40 px, step 2	20 px
Width (desktop)	Auto (fit the column) Full column width	Auto (fit the column)
Width (mobile)	Auto Full width	Auto
Alignment (desktop)	Left Center Right	Left	Moves the button's axis in the right column; the claims row and the size subtitle follow it.
Alignment (mobile)	Left Center Right	Center
Corner radius	0 to 60 px, step 5	55 px	Capped by the global corner setting (Theme settings → Corner style).
Highlights · Title
Title	Multi-line text	Highlights	Press Enter to force a line break (multi-line titles supported).
Title size (desktop)	14 to 60 px, step 2	30 px	At the default value the title keeps its original automatic responsive size.
Title size (mobile)	10 to 40 px, step 2	20 px	At the default value the title keeps its original automatic responsive size.
Highlights · Claims
Number of claims	0 (title only) 1 2 3 4	4	A claim with no icon and no text is hidden too.
Claim 1 icon	Image	Empty	Shown when Number of claims is not 0 (title only).
Claim 1 text	Multi-line text	Your highlight	Press Enter to force a line break. Leave on one line to wrap automatically. Shown when Number of claims is not 0 (title only).
Claim 2 icon	Image	Empty	Shown when Number of claims is not 0 (title only) and Number of claims is not 1.
Claim 2 text	Multi-line text	Your highlight	Press Enter to force a line break. Leave on one line to wrap automatically. Shown when Number of claims is not 0 (title only) and Number of claims is not 1.
Claim 3 icon	Image	Empty	Shown when Number of claims is 3 or Number of claims is 4.
Claim 3 text	Multi-line text	Your highlight	Press Enter to force a line break. Leave on one line to wrap automatically. Shown when Number of claims is 3 or Number of claims is 4.
Claim 4 icon	Image	Empty	Shown when Number of claims is 4.
Claim 4 text	Multi-line text	Your highlight	Press Enter to force a line break. Leave on one line to wrap automatically. Shown when Number of claims is 4.
Claim icon size (desktop)	24 to 96 px, step 2	48 px
Claim icon size (mobile)	20 to 80 px, step 2	50 px	At the default value the icons keep their original automatic responsive size.
Claims gap (desktop)	0 to 48 px, step 2	18 px	At the default value the gap keeps its original automatic responsive size.
Claims gap (mobile)	0 to 48 px, step 2	22 px	At the default value the gap keeps its original automatic responsive size.
Highlights · Layout
Show highlights on	Desktop and mobile Desktop only Mobile only	Desktop and mobile
Placement (desktop)	Split: title under tagline, claims right Right column (title + claims) Under the tagline (title + claims) Bottom of slide (title + claims)	Split: title under tagline, claims right
Title and group alignment (desktop)	Left Center Right	Left
Claims row alignment (desktop)	Left Center Right	Center	How the claims row sits on the SHOP NOW button's axis when fewer than 4 claims are active. Shown when Placement (desktop) is Split: title under tagline, claims right.
Placement (mobile)	Split: title bottom, claims right strip Right strip (title + claims) Bottom group (title + claims)	Split: title bottom, claims right strip
Title and group alignment (mobile)	Left Center Right	Center
Featured set
Show featured-set cartouche	Checkbox	On	Shows the featured-set badge on this spotlight's slide. Static (no show/hide animation).
Show cartouche on	Desktop only Mobile only Desktop and mobile	Desktop only	Shown when Show featured-set cartouche is on.
Cartouche position	Bottom left Bottom right	Bottom left	Shown when Show featured-set cartouche is on.
Cartouche link	Link	Empty	Where the cartouche links to. Defaults to /collections/all when left empty. Shown when Show featured-set cartouche is on.
Cartouche thumbnail	Image	Empty	Shown when Show featured-set cartouche is on.
Cartouche small text	Multi-line text	Browse the collection	Shown when Show featured-set cartouche is on.
Cartouche title	Text	Featured set	Shown when Show featured-set cartouche is on.
Colors and visibility
Gradient color 1 (brighter, bottom-right)	Color	`#73726F`
Gradient color 2 (deeper, top-left)	Color	`#1A1A1A`
Accent color (SHOP NOW text)	Color	`#1A1A1A`
Show on	Desktop and mobile Desktop only Mobile only	Desktop and mobile	A spotlight hidden on a device neither appears nor counts in that device's scroll animation / stack.
Watermark
Type	None Text Image	None
Text	Text	Empty	Shown when Type is Text.
Long text	Clip Wrap Shrink to fit	Wrap	Shown when Type is Text.
Text color	Color	`#1A1A1A`	Shown when Type is Text.
Image	Image	Empty	Shown when Type is Image.
Orientation	Horizontal Vertical	Horizontal	Shown when Type is not None.
Vertical direction	Upward Downward	Downward	Shown when Type is not None and Orientation is Vertical.
Opacity	0 to 100%, step 5	100%	Shown when Type is not None.
Watermark size (desktop)	10 to 200%, step 5	100%	Shown when Type is not None.
Horizontal position (desktop)	Left Center Right	Center	Shown when Type is not None.
Vertical position (desktop)	Top Center Bottom	Center	Shown when Type is not None.
Watermark size (mobile)	10 to 200%, step 5	100%	Shown when Type is not None.
Horizontal position (mobile)	Left Center Right	Center	Shown when Type is not None.
Vertical position (mobile)	Top Center Bottom	Center	Shown when Type is not None.

Featured set

WhereAny template. Not available in the header or footer group.

One product, usually a bundle or a discovery set, presented as a full width banner: a heading, two taglines and an add to cart button. The background is your own desktop and mobile image, or the product image when none is set, darkened by an optional overlay. Until a product is picked, the section shows a placeholder in the editor.

Typical use. Promoting a discovery set at the top of the Products page template (page.products), which opens with this section.

Section settings (13)

Setting	Values	Default	Notes
Featured set product	Product	Empty
Text
Heading	Text	Featured set
Heading level	Main heading (H1) Subheading (H2) Subheading (H3)	Subheading (H2)	A page should have exactly one main heading. The templates that open with this section set it to H1; keep H2 anywhere else.
Tagline (top, stays near title)	Text	Browse the collection
Tagline (bottom, near button on mobile)	Text	See all products
Button label	Text	Translated text	Leave empty to use the translated default.
Background images
Background (desktop)	Image	Empty	Optional. When empty, the featured product's own image is shown instead.
Background (mobile)	Image	Empty	Optional. When empty, the desktop background is used.
Show the product image	Checkbox	On	Shown when no background image is set. Uncheck for a plain colored background. Shown when Background (desktop) is empty and Background (mobile) is empty.
Colors
Color scheme	Color scheme	Scheme 2	Sets the background, the text and the button colors.
Background color	Color	None	Optional. Overrides the color scheme background.
Overlay opacity	0 to 80%, step 5	0%	Darkens the background image or the product image, to keep the text readable.
Overlay color	Color	`#000000`

This section accepts app blocks.

Image with text

WhereAny template. Not available in the header or footer group.

An image beside a content column you build from theme blocks: headings, text, buttons, images, spacers and custom Liquid. Choose the image side on desktop, the order on mobile, the image width and ratio, and the gap. Translucent card (glass) lets the content card overlap the image on desktop.

Typical use. Telling the brand story or explaining one product benefit, with a photo, a heading, two short paragraphs and a button.

Section settings (38)

Setting	Values	Default	Notes
Image	Image	Empty	The focal point set on the image is respected when cropping.
Layout
Image position (desktop)	Left Right	Left
Order (mobile)	Image before text Text before image	Image before text
Image width (desktop)	30 to 70%, step 5	50%
Width	Contained Full width	Contained
Image / text gap (desktop)	0 to 96 px, step 4	48 px
Image / text gap (mobile)	0 to 48 px, step 4	24 px
Image
Ratio	Original (never crops) Square (1:1) Landscape (4:3) Landscape (3:2) Wide (16:9) Portrait (3:4)	Original (never crops)
Fit (when a ratio is set)	Fill (crops) Contain (never crops)	Fill (crops)
Minimum height (desktop)	0 to 800 px, step 20	0 px
Minimum height (mobile)	0 to 600 px, step 20	0 px
Corner radius	0 to 48 px, step 4	16 px	Capped by the global corner setting (Theme settings → Corner style).
Glass style
Translucent card (glass)	Checkbox	Off	The content card overlaps the image on desktop. Recommended with light text (a dark scheme).
Inner panel color	Color	`#000000`	Shown when Translucent card (glass) is on.
Inner panel opacity	0 to 100%, step 5	25%	Shown when Translucent card (glass) is on.
Overlap (desktop)	0 to 120 px, step 8	64 px
Content
Content inner padding (desktop)	0 to 80 px, step 4	32 px
Content inner padding (mobile)	0 to 48 px, step 4	20 px
Section
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
More settings
Top padding (desktop)	0 to 160 px, step 4	64 px
Bottom padding (desktop)	0 to 160 px, step 4	64 px
Top padding (mobile)	0 to 120 px, step 4	40 px
Bottom padding (mobile)	0 to 120 px, step 4	40 px

This section accepts the theme blocks (Heading, Text, Button, Image, Spacer, Liquid).

Rich text

WhereAny template. Not available in the header or footer group.

A single column of theme blocks (headings, text, buttons, images, spacers, custom Liquid) in a narrow, normal or wide measure, aligned separately on desktop and mobile. Background set to Transparent lets the section sit on the page without its own fill.

Typical use. A brand statement between two visual sections, or an introduction paragraph at the top of a landing page.

Section settings (26)

Setting	Values	Default
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
More settings
Background	Scheme color Transparent	Scheme color
Content width	Narrow (560px) Normal (800px) Wide (1100px)	Normal (800px)
Content alignment (desktop)	Left, center or right	Center
Content alignment (mobile)	Left, center or right	Center
Inner padding (desktop)	0 to 80 px, step 4	20 px
Inner padding (mobile)	0 to 80 px, step 4	20 px
Top padding (desktop)	0 to 160 px, step 4	64 px
Bottom padding (desktop)	0 to 160 px, step 4	64 px
Top padding (mobile)	0 to 120 px, step 4	40 px
Bottom padding (mobile)	0 to 120 px, step 4	40 px

This section accepts the theme blocks (Heading, Text, Button, Image, Spacer, Liquid).

Video

WhereAny template. Not available in the header or footer group.

A video from Shopify (uploaded in the admin) or from YouTube or Vimeo, with its own mobile source. External videos load as a click to play cover: nothing from the third party loads before the click. Shopify videos can instead play muted on a loop with no controls. Choose the aspect ratio, full width or a maximum width, and an optional heading.

Typical use. A one minute brand film on the About page, or a muted loop of the product being prepared on the home page.

Section settings (37)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Content
Heading	Text	Empty
Heading size (desktop)	20 to 72 px, step 4	40 px
Heading size (mobile)	16 to 48 px, step 4	28 px
Video source
Shopify-hosted video	Shopify-hosted video	Empty	Takes priority over the external URL.
Shopify-hosted video (mobile)	Shopify-hosted video	Empty	Optional. Shown below 768px. When empty, the desktop video is used.
External video URL	YouTube or Vimeo URL	Empty	Loads as a click-to-play cover, nothing third-party before the click.
External video URL (mobile)	YouTube or Vimeo URL	Empty	Optional. Used below 768px. When empty, the desktop URL is used.
Custom cover image	Image	Empty	Used by both sources. When empty, the Shopify video preview or the YouTube thumbnail is used.
Autoplay muted loop (Shopify video only)	Checkbox	Off	Shopify-hosted video only. Plays muted, on a loop, with no controls. When off, the video gets a cover and a play button.
Start with sound	Checkbox	Off	External video only. Off means one click always starts playback: browsers only guarantee that for muted video, and the player offers its own unmute control. On, some browsers will ask for a second click. Shown when Shopify-hosted video is empty and Shopify-hosted video (mobile) is empty.
Layout
Aspect ratio	Wide (16:9) Vertical (9:16) Classic (4:3) Adapt to video	Wide (16:9)
Full width	Checkbox	Off
Maximum width (desktop)	600 to 1400 px, step 40	1080 px
Width (mobile)	80 to 100%, step 2	100%
Spacing
Top padding (desktop)	0 to 160 px, step 4	64 px
Bottom padding (desktop)	0 to 160 px, step 4	64 px
Top padding (mobile)	0 to 120 px, step 4	40 px
Bottom padding (mobile)	0 to 120 px, step 4	40 px
Transparent header
Allow transparent header	Checkbox	Off	When this section is first on the page and the header's 'Transparent header over the first section' setting is on, the header overlays this section and starts transparent.
Space under a transparent header (desktop)	0 to 160 px, step 4	0 px	Text, buttons and arrows already stay below the announcement bar and the header on their own, while the media runs behind them. This sets a minimum distance from the top of the section to the content, used only when it is larger than that automatic clearance. 0 = automatic only.
Space under a transparent header (mobile)	0 to 120 px, step 4	0 px

Marquee

WhereAny template. Not available in the header or footer group.

A band of text that scrolls across the screen. Type one message per line; the separator you pick (a dot, a dash, your own text or a small image) is inserted between them automatically. Set the speed, the direction and the height, and keep the pause button on: accessibility guidelines ask for one on any animation that runs by itself.

Typical use. Short claims between two sections, such as Free delivery from 40 euros, Vegan, Made in France.

Section settings (33)

Setting	Values	Default	Notes
Messages	Multi-line text	Your message one Your message two Your message three	One message per line. The separator chosen below is inserted automatically between messages, and where the loop repeats. Do not type separators.
Animation speed (seconds per cycle)	10 to 120 s, step 5	30 s	Lower = faster scroll.
Direction	Scroll left Scroll right	Scroll left
Show a pause button	Checkbox	On	Lets visitors stop the moving text, as accessibility guidelines require for any animation that runs on its own.
Separator
Separator	Dot Dash Custom text Image	Dot	Inserted after every message, so it also fills the join where the scroll loops.
Separator text	Text	/	Shown when Separator is Custom text.
Separator image	Image	Empty	Small logo or icon. Falls back to the dot while empty. Shown when Separator is Image.
Separator image height (desktop)	8 to 80 px, step 2	32 px	Shown when Separator is Image.
Separator image height (mobile)	6 to 48 px, step 2	18 px	Shown when Separator is Image.
Style
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Size
Font size (desktop)	16 to 60 px, step 2	40 px
Font size (mobile)	12 to 40 px, step 2	24 px
Height (desktop)	40 to 160 px, step 4	88 px
Height (mobile)	24 to 100 px, step 2	46 px
Spacing
Top padding (desktop)	0 to 160 px, step 4	0 px
Bottom padding (desktop)	0 to 160 px, step 4	0 px
Top padding (mobile)	0 to 120 px, step 4	0 px
Bottom padding (mobile)	0 to 120 px, step 4	0 px

Before and after

WhereAny template. Not available in the header or footer group.

Two images stacked on top of each other with a handle the visitor drags to compare them, horizontally or vertically. Add labels, a starting position, a round handle or a plain line, a heading and text. The handle also works from the keyboard, through a slider.

Typical use. Showing the result of a product: a surface before and after cleaning, skin before and after four weeks, a room before and after.

Section settings (35)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Content
Heading	Text	Empty
Text	Rich text	Empty
Content alignment	Left Center	Center
Images
Before image	Image	Empty
After image	Image	Empty
Before image (mobile)	Image	Empty	Optional. The desktop image is used when empty.
After image (mobile)	Image	Empty	Optional. The desktop image is used when empty.
The focal point set on each image in the admin is respected on both sides.
Before label	Text	Before
After label	Text	After
Slider
Starting position	10 to 90%, step 5	50%	Share of the after image shown at first.
Orientation	Horizontal Vertical	Horizontal
Handle style	Round handle Line	Round handle
Layout
Width	Contained Full width	Contained
Image ratio	Landscape (16:9) Landscape (3:2) Landscape (4:3) Square (1:1) Portrait (4:5)	Landscape (3:2)
Image ratio (mobile)	Same as desktop Landscape (4:3) Square (1:1) Portrait (4:5)	Same as desktop
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Spacing
Top padding (desktop)	0 to 160 px, step 4	64 px
Bottom padding (desktop)	0 to 160 px, step 4	64 px
Top padding (mobile)	0 to 120 px, step 4	40 px
Bottom padding (mobile)	0 to 120 px, step 4	40 px

Lifestyle strip

WhereAny template. Not available in the header or footer group.

Two photos side by side that form one rounded card, stacked on phones. Set the gap, the corner radius and the photo ratio for desktop and mobile, and describe each photo with its own alt text.

Typical use. Lifestyle photography between product sections: the product on a breakfast table next to a close up of its texture.

Section settings (27)

Setting	Values	Default	Notes
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Left photo
Left image	Image	Empty
Alt text (left)	Text	Empty
Right photo
Right image	Image	Empty
Alt text (right)	Text	Empty
Layout
Gap between photos	0 to 60 px, step 2	0 px
Corner radius	0 to 60 px	25 px	Capped by the global corner setting (Theme settings → Corner style).
Photo ratio (desktop, width/height)	0.5 to 1.6, step 0.1	0.8
Photo ratio (mobile, width/height)	0.5 to 1.6, step 0.1	0.8
Vertical spacing
Top padding (px)	0 to 200 px, step 4	40 px
Bottom padding (px)	0 to 200 px, step 4	40 px
Top padding (mobile)	0 to 200 px, step 4	40 px
Bottom padding (mobile)	0 to 200 px, step 4	40 px

Products and collections

Sections that show products or collections and let shoppers buy from them.

Featured collection

WhereAny template. Not available in the header or footer group.

A grid of products from one collection, with the full product card: second image on hover, quick add, quick view, badges, vendor and a button. Promo tile blocks take the place of a card at the position you choose, and a View all button can link to the collection.

Typical use. Best sellers on the home page: four products, quick add on, a promo tile in third position and a View all button.

Section settings (55)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Content
Heading	Text	Featured collection
Heading size (desktop)	20 to 72 px, step 4	40 px
Heading size (mobile)	16 to 48 px, step 4	28 px
Collection	Collection	Empty
Maximum products	2 to 12	4
Layout
Columns (desktop)	2 to 5	4
Columns (mobile)	1 2	2
Card gap (desktop)	8 to 80 px, step 4	32 px
Card gap (mobile)	8 to 48 px, step 4	16 px
Cards
Image ratio	Square (1:1) Landscape (4:3) Portrait (3:4) Original	Square (1:1)
Image fit	Contain (never crops) Fill (crops)	Contain (never crops)
Show vendor	Checkbox	Off
Second image on hover	Checkbox	Off
Quick add	Off Single-variant products All products	All products	Single-variant products get a one-click add to cart on the card. All products also opens an option picker for products with variants. The cart drawer opens either way.
Quick add label	Text	Translated text	Label of the quick add button. Products with variants say Choose options, pre-order variants use the label from Theme settings, Pre-order. Leave empty to use the translated default.
Quick view	Off Button on hover Icon	Off	Opens the product in a modal. The button shows on hover, and always on touch screens. Content and card style are in Theme settings, Quick view.
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.
Card button label	Text	Translated text	Leave empty to use the translated default.
Element order	Title, then price Price, then title	Title, then price
Card title size (desktop)	16 to 44 px, step 2	26 px
Card title size (mobile)	14 to 32 px, step 2	18 px
Spacing inside card (desktop)	0 to 40 px, step 2	14 px
Spacing inside card (mobile)	0 to 32 px, step 2	10 px
Title to price spacing (desktop)	0 to 40 px, step 2	8 px
Title to price spacing (mobile)	0 to 32 px, step 2	6 px
Card button
Button text size (desktop)	10 to 28 px	14 px
Button text size (mobile)	10 to 24 px	13 px
Button vertical padding (desktop)	4 to 32 px	12 px
Button vertical padding (mobile)	4 to 28 px	11 px
Button horizontal padding (desktop)	8 to 60 px, step 2	26 px
Button horizontal padding (mobile)	8 to 48 px, step 2	22 px
View all button
Show the "View all" button	Checkbox	On
Button label	Text	Translated text	Leave empty to use the translated default.
Button style	Solid Outline Glass	Solid
Button alignment	Left Center Right	Center
Spacing
Top padding (desktop)	0 to 160 px, step 4	64 px
Bottom padding (desktop)	0 to 160 px, step 4	64 px
Top padding (mobile)	0 to 120 px, step 4	40 px
Bottom padding (mobile)	0 to 120 px, step 4	40 px

A tile that takes the place of a product card at the position you choose, on the first page of the grid only.

Promo tile block settings (11)

Setting	Values	Default	Notes
A tile that takes the place of a product card at the position below, on the first page of the grid only. With a link, the whole tile is clickable.
Image	Image	Empty
Image (mobile)	Image	Empty	Optional. Replaces the image on phones.
Heading	Text	Promo tile
Text	Multi-line text	Tell your visitors about an offer or a collection.
Button label	Text	Shop now
Link	Link	Empty	Makes the whole tile clickable. Screen readers hear the heading as the link name.
Color scheme	Color scheme	Scheme 2
Position in the grid	1 to 48	3	Rank of the tile among the cards. Beyond the last card, the tile closes the grid.
Width (desktop)	1 column 2 columns	1 column
Width (mobile)	1 column 2 columns	1 column
Text alignment	Left Center Right	Center

Collection list

WhereAny template. Not available in the header or footer group.

Cards for the collections you pick with Collection blocks, with their image, title and an optional product count. Set the columns, the gap, the image ratio and fit.

Typical use. A Shop by category row on the home page with three or four collections.

Section settings (32)

Setting	Values	Default
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Content
Heading	Text	Shop by collection
Heading size (desktop)	20 to 72 px, step 4	40 px
Heading size (mobile)	16 to 48 px, step 4	28 px
Layout
Columns (desktop)	2 to 5	3
Columns (mobile)	1 2	1
Card gap (desktop)	8 to 80 px, step 4	32 px
Card gap (mobile)	8 to 48 px, step 4	16 px
Cards
Image ratio	Square (1:1) Landscape (4:3) Portrait (3:4) Wide (16:9)	Landscape (4:3)
Image fit	Fill (crops) Contain (never crops)	Fill (crops)
Show product count	Checkbox	On
Card title size (desktop)	16 to 44 px, step 2	28 px
Card title size (mobile)	14 to 32 px, step 2	20 px
Spacing
Top padding (desktop)	0 to 160 px, step 4	64 px
Bottom padding (desktop)	0 to 160 px, step 4	64 px
Top padding (mobile)	0 to 120 px, step 4	40 px
Bottom padding (mobile)	0 to 120 px, step 4	40 px

Block: Collection

One collection card.

Collection block settings (1)

Setting	Values	Default	Notes
Collection	Collection	Empty

Lookbook

WhereAny template, and the header and footer groups.

An image with Hotspot blocks. Each hotspot points at a product or shows a text; on desktop it opens a popover with the product card and its quick add, on a phone a sheet from the bottom of the screen. The Image with product list layout lines the products up as cards beside the image, and hovering a card lights its hotspot. Hotspots have separate desktop and mobile positions.

Typical use. Shop the look: a styled photo of three products used together, each one clickable and addable to the cart.

Section settings (38)

Setting	Values	Default	Notes
An image with hotspots. Each Hotspot block points at a product or shows a text; the popover carries the product card with its quick add. On a phone a tap opens the same content as a sheet at the bottom of the screen.
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Content
Heading	Text	Shop the look
Text	Rich text	Empty
Heading size (desktop)	20 to 72 px, step 2	40 px
Heading size (mobile)	18 to 48 px, step 2	28 px
Image
Image	Image	Empty
Image (mobile)	Image	Empty	Optional. The desktop image is used when empty. Hotspots have their own mobile position.
The focal point set on each image in the admin is respected when the ratio crops it.
Image ratio	Adapt to image Portrait (4:5) Square (1:1) Wide (16:9)	Adapt to image
Width	Contained Full width	Contained
Layout
Layout	Image only Image with product list	Image only	The product list shows the products of the hotspots as cards next to the image. Hovering a card lights its hotspot, and hovering a hotspot lights its card.
Product list position	Right Left	Right	Shown when Layout is Image with product list.
Card image ratio	Square (1:1) Landscape (4:3) Portrait (3:4)	Square (1:1)	Shown when Layout is Image with product list.
Hotspots
Hotspot style	Pulsing Static	Pulsing
Hotspot size	16 to 48 px, step 2	28 px
Hotspot colors	Button colors Text on background Background on text	Button colors	The pair of colors taken from the color scheme.
Product cards
Quick add	Off Single-variant products All products	All products	Single-variant products get a one-click add to cart on the card. All products also opens an option picker for products with variants. The cart drawer opens either way.
Quick add label	Text	Translated text	Label of the quick add button. Products with variants say Choose options, pre-order variants use the label from Theme settings, Pre-order. Leave empty to use the translated default.
Quick view	Off Button on hover Icon	Off	Opens the product in a modal. The button shows on hover, and always on touch screens. Content and card style are in Theme settings, Quick view.
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.
Spacing
Top padding (desktop)	0 to 160 px, step 4	64 px
Bottom padding (desktop)	0 to 160 px, step 4	64 px
Top padding (mobile)	0 to 120 px, step 4	40 px
Bottom padding (mobile)	0 to 120 px, step 4	40 px

Block: Hotspot

One point on the image, linked to a product or carrying a text, with its desktop and mobile position.

Hotspot block settings (10)

Setting	Values	Default	Notes
Content	Product Text	Product
Product	Product	Empty	Used when Content is Product.
Heading	Text	Empty	Shown when Content is Text.
Text	Rich text	Empty	Shown when Content is Text.
Link label	Text	Empty	Shown when Content is Text.
Link	Link	Empty	Shown when Content is Text.
Position (desktop)
Horizontal position	0 to 100%	50%
Vertical position	0 to 100%	50%
Position (mobile)
Horizontal position	0 to 100%	50%
Vertical position	0 to 100%	50%
0% is the left or top edge of the image, 100% the right or bottom edge.

Compare products

WhereAny template, and the header and footer groups.

Up to five products side by side. Built in rows show the image, price, availability, vendor and rating; each Row block adds a line read from a product metafield, as text, a number with its unit, or yes and no. Highlight differences marks the rows where products differ. On a phone the label column stays in place while the product columns scroll.

Typical use. Comparing the three formulas of a range on their key facts: caffeine, sugar, serving size and whether they are vegan.

Section settings (34)

Setting	Values	Default	Notes
Up to 5 products side by side. Rows come from the settings below and from Row blocks, each reading a product metafield. Empty values show as n/a.
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Content
Heading	Text	Compare
Text	Rich text	Empty
Heading size (desktop)	20 to 72 px, step 2	40 px
Heading size (mobile)	18 to 48 px, step 2	28 px
Products	Product list	Empty	Up to 5 products. The section renders nothing on the storefront until at least one is picked.
Rows
Show product image	Checkbox	On
Show price	Checkbox	On
Show availability	Checkbox	On
Show vendor	Checkbox	Off
Show rating	Checkbox	On	Shown when at least one of the products has a rating from a reviews app (metafield reviews.rating).
Highlight differences	Checkbox	Off	Marks the rows whose values are not the same for every product.
Column width (mobile)	140 to 260 px, step 10	180 px	Minimum width of a product column on a phone. The label column stays in place while the product columns scroll.
Product cards
Quick add	Off Single-variant products All products	All products	Single-variant products get a one-click add to cart on the card. All products also opens an option picker for products with variants. The cart drawer opens either way.
Quick add label	Text	Translated text	Label of the quick add button. Products with variants say Choose options, pre-order variants use the label from Theme settings, Pre-order. Leave empty to use the translated default.
Spacing
Top padding (desktop)	0 to 160 px, step 4	64 px
Bottom padding (desktop)	0 to 160 px, step 4	64 px
Top padding (mobile)	0 to 120 px, step 4	40 px
Bottom padding (mobile)	0 to 120 px, step 4	40 px

Block: Row

One comparison line read from a product metafield. See Metafields.

Row block settings (4)

Setting	Values	Default	Notes
Label	Text	Feature
Product metafield	Text	Empty	namespace.key of a product metafield, for example specs.caffeine. Create it under Settings, Custom data, Products.
Value type	Text Number with unit Yes or no	Text
Unit	Text	Empty	Shown after the number, for example mg. Leave empty for a metafield type that already carries its unit (weight, volume, dimension). Shown when Value type is Number with unit.

Setting	Values	Default	Notes
The products the visitor opened, newest first, on any page. Takes no space until there is a history. The theme editor shows example cards instead.
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Content
Heading	Text	Translated text	Leave empty to use the translated default.
Heading size (desktop)	20 to 72 px, step 2	40 px
Heading size (mobile)	18 to 48 px, step 2	28 px
Maximum products	2 to 12	4
Exclude the current product	Checkbox	On	On a product page, the product being viewed is left out.
Layout
Columns (desktop)	2 to 6	4
Mobile layout	Grid, 1 column Grid, 2 columns Slider, 1 card per view Slider, 2 cards per view	Grid, 2 columns
Card gap (desktop)	8 to 80 px, step 4	32 px
Card gap (mobile)	8 to 48 px, step 4	16 px
Cards
Image ratio	Square (1:1) Landscape (4:3) Portrait (3:4) Original	Square (1:1)
Image fit	Contain (never crops) Fill (crops)	Contain (never crops)
Show vendor	Checkbox	Off
Second image on hover	Checkbox	Off
Quick add	Off Single-variant products All products	All products	Single-variant products get a one-click add to cart on the card. All products also opens an option picker for products with variants. The cart drawer opens either way.
Quick add label	Text	Translated text	Label of the quick add button. Products with variants say Choose options, pre-order variants use the label from Theme settings, Pre-order. Leave empty to use the translated default.
Quick view	Off Button on hover Icon	Off	Opens the product in a modal. The button shows on hover, and always on touch screens. Content and card style are in Theme settings, Quick view.
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.
Card button label	Text	Translated text	Leave empty to use the translated default.
Card title size (desktop)	16 to 44 px, step 2	26 px
Card title size (mobile)	14 to 32 px, step 2	18 px
Spacing
Top padding (desktop)	0 to 160 px, step 4	64 px
Bottom padding (desktop)	0 to 160 px, step 4	64 px
Top padding (mobile)	0 to 120 px, step 4	40 px
Bottom padding (mobile)	0 to 120 px, step 4	40 px

Trust and engagement

Reassurance, social proof and ways to stay in touch.

Multicolumn

WhereAny template. Not available in the header or footer group.

A row of Column blocks, each with an image (square, landscape, portrait or circle), a heading, text and a link, plus an optional button for the whole section. On phones the columns stack or become a horizontal slider.

Typical use. Three reasons to buy, or How it works in three steps, each with a small illustration.

Section settings (31)

Setting	Values	Default
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Content
Heading	Text	Empty
Heading size (desktop)	20 to 72 px, step 4	40 px
Heading size (mobile)	16 to 48 px, step 4	28 px
Content alignment	Left Center	Center
Layout
Columns (desktop)	2 to 6	3
Columns (mobile)	1 2	1
Mobile layout	Stacked columns Horizontal slider	Stacked columns
Column gap (desktop)	8 to 80 px, step 4	40 px
Column gap (mobile)	8 to 48 px, step 4	24 px
Section button
Button label	Text	Empty
Button link	Link	Empty
Spacing
Top padding (desktop)	0 to 160 px, step 4	64 px
Bottom padding (desktop)	0 to 160 px, step 4	64 px
Top padding (mobile)	0 to 120 px, step 4	40 px
Bottom padding (mobile)	0 to 120 px, step 4	40 px

Block: Column

One column: image, heading, text and link.

Column block settings (8)

Setting	Values	Default
Image	Image	Empty
Image width (desktop)	48 to 400 px, step 8	120 px
Image width (mobile)	40 to 240 px, step 8	88 px
Image ratio	Square (1:1) Landscape (4:3) Portrait (3:4) Circle	Square (1:1)
Heading	Text	Column heading
Text	Rich text	Pair text with an icon or image to highlight a benefit, ingredient...
Link label	Text	Empty
Link	Link	Empty

Testimonials

WhereAny template. Not available in the header or footer group.

Testimonial blocks with a quote, a star rating, an author, a role or source and an avatar, as a grid or a horizontal slider. The slider can rotate on its own; it pauses on hover and focus and stops for good once the visitor takes control. Cards are Solid, Outline or Glass.

Typical use. Five short customer quotes in a slider under the product showcase, or press quotes with the name of the publication as the source.

Section settings (35)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Content
Heading	Text	What people say
Heading size (desktop)	20 to 72 px, step 4	40 px
Heading size (mobile)	16 to 48 px, step 4	28 px
Layout
Desktop layout	Grid Horizontal slider	Grid	The slider scrolls with the arrows, a drag of the mouse, or a swipe. Grid is the default and stacks every card in view.
Columns (desktop)	1 to 4	3	Shown when Desktop layout is Grid.
Cards visible (desktop)	2 to 5	3	How many cards fill the track at once. The rest scroll into view. Shown when Desktop layout is Horizontal slider.
Columns (mobile)	1 2	1	Shown when Mobile layout is Stacked.
Mobile layout	Stacked Horizontal slider	Stacked
Show arrows (desktop)	Checkbox	On	Shown when Desktop layout is Horizontal slider.
Show arrows (mobile)	Checkbox	Off	Off by default on a phone, where the swipe gesture already scrolls the track and the arrows only cover the cards. Shown when Mobile layout is Horizontal slider.
Rotate automatically	Checkbox	Off	Pauses while the pointer is over the slider or a control inside it has keyboard focus, and stops for good as soon as a visitor scrolls, drags or uses an arrow. Visitors who ask their system for reduced motion never see it move. Shown when Desktop layout is Horizontal slider or Mobile layout is Horizontal slider.
Change every	2 to 10 s	5 s	Shown when Rotate automatically is on.
Card gap (desktop)	8 to 80 px, step 4	32 px
Card gap (mobile)	8 to 48 px, step 4	16 px
Card style	Solid Outline Glass	Solid
Spacing
Top padding (desktop)	0 to 160 px, step 4	64 px
Bottom padding (desktop)	0 to 160 px, step 4	64 px
Top padding (mobile)	0 to 120 px, step 4	40 px
Bottom padding (mobile)	0 to 120 px, step 4	40 px

Block: Testimonial

One testimonial card.

Testimonial block settings (5)

Setting	Values	Default
Quote	Rich text	Share what a happy customer said about your products or your brand.
Star rating (0 hides stars)	0 to 5	5
Author	Text	Customer name
Role or source	Text	Empty
Avatar	Image	Empty

Logo list

WhereAny template. Not available in the header or footer group.

A row of Logo blocks with an optional heading, shown still or scrolling as a marquee. Logos can be grayscale until hovered and can each link somewhere.

Typical use. An As seen in row of press logos, or the retailers that stock your products.

Section settings (35)

Setting	Values	Default
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Content
Heading	Text	As seen in
Size (desktop)	10 to 48 px	13 px
Size (mobile)	10 to 36 px	13 px
Weight	Light Regular Semibold Bold	Semibold
Case	Uppercase As typed Lowercase Capitalize	Uppercase
Alignment	Left, center or right	Center
Space below heading (desktop)	0 to 80 px, step 2	24 px
Space below heading (mobile)	0 to 60 px, step 2	24 px
Logos
Logo height (desktop)	24 to 120 px, step 4	48 px
Logo height (mobile)	16 to 96 px, step 4	32 px
Gap (desktop)	16 to 120 px, step 8	64 px
Gap (mobile)	16 to 80 px, step 8	32 px
Grayscale (color on hover)	Checkbox	On
Marquee
Scroll logos (marquee)	Checkbox	Off
Scroll duration	10 to 60 s, step 5	30 s
Spacing
Top padding (desktop)	0 to 160 px, step 4	48 px
Bottom padding (desktop)	0 to 160 px, step 4	48 px
Top padding (mobile)	0 to 120 px, step 4	32 px
Bottom padding (mobile)	0 to 120 px, step 4	32 px

Block: Logo

One logo, with an optional link.

Logo block settings (2)

Setting	Values	Default	Notes
Logo image	Image	Empty
Link	Link	Empty

Countdown

WhereAny template. Not available in the header or footer group.

A timer counting down to a date and time in your store's timezone (format YYYY-MM-DD HH:MM), with days, hours, minutes and seconds you can show or hide and rename. When it reaches zero it shows a message or hides the section.

Typical use. The last days of a sale, or the launch of a limited edition.

Section settings (38)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Content
Heading	Text	Launching soon
Heading size (desktop)	20 to 72 px, step 4	40 px
Heading size (mobile)	16 to 48 px, step 4	28 px
Subtext	Text	Empty
Target
Target date	Text	Empty	Format: YYYY-MM-DD HH:MM. Interpreted in the store timezone.
When the countdown ends	Show a message Hide the section	Show a message
End message	Text	Translated text	Leave empty to use the translated default.
Units
Show days	Checkbox	On
Days label	Text	Translated text	Leave empty to use the translated default.
Show hours	Checkbox	On
Hours label	Text	Translated text	Leave empty to use the translated default.
Show minutes	Checkbox	On
Minutes label	Text	Translated text	Leave empty to use the translated default.
Show seconds	Checkbox	On
Seconds label	Text	Translated text	Leave empty to use the translated default.
Style
Digit size (desktop)	24 to 96 px, step 4	56 px
Digit size (mobile)	16 to 64 px, step 4	32 px
Unit box style	Card Outline Glass No box	Card
Spacing
Top padding (desktop)	0 to 160 px, step 4	64 px
Bottom padding (desktop)	0 to 160 px, step 4	64 px
Top padding (mobile)	0 to 120 px, step 4	40 px
Bottom padding (mobile)	0 to 120 px, step 4	40 px

WhereAny template. Not available in the header or footer group.

An email sign up band with a heading and subtext, on a solid or glass panel or on no panel at all, over the section background. Sign ups are added to your Shopify customers with email marketing consent.

Typical use. A 10% welcome offer above the footer, over a lifestyle photo.

Section settings (42)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
More settings
Background image (mobile)	Image	Empty	Optional. Used below 768px. When empty, the desktop background image is used. Shown when Background mode is Image.
Content
Heading	Text	Stay in the loop
Heading size (desktop)	20 to 64 px, step 4	36 px
Heading size (mobile)	18 to 46 px, step 4	26 px
Subtext	Text	Sign up for launches, offers and news.
Email placeholder	Text	Translated text	Leave empty to use the translated default.
Submit label	Text	Translated text	Leave empty to use the translated default.
Success message	Text	Translated text	Leave empty to use the translated default.
Panel
Panel style	Solid Glass No panel	Solid
Content alignment	Left Center	Center
Panel width (desktop)	480 to 1200 px, step 40	720 px
Panel width (mobile)	80 to 100%, step 2	100%
Panel top and bottom padding (desktop)	16 to 96 px, step 4	48 px
Panel top and bottom padding (mobile)	12 to 72 px, step 4	36 px	Lower this to flatten the band on a phone. It sets the space inside the panel; the section spacing below sets the space around it.
Height
Height (desktop)	Fit the content Custom height	Fit the content	A custom height is a minimum, never a maximum: longer content still grows the section.
Custom height (desktop)	200 to 900 px, step 20	480 px	Shown when Height (desktop) is Custom height.
Height (mobile)	Fit the content Custom height	Fit the content	A custom height is a minimum, never a maximum: longer content still grows the section.
Custom height (mobile)	160 to 700 px, step 20	360 px	Shown when Height (mobile) is Custom height.
Spam protection notice
Shopify protects this form with hCaptcha and discloses it in one of two ways: the hCaptcha badge in the corner of the page, or this sentence under the form. Showing the sentence is what removes the badge, and hCaptcha requires the disclosure with its two links wherever its branding is hidden, so the notice cannot be turned off. Its wording and links come from Shopify, already translated, and Shopify only serves it where spam protection applies to the form: if no notice appears, bot protection is off for your store rather than missing from the theme. The settings below change only how it looks here.
Notice text size (desktop)	9 to 18 px	11 px
Notice text size (mobile)	9 to 18 px	11 px
Notice color	Color	None	None keeps the color this form was designed with, dimmed as it is today. Any other color is drawn at full opacity.
Notice alignment	Same as content Left Center Right	Same as content
Spacing
Top padding (desktop)	0 to 160 px, step 4	64 px
Bottom padding (desktop)	0 to 160 px, step 4	64 px
Top padding (mobile)	0 to 120 px, step 4	40 px
Bottom padding (mobile)	0 to 120 px, step 4	40 px

WhereAny template. Not available in the header or footer group.

An email sign up popup that opens after a delay and comes back after the number of days you set once closed (0 shows it on every visit). The card is Tinted glass, Glass or Solid over a dimmed page. Sign ups are added to your Shopify customers with the tag newsletter. The home page template includes it; add it to other templates when you want it there too.

Typical use. A welcome offer shown five seconds after arrival, once every 30 days.

Section settings (19)

Setting	Values	Default	Notes
Enable popup	Checkbox	On
Card style	Tinted glass Glass Solid	Tinted glass	Tinted glass is the readable default: the card takes the colour scheme's own background and text. Glass is the original frosted surface, which is very faint over a busy page, and on it the scheme text is replaced automatically by black or white whenever it would not be readable on the frost, so a scheme with white text can still come out dark. Solid uses the scheme exactly as set.
Card opacity	60 to 100%, step 5	85%	How much of the page shows through the card. Lower it for more of the photo behind, raise it for more contrast. The range stops at 60% because a thinner card over a dimmed page can drop the text below the readable minimum. Shown when Card style is Tinted glass.
Color scheme	Color scheme	Scheme 1	Drives the card and its controls, and what it drives depends on Card style. Tinted glass and Solid: the card takes the scheme background, the scheme text, and the scheme button colours on the field and the send button. Glass: the card keeps the theme glass surface (Theme settings, Glass effect) and the scheme only offers its text, which is switched to dark or light automatically when it would not read on the frost.
Overlay opacity (desktop)	0 to 80%, step 5	30%	How far the page behind the popup is dimmed. 0% leaves it untouched. The Glass card style caps the effective value at 40% on both devices: past that the frost lands on a mid tone that no text colour reads on. Tinted glass and Solid use the whole range.
Overlay opacity (mobile)	0 to 80%, step 5	30%
Open delay	0 to 30 s	3 s
Reappear after	0 to 30 days	7 days	Days before the popup shows again once a visitor closes it. 0 = every visit.
Content
Heading	Text	Empty	Leave blank to use your store name automatically.
Subheading	Multi-line text	Sign up for exclusive offers and first access to new arrivals.
Email field placeholder	Text	Translated text	Leave empty to use the translated default.
Submit button label (accessibility)	Text	Translated text	Leave empty to use the translated default.
Close button label (accessibility)	Text	Translated text	Leave empty to use the translated default.
Success message	Text	Translated text	Leave empty to use the translated default.
Legal text	Rich text	Empty	Leave blank to use a default notice with your store name.
Spam protection notice
Shopify protects this form with hCaptcha and discloses it in one of two ways: the hCaptcha badge in the corner of the page, or this sentence under the form. Showing the sentence is what removes the badge, and hCaptcha requires the disclosure with its two links wherever its branding is hidden, so the notice cannot be turned off. Its wording and links come from Shopify, already translated, and Shopify only serves it where spam protection applies to the form: if no notice appears, bot protection is off for your store rather than missing from the theme. The settings below change only how it looks here.
Notice text size (desktop)	9 to 18 px	11 px
Notice text size (mobile)	9 to 18 px	10 px
Notice color	Color	None	None keeps the color this form was designed with, dimmed as it is today. Any other color is drawn at full opacity.
Notice alignment	Same as content Left Center Right	Same as content

Socials

WhereAny template. Not available in the header or footer group.

A title and one button to your social profile, outlined or in glass, on the section color scheme and background.

Typical use. An @yourbrand band with a Follow us button, above the footer.

Section settings (25)

Setting	Values	Default	Notes
Content
Title	Text	@yourbrand
Button label	Text	Follow us
Button link	Link	Empty	Link to your social profile (e.g. https://instagram.com/yourbrand). Leave blank for a placeholder (#).
Button style	Default (outline) Glass	Default (outline)	Glass uses the global Glass effect (Theme settings). Keeps the scheme text color, so check contrast over your background.
Colors
Color scheme	Color scheme	Scheme 1	Drives the background, plus the title / button text / button outline via the scheme's accent color.
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Spacing
Padding top	0 to 200 px, step 4	60 px
Padding bottom	0 to 200 px, step 4	60 px
Top padding (mobile)	0 to 200 px, step 4	60 px
Bottom padding (mobile)	0 to 200 px, step 4	60 px
Gap between title and button	0 to 80 px, step 2	28 px

FAQ

WhereAny template. Not available in the header or footer group.

A title column beside an accordion of FAQ item blocks (a question and a rich text answer), with an optional subheading and button. Alignment, gaps and row heights are set separately for desktop and mobile. The FAQ page template (page.faq) opens with it.

Typical use. An FAQ page of eight to twelve questions on delivery, returns and ingredients, with a Contact us button under the title.

Section settings (43)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
More settings
Heading	Text	Frequently Asked Questions
Heading level	Main heading (H1) Subheading (H2) Subheading (H3)	Subheading (H2)	A page should have exactly one main heading. The templates that open with this section set it to H1; keep H2 anywhere else.
Alignment
Section title alignment (desktop)	Left Center Right	Left	Aligns the title, the subheading and the button.
Section title alignment (mobile)	Left Center Right	Center
Accordion content alignment (desktop)	Left Center Right	Center	Aligns the question titles and the answer text. Left and right pin the chevron to the opposite edge.
Accordion content alignment (mobile)	Left Center Right	Center
Subheading	Text	Do you have more questions?
Button label	Text	Contact us
Button link	Link	Empty
Button style	Default (solid) Glass	Default (solid)	Glass uses the global Glass effect (Theme settings). Check contrast over the section background.
Button text color	Color	`#FFFFFF`	Shown when Button style is Glass.
Spacing
Top padding (desktop)	0 to 160 px, step 4	60 px
Bottom padding (desktop)	0 to 160 px, step 4	120 px
Top padding (mobile)	0 to 120 px, step 4	24 px
Bottom padding (mobile)	0 to 120 px, step 4	64 px
Minimum height (desktop)	0 to 100%, step 5	100%	Share of the screen the section fills at minimum. 0 lets it end where its content ends.
Minimum height (mobile)	0 to 100%, step 5	0%	Set to 0 so a short FAQ stops padding itself out to a full screen. Raise it to bring the full-height look back.
Gap between the two columns (desktop)	0 to 160 px, step 2	130 px	At the default value the gap keeps its original automatic responsive size.
Gap between the two columns (mobile)	0 to 80 px, step 2	28 px
Title column spacing (desktop)	0 to 120 px, step 2	90 px	At the default value the gap keeps its original automatic responsive size.
Title column spacing (mobile)	0 to 80 px, step 2	20 px
Gap between questions (desktop)	0 to 40 px, step 2	16 px
Gap between questions (mobile)	0 to 40 px, step 2	10 px
Question row padding (desktop)	6 to 40 px	18 px	Sets how tall a closed question is.
Question row padding (mobile)	6 to 40 px	13 px
Answer bottom padding (desktop)	0 to 48 px, step 2	24 px
Answer bottom padding (mobile)	0 to 48 px, step 2	16 px

Block: FAQ item

One question and its answer.

FAQ item block settings (2)

Setting	Values	Default	Notes
Question	Text	Empty
Answer	Rich text	Empty

About page

Four sections built for a brand story page. The About template (page.about) opens with them, and each one can be added to any other page too.

Brand story hero

WhereAny template. Not available in the header or footer group.

The opening section of the About page: a three part italic title, a heading, body text, a button and an image, on an inner panel over the section background.

Typical use. The top of the About page, with the brand promise in the title and the founding story in two short paragraphs.

Section settings (39)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Text color	Color	None	Leave it on None and the section works its own color out from the background and the panel, following the color scheme wherever that stays readable. Pick a color to force one.
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Inner panel
Inner panel style	Solid Glass Hidden	Solid	The panel is the layer between the section background and the content. Solid uses the color and opacity below, Glass uses the global Glass effect, Hidden lets the section background show through untouched.
Glass uses the global Glass effect (Theme settings). Check contrast over the section background.
Inner panel color	Color	`#000000`	Shown when Inner panel style is Solid.
Inner panel opacity	0 to 100%, step 5	25%	Shown when Inner panel style is Solid.
Title part 1 (light italic)	Text	Our
Title part 2 (black italic)	Text	story
Title part 3 (italic)	Text	Empty
Heading	Text	Add a short introduction here.
Heading level	Main heading (H1) Subheading (H2) Subheading (H3)	Subheading (H2)	A page should have exactly one main heading. The templates that open with this section set it to H1; keep H2 anywhere else.
Body text	Rich text	Empty	Leave empty to use the default copy.
Body font size	12 to 20 px	14 px
Button label	Text	Discover now
Button link	Link	Empty
Button style	Default (solid) Glass	Default (solid)	Glass uses the global Glass effect (Theme settings). Check contrast over the page background.
Button text color	Color	`#FFFFFF`	Shown when Button style is Glass.
Left image (media)	Image	Empty	Falls back to a neutral placeholder image.
Transparent header
Allow transparent header	Checkbox	Off	When this section is first on the page and the header's 'Transparent header over the first section' setting is on, the header overlays this section and starts transparent.
Transparent header top padding (desktop)	0 to 160 px, step 4	0 px	Extra top padding applied only while the transparent header overlays this section. 0 = unchanged.
Transparent header top padding (mobile)	0 to 120 px, step 4	0 px
Spacing
Top padding (desktop)	0 to 160 px, step 4	44 px
Bottom padding (desktop)	0 to 160 px, step 4	44 px
Top padding (mobile)	0 to 120 px, step 4	32 px
Bottom padding (mobile)	0 to 120 px, step 4	32 px

Comparison panels

WhereAny template. Not available in the header or footer group.

Two panels side by side, each with a title, a subtitle and body text, on an inner panel over the section background.

Typical use. The problem on the left and how your product changes it on the right.

Section settings (30)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Text color	Color	None	Leave it on None and the section works its own color out from the background and the panel, following the color scheme wherever that stays readable. Pick a color to force one.
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Inner panel
Inner panel style	Solid Glass Hidden	Solid	The panel is the layer between the section background and the content. Solid uses the color and opacity below, Glass uses the global Glass effect, Hidden lets the section background show through untouched.
Glass uses the global Glass effect (Theme settings). Check contrast over the section background.
Inner panel color	Color	`#000000`	Shown when Inner panel style is Solid.
Inner panel opacity	0 to 100%, step 5	20%	Shown when Inner panel style is Solid.
Left title	Text	The problem
Left subtitle	Text	Most options make you choose between quality and convenience.
Left body	Rich text	Empty
Right title	Text	The solution
Right subtitle	Text	Describe how your product answers it.
Right body	Rich text	Empty
Spacing
Top padding (desktop)	0 to 160 px, step 4	0 px
Bottom padding (desktop)	0 to 160 px, step 4	0 px
Top padding (mobile)	0 to 120 px, step 4	0 px
Bottom padding (mobile)	0 to 120 px, step 4	0 px

Checklist banner

WhereAny template. Not available in the header or footer group.

An interactive checklist of Check item blocks that visitors tick, beside a heading, a subheading and a button. Once items are ticked, the button leads to the link of the first or last ticked item that has one, or to the button link.

Typical use. A Does this sound like you? list of four situations, each linked to the product that answers it.

Section settings (35)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Text color	Color	None	Leave it on None and the section works its own color out from the background and the panel, following the color scheme wherever that stays readable. Pick a color to force one.
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Inner panel
Inner panel style	Solid Glass Hidden	Solid	The panel is the layer between the section background and the content. Solid uses the color and opacity below, Glass uses the global Glass effect, Hidden lets the section background show through untouched.
Glass uses the global Glass effect (Theme settings). Check contrast over the section background.
Inner panel color	Color	`#000000`	Shown when Inner panel style is Solid.
Inner panel opacity	0 to 100%, step 5	50%	Shown when Inner panel style is Solid.
Inner panel opacity (mobile)	0 to 100%, step 5	60%	Shown when Inner panel style is Solid.
Heading	Text	Does this sound like you?
Subheading	Text	See if this fits you.
Button label	Text	Shop now
Button link (when at least one item checked)	Link	Empty	Defaults to /collections/all
Button destination	First checked item with a link Last checked item with a link	First checked item with a link	Order is the order of the list, not the order the visitor ticks them. Falls back to the button link above when no checked item carries a link.
Button style	Default (solid) Glass	Default (solid)	Glass uses the global Glass effect (Theme settings). Check contrast over the section background.
Button text color	Color	`#000000`	Shown when Button style is Glass.
Checklist title	Text	Quick check
Footer text	Rich text	Empty
Background image	Image	Empty	Optional. When empty, the card shows its dark overlay only.
Spacing
Top padding (desktop)	0 to 160 px, step 4	80 px
Bottom padding (desktop)	0 to 160 px, step 4	80 px
Top padding (mobile)	0 to 120 px, step 4	24 px
Bottom padding (mobile)	0 to 120 px, step 4	24 px

Block: Check item

One line of the checklist, with an optional link the button can take over.

Check item block settings (2)

Setting	Values	Default	Notes
Item text	Text	Describe something your customer recognizes.
Item link (optional)	Link	Empty	When checked, this item can take over the button's destination.

Gallery banner

WhereAny template. Not available in the header or footer group.

A background image crossed by a colored band with two large words, a link below the band, and a gallery of Element blocks (images, round or square, optionally linked) that scrolls sideways with arrows.

Typical use. Photos from your community or your Instagram at the bottom of the About page.

Section settings (25)

Setting	Values	Default	Notes
Banner word 1	Text	Photo
Banner word 2	Text	gallery
Band text size (desktop)	24 to 120 px, step 2	72 px
Band text size (mobile)	16 to 72 px, step 2	36 px
Link label (below the band)	Text	See more
Link URL (below the band)	Link	Empty
Background
Background color	Color	None	Leave empty to keep the page background.
Background image	Image	Empty	The focal point set on the image is respected when cropping.
Background image (mobile)	Image	Empty	Optional. Replaces the background image below 768px.
Overlay opacity	0 to 80%, step 5	0%
Overlay color	Color	`#000000`
Colors
Band color	Color	`#000000`
Band opacity	0 to 100%, step 5	25%
Band text color	Color	`#FFFFFF`
Link color (desktop)	Color	`#000000`
Link color (mobile)	Color	`#FFFFFF`
Elements
Element shape	Square Circle Custom radius	Square	Square and custom radii are capped by the global Corner style (Theme settings).
Custom radius (desktop)	0 to 120 px, step 2	24 px	Shown when Element shape is Custom radius.
Custom radius (mobile)	0 to 80 px, step 2	16 px	Shown when Element shape is Custom radius.
Element size (desktop)	80 to 480 px, step 10	250 px
Element size (mobile)	60 to 320 px, step 10	200 px
Spacing
Top padding (desktop)	0 to 160 px, step 4	60 px
Bottom padding (desktop)	0 to 160 px, step 4	120 px
Top padding (mobile)	0 to 120 px, step 4	32 px
Bottom padding (mobile)	0 to 120 px, step 4	80 px

Block: Element

One image of the gallery, with an optional link and its own shape.

Element block settings (5)

Setting	Values	Default	Notes
Image	Image	Empty
Link (optional)	Link	Empty
Shape	Use the section shape Square Circle Custom radius	Use the section shape
Custom radius (desktop)	0 to 120 px, step 2	24 px	Shown when Shape is Custom radius.
Custom radius (mobile)	0 to 80 px, step 2	16 px	Shown when Shape is Custom radius.

Contact and stores

Used by the Contact (page.contact) and Store locator (page.find-us) templates.

Contact

WhereAny template. Not available in the header or footer group.

The Shopify contact form in a card, with a heading, a subtitle and a success message. Messages reach the email address of your store. The Contact page template (page.contact) uses it.

Typical use. The Contact page, with a subtitle that gives your response time.

Section settings (32)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Text color	Color	None	Leave it on None and the section works its own color out from the background and the panel, following the color scheme wherever that stays readable. Pick a color to force one.
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Inner panel
Inner panel style	Solid Glass Hidden	Solid	The panel is the layer between the section background and the content. Solid uses the color and opacity below, Glass uses the global Glass effect, Hidden lets the section background show through untouched.
Glass uses the global Glass effect (Theme settings). Check contrast over the section background.
Inner panel color	Color	`#000000`	Shown when Inner panel style is Solid.
Inner panel opacity	0 to 100%, step 5	30%	Shown when Inner panel style is Solid.
Heading	Text	Get in touch
Heading level	Main heading (H1) Subheading (H2) Subheading (H3)	Subheading (H2)	A page should have exactly one main heading. The templates that open with this section set it to H1; keep H2 anywhere else.
Subtitle	Text	Reach out anytime - We're here to help
Success message	Text	Translated text	Leave empty to use the translated default.
Spam protection notice
Shopify protects this form with hCaptcha and discloses it in one of two ways: the hCaptcha badge in the corner of the page, or this sentence under the form. Showing the sentence is what removes the badge, and hCaptcha requires the disclosure with its two links wherever its branding is hidden, so the notice cannot be turned off. Its wording and links come from Shopify, already translated, and Shopify only serves it where spam protection applies to the form: if no notice appears, bot protection is off for your store rather than missing from the theme. The settings below change only how it looks here.
Notice text size (desktop)	9 to 18 px	12 px
Notice text size (mobile)	9 to 18 px	12 px
Notice color	Color	None	None keeps the color this form was designed with, dimmed as it is today. Any other color is drawn at full opacity.
Notice alignment	Same as content Left Center Right	Same as content
Spacing
Top padding (desktop)	0 to 160 px, step 4	60 px	Space above the form card. Header offset is automatic.
Bottom padding (desktop)	0 to 160 px, step 4	120 px
Top padding (mobile)	0 to 120 px, step 4	32 px
Bottom padding (mobile)	0 to 120 px, step 4	80 px

Store locator

WhereAny template. Not available in the header or footer group.

A store locator page over a background photo: two columns of Stores and Online lists (rich text, shown as accordions), and a map slot for an app block or a Custom Liquid block where you paste a store locator embed. The Store locator template (page.find-us) uses it.

Typical use. A Where to buy page listing your retailers city by city, with the map of a store locator app.

Section settings (20)

Setting	Values	Default	Notes
Background
Background image	Image	Empty	Optional full-bleed background. When empty, the section shows its color scheme background.
Dark overlay opacity	0 to 70%, step 5	25%
Spacing
Gap between columns (desktop)	0 to 300 px, step 4	140 px	Shown when Show second column is on.
Top padding (desktop)	0 to 200 px, step 4	140 px
Bottom padding (desktop)	0 to 200 px, step 4	120 px	Breathing room below the content / store-locator map, before the footer.
Top padding (mobile)	0 to 200 px, step 4	28 px
Bottom padding (mobile)	0 to 200 px, step 4	120 px
Store-locator map
Map height (desktop)	240 to 720 px, step 10	420 px	Fixed height of the map slot. Keeps the section height stable so the background doesn't re-crop on scroll.
Map height (mobile)	240 to 720 px, step 10	340 px
Accordion labels
"Stores" label	Text	Stores
"Online" label	Text	Online
Column 1
Heading	Text	Empty	Optional title above the columns. Leave blank to hide it.
Heading level	Main heading (H1) Subheading (H2) Subheading (H3)	Subheading (H2)	A page should have exactly one main heading. The templates that open with this section set it to H1; keep H2 anywhere else.
Column 1 title	Text	Where to find us
Column 1 (stores)	Rich text	Region nameStore nameAddress, ZIP CityRegion nameStore...
Column 1 (online)	Rich text	Online storeAddress of your online shop
Column 2
Show second column	Checkbox	Off	When off, column 1 expands to the full width of the section.
Column 2 title	Text	Opening soon	Shown when Show second column is on.
Column 2 (stores)	Rich text	Region nameStore name	Shown when Show second column is on.
Column 2 (online)	Rich text	Online storeAddress of your online shop	Shown when Show second column is on.

Block: Custom Liquid

Paste the embed code of a store locator service here.

Custom Liquid block settings (1)

Setting	Values	Default	Notes
Liquid / HTML code	Liquid code	Empty	Paste a store-locator embed or any custom HTML/Liquid.

This section accepts app blocks.

Layout, code and apps

Divider

WhereAny template. Not available in the header or footer group.

A line or an empty space between two sections, with its own height for desktop and mobile, line thickness, width and opacity.

Typical use. A thin line between two sections that share the same background.

Section settings (22)

Setting	Values	Default
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
More settings
Style	Line Empty space	Line
Height (desktop)	0 to 160 px, step 4	40 px
Height (mobile)	0 to 160 px, step 4	24 px
Line thickness	1 to 9 px	1 px
Line width	10 to 100%, step 5	100%
Line opacity	5 to 100%, step 5	15%
Color scheme	Color scheme	Scheme 1

Custom Liquid

WhereAny template. Not available in the header or footer group.

Your own Liquid, HTML or app snippet in a section of its own, contained or full width, with the usual color scheme, background and spacing settings. Read Custom code before using it.

Typical use. An embed code provided by a third party service that has no app block.

Section settings (22)

Setting	Values	Default	Notes
Liquid code	Liquid code	Empty	Add app snippets or any other Liquid / HTML code.
Width	Contained Full width	Contained
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
More settings
Top padding (desktop)	0 to 120 px, step 4	36 px
Bottom padding (desktop)	0 to 120 px, step 4	36 px
Top padding (mobile)	0 to 120 px, step 4	24 px
Bottom padding (mobile)	0 to 120 px, step 4	24 px

Apps

WhereAny template, and the header and footer groups.

A container for app blocks, with a color scheme and spacing, and an option to remove the content width limit so an app can draw edge to edge.

Typical use. Reviews carousel or Instagram feed from an app, placed between two sections of the home page.

Section settings (6)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Make section full width	Checkbox	Off	Removes the content width limit and side padding so an app can draw edge to edge.
Spacing
Padding top (desktop)	0 to 120 px, step 4	40 px
Padding bottom (desktop)	0 to 120 px, step 4	40 px
Padding top (mobile)	0 to 120 px, step 4	24 px
Padding bottom (mobile)	0 to 120 px, step 4	24 px

This section accepts app blocks.

Template sections

The main section of each template: what a product, collection, cart or blog page shows. Most of them cannot be removed from their template, but their settings are yours.

Product

WhereOnly on product templates.

The product page: media gallery on one side, a column of blocks on the other. Two versions can be added from the section picker: Product, the standard page, and Balm spotlight, a dark page with a stacked gallery, a radial halo background and a spinning badge.

Its settings and every block are documented on Product page blocks.

Product recommendations

WhereOnly on product templates.

Product cards under the product page, filled by Shopify: Related (similar products) are generated automatically, Complementary (pairs well with) are the ones you curate in the Search & Discovery app.

Typical use. Four related products under every product page, with the custom badge showing on new flavors.

Section settings (37)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Content
Heading	Text	Translated text	Leave empty to use the translated default.
Recommendation intent	Related (similar products) Complementary (pairs well with)	Related (similar products)	Complementary needs the Search and Discovery app setup.
Maximum products	2 to 10	4
Layout
Columns (desktop)	2 to 5	4
Columns (mobile)	1 2	2
Card gap (desktop)	8 to 80 px, step 4	32 px
Card gap (mobile)	8 to 48 px, step 4	16 px
Cards
Image ratio	Square (1:1) Landscape (4:3) Portrait (3:4) Original	Square (1:1)
Image fit	Contain (never crops) Fill (crops)	Contain (never crops)
Card button label	Text	Translated text	Leave empty to use the translated default.
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.
Card title size (desktop)	16 to 44 px, step 2	26 px
Card title size (mobile)	14 to 32 px, step 2	18 px
Spacing inside card (desktop)	0 to 40 px, step 2	14 px
Spacing inside card (mobile)	0 to 32 px, step 2	10 px
Title to price spacing (desktop)	0 to 40 px, step 2	8 px
Title to price spacing (mobile)	0 to 32 px, step 2	6 px
Spacing
Top padding (desktop)	0 to 160 px, step 4	64 px
Bottom padding (desktop)	0 to 160 px, step 4	80 px
Top padding (mobile)	0 to 120 px, step 4	40 px
Bottom padding (mobile)	0 to 120 px, step 4	48 px

Sticky add to cart

WhereOnly on product templates.

A bar with the product thumbnail, title, selected variant, price and add to cart button that stays at the top or bottom of the screen, on desktop and mobile separately. By default it appears once the main buy button scrolls out of view. A variant that sells as a pre-order says Pre-order here too.

Typical use. At the bottom of the screen on phones, where the main buy button quickly scrolls away.

Section settings (12)

Setting	Values	Default	Notes
Enable the bar	Checkbox	On
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.

Collection

WhereOnly on collection templates.

The collection page: a banner with the title, description and image, an optional row of collection links, filters and sorting, and the product grid. Filters come from the Search & Discovery app and can sit in a column, a drawer or a horizontal bar. Pagination is page numbers, a Load more button or infinite scroll. Visitors can change the column count or switch to a list view when you allow it, and Promo tile blocks take the place of a card on the first page.

Typical use. Filters in a column on desktop and a drawer on mobile, 24 products per page with a Load more button, color swatches on the cards.

Section settings (73)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Banner
Show title	Checkbox	On
Show description	Checkbox	On
Show collection image	Checkbox	On
Image banner height (desktop)	160 to 560 px, step 20	280 px
Image banner height (mobile)	120 to 400 px, step 20	180 px
Overlay opacity (image banner)	0 to 90%, step 5	30%
Collection navigation
Menu	Menu	Empty	A menu of collection links, shown as a row of pills. The link of the current collection is highlighted. On mobile the row scrolls sideways.
Position	Above the banner Below the banner	Below the banner	Shown when Menu is set.
Alignment	Left Center Right	Center	Shown when Menu is set.
Grid
Products per page	4 to 48, step 4	12
Pagination	Page numbers Load more button Infinite scroll	Page numbers	Load more and Infinite scroll add the next page under the grid, with a Showing X of Y counter. Infinite scroll loads three pages on its own, then shows the Load more button so the footer stays reachable.
Columns (desktop)	1 to 4	2
Columns (mobile)	1 2	1
Card gap (desktop)	8 to 80 px, step 4	32 px
Card gap (mobile)	8 to 48 px, step 4	16 px
Filters and sorting
Enable filters	Checkbox	On
Filter layout	Column (desktop) + drawer (mobile) Drawer on all devices Horizontal bar (desktop) + drawer (mobile)	Column (desktop) + drawer (mobile)
Show counts on filter values	Checkbox	On	Appends the number of matching results after each filter value, for example "Red (4)".
Show results count	Checkbox	On	The total number of results shown next to the sort control on collections and under the search form, and repeated on the Apply button of the filter drawer.
Enable sorting	Checkbox	On
Values before "Show more"	4 to 30, step 2	10	Longer filters are truncated to this many values.
Search box from	6 to 40, step 2	12	A search box appears inside a filter that has at least this many values.
Show color swatches	Checkbox	On	Applies to filters set to the swatch presentation in the admin.
Show price slider	Checkbox	On
Product cards
Image ratio	Square (1:1) Landscape (4:3) Portrait (3:4) Original	Square (1:1)
Image fit	Contain (never crops) Fill (crops)	Contain (never crops)
Second image on hover	Checkbox	Off
Show vendor	Checkbox	Off
Quick add	Off Single-variant products All products	All products	Single-variant products get a one-click add to cart on the card. All products also opens an option picker for products with variants. The cart drawer opens either way.
Quick add label	Text	Translated text	Label of the quick add button. Products with variants say Choose options, pre-order variants use the label from Theme settings, Pre-order. Leave empty to use the translated default.
Quick view	Off Button on hover Icon	Off	Opens the product in a modal. The button shows on hover, and always on touch screens. Content and card style are in Theme settings, Quick view.
Button label	Text	Translated text	Leave empty to use the translated default.
Heading size (desktop)	16 to 48 px, step 2	32 px
Heading size (mobile)	14 to 40 px, step 2	20 px
Spacing inside card (desktop)	0 to 40 px, step 2	14 px
Spacing inside card (mobile)	0 to 32 px, step 2	10 px
Title to price spacing (desktop)	0 to 40 px, step 2	8 px
Title to price spacing (mobile)	0 to 32 px, step 2	6 px
Card composition
Card style	Bare Bordered Filled	Bare
Card content alignment	Center Left Right	Center
Element order	Title, then price Price, then title	Title, then price
Show the product rating	Checkbox	Off	Only shows when the reviews metafield exists.
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.
Card swatches
Show color swatches	Checkbox	Off
Swatch option name	Text	Color, Colour, Couleur	Comma-separated. The card shows swatches for the first product option whose name matches.
Maximum swatches before "+N"	2 to 10	4
Swatch size	12 to 40 px, step 2	20 px
Swatch shape	Circle Rounded Square	Circle
Grid controls
Let visitors change the column count	Checkbox	Off	Adds 2 / 3 / 4 buttons above the grid.
Let visitors switch to a list view	Checkbox	Off
Feature the first product	Checkbox	Off	The first card spans two columns on desktop.
Spacing
Top padding (desktop)	0 to 120 px, step 4	40 px
Bottom padding (desktop)	0 to 160 px, step 4	80 px
Top padding (mobile)	0 to 80 px, step 4	24 px
Bottom padding (mobile)	0 to 120 px, step 4	48 px
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

A tile that takes the place of a product card at the position you choose, on the first page of the grid only.

Promo tile block settings (11)

Setting	Values	Default	Notes
A tile that takes the place of a product card at the position below, on the first page of the grid only. With a link, the whole tile is clickable.
Image	Image	Empty
Image (mobile)	Image	Empty	Optional. Replaces the image on phones.
Heading	Text	Promo tile
Text	Multi-line text	Tell your visitors about an offer or a collection.
Button label	Text	Shop now
Link	Link	Empty	Makes the whole tile clickable. Screen readers hear the heading as the link name.
Color scheme	Color scheme	Scheme 2
Position in the grid	1 to 48	3	Rank of the tile among the cards. Beyond the last card, the tile closes the grid.
Width (desktop)	1 column 2 columns	1 column
Width (mobile)	1 column 2 columns	1 column
Text alignment	Left Center Right	Center

This section accepts app blocks.

Search

WherePart of the search template.

The search results page, with the same filters, sorting, pagination and product cards as the collection page. What it searches (products only, or products, articles and pages) is set in Theme settings, Search.

Typical use. Filters in a drawer on every device, with infinite scroll.

Section settings (52)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
More settings
Field placeholder	Text	Translated text	Leave empty to use the translated default.
Grid
Results per page	4 to 48, step 4	12
Pagination	Page numbers Load more button Infinite scroll	Page numbers	Load more and Infinite scroll add the next page under the grid, with a Showing X of Y counter. Infinite scroll loads three pages on its own, then shows the Load more button so the footer stays reachable.
Columns (desktop)	1 to 4	2
Columns (mobile)	1 2	1
Card gap (desktop)	8 to 80 px, step 4	32 px
Card gap (mobile)	8 to 48 px, step 4	16 px
Filters and sorting
Enable filters	Checkbox	On
Filter layout	Column (desktop) + drawer (mobile) Drawer on all devices Horizontal bar (desktop) + drawer (mobile)	Column (desktop) + drawer (mobile)
Show counts on filter values	Checkbox	On	Appends the number of matching results after each filter value, for example "Red (4)".
Show results count	Checkbox	On	The total number of results shown next to the sort control on collections and under the search form, and repeated on the Apply button of the filter drawer.
Enable sorting	Checkbox	On
Values before "Show more"	4 to 30, step 2	10	Longer filters are truncated to this many values.
Search box from	6 to 40, step 2	12	A search box appears inside a filter that has at least this many values.
Show color swatches	Checkbox	On	Applies to filters set to the swatch presentation in the admin.
Show price slider	Checkbox	On
Product cards
Image ratio	Square (1:1) Landscape (4:3) Portrait (3:4) Original	Square (1:1)
Image fit	Contain (never crops) Fill (crops)	Contain (never crops)
Second image on hover	Checkbox	Off
Show vendor	Checkbox	Off
Quick add	Off Single-variant products All products	All products	Single-variant products get a one-click add to cart on the card. All products also opens an option picker for products with variants. The cart drawer opens either way.
Quick add label	Text	Translated text	Label of the quick add button. Products with variants say Choose options, pre-order variants use the label from Theme settings, Pre-order. Leave empty to use the translated default.
Quick view	Off Button on hover Icon	Off	Opens the product in a modal. The button shows on hover, and always on touch screens. Content and card style are in Theme settings, Quick view.
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.
Button label	Text	Translated text	Leave empty to use the translated default.
Element order	Title, then price Price, then title	Title, then price
Heading size (desktop)	16 to 48 px, step 2	32 px
Heading size (mobile)	14 to 40 px, step 2	20 px
Spacing inside card (desktop)	0 to 40 px, step 2	14 px
Spacing inside card (mobile)	0 to 32 px, step 2	10 px
Title to price spacing (desktop)	0 to 40 px, step 2	8 px
Title to price spacing (mobile)	0 to 32 px, step 2	6 px
Spacing
Top padding (desktop)	0 to 120 px, step 4	40 px
Bottom padding (desktop)	0 to 160 px, step 4	80 px
Top padding (mobile)	0 to 80 px, step 4	24 px
Bottom padding (mobile)	0 to 120 px, step 4	48 px

This section accepts app blocks.

Collections list

WherePart of the list of collections template.

The page that lists your collections (/collections): every collection alphabetically, or only the ones you pick, in the order you pick them.

Typical use. A curated list of six collections, with the product count on each card.

Section settings (33)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Heading
Show heading	Checkbox	On
Heading	Text	Translated text	Leave empty to use the translated default.
Collections
By default every collection is listed alphabetically. Pick collections below to curate the list and control its order instead.
Curated collections (optional)	Collection list	Empty
Collections per page	6 to 36, step 3	12
Cards
Image ratio	Square (1:1) Landscape (4:3) Portrait (3:4) Wide (16:9)	Landscape (4:3)
Image fit	Fill (crops) Contain (never crops)	Fill (crops)
Show product count	Checkbox	On
Card title size (desktop)	16 to 44 px, step 2	28 px
Card title size (mobile)	14 to 32 px, step 2	20 px
Columns (desktop)	2 to 5	3
Columns (mobile)	1 2	1
Card gap (desktop)	8 to 80 px, step 4	32 px
Card gap (mobile)	8 to 48 px, step 4	16 px
Spacing
Top padding (desktop)	0 to 160 px, step 4	40 px
Bottom padding (desktop)	0 to 160 px, step 4	80 px
Top padding (mobile)	0 to 120 px, step 4	24 px
Bottom padding (mobile)	0 to 120 px, step 4	48 px

This section accepts app blocks.

Cart

WherePart of the cart template.

The cart page, with quantity rules, an order note, the taxes and shipping note and the accelerated checkout buttons. It works without JavaScript. Gift wrapping appears here when it is on in Theme settings.

Typical use. An order note for delivery instructions and the accelerated checkout buttons under the checkout button.

Section settings (21)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Cart content
Show the order note	Checkbox	On
Order note label	Text	Translated text	Leave empty to use the translated default.
Order note placeholder	Text	Translated text	Leave empty to use the translated default.
Show the taxes and shipping note	Checkbox	On	Reads your tax settings: says when prices include tax, and links your shipping policy when one is published. A mention, not an estimate.
Show accelerated 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.

This section accepts app blocks.

Cart drawer

WherePart of every page. It is listed in the theme editor and cannot be removed or moved.

The panel that slides in when a product is added to the cart. It can show a reward progress bar, suggestions from Shopify or from your own selection, a promotion note on each line, a shipping notice, the order note, the taxes and shipping note and the accelerated checkout buttons, on a solid or glass panel.

The reward bar only displays progress toward the amount you type. It does not create free shipping or a discount: set the real rule in your admin (Settings, Shipping and delivery, or Discounts) and keep the two amounts the same.

Typical use. A free shipping bar at 50 in your currency, three complementary suggestions in a carousel and the order note.

Section settings (40)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Show accelerated 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.
Show shipping notice	Checkbox	Off
Shipping notice	Text	Your shipping notice here	Off by default: replace this placeholder with your own delivery times before enabling it.
Show a promotion note on each line	Checkbox	Off
Promotion note text	Text	Your promotion note here	Shown on every cart line that has no discount of its own. Off by default: write your own text before enabling it.
Reward progress bar
This bar only DISPLAYS progress toward a number you type below. A theme cannot create or read a shipping rule or a discount. Set the real rule in your admin (Settings > Shipping, or Discounts) and keep the two in sync, or buyers will see a promise checkout does not honor.
Show the reward progress bar	Checkbox	Off
Reward threshold	Number	50	In your store currency, whole units (50 means 50). This is a display value only: create the matching free shipping rate or automatic discount in your admin yourself.
Measure progress on	Subtotal before cart discounts Total after discounts	Subtotal before cart discounts	Shopify's own free shipping rules are evaluated on the subtotal before discounts, so that option is the one that matches an admin rule.
Message before the threshold	Text	Translated text	Use [amount] where the remaining amount should appear. Leave empty to use the translated default.
Message once reached	Text	Translated text	Leave empty to use the translated default.
Position	In the header Above the items In the footer	Above the items
Bar style	Rounded Pill Square	Rounded
Bar height	2 to 20 px, step 2	8 px
Bar background	Color	`#E6E6E6`
Bar fill	Color	`#111111`
Glass	Checkbox	Off	Glass uses the global Glass effect (Theme settings). Check contrast over the section background.
Cart suggestions
Show suggestions	Checkbox	Off
Heading	Text	Translated text	Leave empty to use the translated default.
Products come from	Shopify recommendations A manual selection	Shopify recommendations
Recommendation intent	Complementary (pairs well with) Related (similar products)	Complementary (pairs well with)	Complementary products are the ones you curate per product in the Search and Discovery app, up to 10. Related products are generated automatically.
Base suggestions on	Highest value line First product added Last product added	Highest value line	There is no cart-wide recommendations API: Shopify answers for one product at a time, so the cart picks one line to ask about.
Products	Product list	Empty	Used when the source is a manual selection. Connectable to a product list metafield, and the only source that can show on an empty cart.
Number of products	2 to 8	4
Layout	Horizontal carousel Vertical list	Horizontal carousel
Show price	Checkbox	On
Quick add button	Checkbox	On
Cart content
Show the order note	Checkbox	On
Order note label	Text	Translated text	Leave empty to use the translated default.
Order note placeholder	Text	Translated text	Leave empty to use the translated default.
Show the taxes and shipping note	Checkbox	On	A mention, not an estimate. A real estimate needs a full delivery address.
Style
Glass panel	Checkbox	Off	Glass uses the global Glass effect (Theme settings). Check contrast over the section background.
Panel width (desktop)	380 to 900 px, step 10	690 px
Corner radius	0 to 40 px, step 2	0 px	Capped by the global corner radius (Theme settings, Corner style).
Horizontal padding (desktop)	16 to 80 px	57 px
Horizontal padding (mobile)	12 to 40 px, step 2	20 px
Title size (desktop)	24 to 56 px, step 2	40 px
Title size (mobile)	18 to 44 px, step 2	32 px
Product title size	14 to 32 px	24 px
Thumbnail size	80 to 180 px, step 10	140 px

Blog

WherePart of the blog template.

The blog page: article cards with image, date, author, excerpt and tags, an optional row of tag filters, and page numbers.

Typical use. Three columns on desktop, one on mobile, with the tag filter row for recipes and news.

Section settings (36)

Setting	Values	Default
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Layout
Articles per page	3 to 24, step 3	9
Columns (desktop)	1 to 4	3
Columns (mobile)	1 2	1
Card gap (desktop)	16 to 80 px, step 4	40 px
Card gap (mobile)	12 to 48 px, step 4	24 px
Cards
Show featured image	Checkbox	On
Image ratio	Square (1:1) Landscape (4:3) Portrait (3:4) Wide (16:9)	Landscape (4:3)
Image fit	Fill (crops) Contain (never crops)	Fill (crops)
Card title size (desktop)	16 to 44 px, step 2	28 px
Card title size (mobile)	14 to 32 px, step 2	22 px
Metadata
Show date	Checkbox	On
Show author	Checkbox	Off
Show excerpt	Checkbox	On
Excerpt length (words)	10 to 60, step 5	30
Show tags on cards	Checkbox	Off
Show tag filter row	Checkbox	On
Spacing
Top padding (desktop)	0 to 160 px, step 4	40 px
Bottom padding (desktop)	0 to 160 px, step 4	80 px
Top padding (mobile)	0 to 120 px, step 4	24 px
Bottom padding (mobile)	0 to 120 px, step 4	48 px

This section accepts app blocks.

Article

WherePart of the article template.

A blog post: featured image, date, author, tags, share buttons, links to the previous and next posts, and comments when the blog allows them, in a reading column whose width and type sizes you set.

Typical use. A reading column of about 700 px with the share buttons and the previous and next links.

Section settings (35)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Content
Show featured image	Checkbox	On
Show date	Checkbox	On
Show author	Checkbox	On
Show tags	Checkbox	On
Show share buttons	Checkbox	On
Show previous / next articles	Checkbox	On
Comments
Comments appear when they are enabled on the blog (Online Store > Blog posts > Manage blogs).
Comments per page	5 to 50, step 5	20
Reading column
Column width (desktop)	520 to 1200 px, step 20	760 px
Column width (mobile)	80 to 100%, step 2	92%
Typography
Title size (desktop)	24 to 80 px, step 2	48 px
Title size (mobile)	20 to 56 px, step 2	30 px
Body text size (desktop)	13 to 22 px	16 px
Body text size (mobile)	12 to 20 px	15 px
Spacing
Top padding (desktop)	0 to 160 px, step 4	48 px
Bottom padding (desktop)	0 to 160 px, step 4	96 px
Top padding (mobile)	0 to 120 px, step 4	28 px
Bottom padding (mobile)	0 to 120 px, step 4	56 px
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

This section accepts app blocks.

Page

WherePart of the page template.

A standard page from your admin (Online Store, Pages) in a reading column, with its title and content.

Typical use. Legal pages, shipping information and other text pages.

Section settings (27)

Setting	Values	Default
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
More settings
Show page title	Checkbox	On
Reading column
Column width (desktop)	520 to 1200 px, step 20	760 px
Column width (mobile)	80 to 100%, step 2	92%
Typography
Title size (desktop)	24 to 80 px, step 2	48 px
Title size (mobile)	20 to 56 px, step 2	32 px
Body text size (desktop)	13 to 22 px	16 px
Body text size (mobile)	12 to 20 px	15 px
Spacing
Top padding (desktop)	0 to 160 px, step 4	56 px
Bottom padding (desktop)	0 to 160 px, step 4	96 px
Top padding (mobile)	0 to 120 px, step 4	32 px
Bottom padding (mobile)	0 to 120 px, step 4	56 px

This section accepts app blocks.

404 page

WherePart of the 404 template.

The page shown when a link is broken: a heading, a message, a button home, an optional search bar and a few products from a collection of your choice.

Typical use. A friendly message, the search bar and four best sellers to keep the visitor in the store.

Section settings (35)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Content
Heading	Text	Translated text	Leave empty to use the translated default.
Message	Multi-line text	Translated text	Leave empty to use the translated default.
Home button label	Text	Translated text	Leave empty to use the translated default.
Search
Show search bar	Checkbox	On
Search placeholder	Text	Translated text	Leave empty to use the translated default.
Search button label	Text	Translated text	Leave empty to use the translated default.
Featured collection
Collection	Collection	Empty
Featured heading	Text	Translated text	Leave empty to use the translated default.
Products shown	2 to 8	4
Columns (desktop)	2 to 5	4
Columns (mobile)	1 2	2
Typography
Title size (desktop)	32 to 96 px, step 4	64 px
Title size (mobile)	24 to 64 px, step 4	36 px
Text size (desktop)	13 to 22 px	16 px
Text size (mobile)	12 to 20 px	15 px
Spacing
Top padding (desktop)	0 to 200 px, step 8	96 px
Bottom padding (desktop)	0 to 200 px, step 8	96 px
Top padding (mobile)	0 to 120 px, step 8	56 px
Bottom padding (mobile)	0 to 120 px, step 8	56 px

Password page

WherePart of the password template.

The page visitors see while your store is password protected, with your logo, the password form and a background. The message above the form is set in Online Store, Preferences.

Typical use. A coming soon page before launch.

Section settings (16)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Branding
Logo image	Image	Empty
Logo width (desktop)	80 to 320 px, step 8	160 px
Logo width (mobile)	64 to 240 px, step 8	120 px
Content
Heading	Text	Translated text	Leave empty to use the translated default.
Password field label	Text	Translated text	Leave empty to use the translated default.
Password placeholder	Text	Translated text	Leave empty to use the translated default.
Submit button label	Text	Translated text	Leave empty to use the translated default.
The message shown above the form is set in Online Store > Preferences > Password protection.
Background
Background image	Image	Empty
Image overlay opacity	0 to 80%, step 5	30%
Typography
Title size (desktop)	24 to 72 px, step 4	40 px
Title size (mobile)	20 to 48 px, step 4	28 px
Spacing
Extra top padding (desktop)	0 to 120 px, step 8	0 px
Extra bottom padding (desktop)	0 to 120 px, step 8	0 px
Extra top padding (mobile)	0 to 96 px, step 8	0 px
Extra bottom padding (mobile)	0 to 96 px, step 8	0 px

Gift card

WherePart of the gift card template.

The page a customer opens from their gift card email, with the card value, the code, a QR code, and buttons to copy the code, print the page and go to the store.

Typical use. Your logo on top, on your main color scheme.

Section settings (29)

Setting	Values	Default	Notes
Color scheme	Color scheme	Scheme 1
Section background
Background mode (None, Solid color, Gradient, Image or Radial halo) and the settings of each mode. They are the same in every section: see Section background.
Branding
Logo image	Image	Empty
Content
Heading	Text	Translated text	Leave empty to use the translated default.
Code hint	Text	Translated text	Leave empty to use the translated default.
QR code hint	Text	Translated text	Leave empty to use the translated default.
Shop button label	Text	Translated text	Leave empty to use the translated default.
Print button label	Text	Translated text	Leave empty to use the translated default.
Copy button label	Text	Translated text	Leave empty to use the translated default.
Typography
Title size (desktop)	24 to 64 px, step 4	40 px
Title size (mobile)	20 to 48 px, step 4	28 px
Spacing
Top padding (desktop)	0 to 160 px, step 8	64 px
Bottom padding (desktop)	0 to 160 px, step 8	64 px
Top padding (mobile)	0 to 120 px, step 8	32 px
Bottom padding (mobile)	0 to 120 px, step 8	32 px

Three more sections exist in the theme files without appearing in the section list: Quick view, Predictive search and Pickup availability. They have no settings; the theme loads them on demand to fill the quick view modal, the search suggestions and the pickup details. Quick view is configured in Theme settings, Quick view, predictive search in the Header section.

Blocks used inside sections

Blocks that several sections accept, and the blocks that build the header mega menus.

Theme blocks

General purpose blocks accepted by Image with text, Rich text and the product information column. Stack them in any order to build a content column.

Heading

A heading. Heading level (semantic) sets the level for search engines and screen readers without changing the size.

Block settings (11)

Setting	Values	Default	Notes
Text	Text	Talk about your brand
Heading level (semantic)	H1 H2 H3 H4 H5 H6	H2	Does not affect the visual size.
Typography style	House style (italic, caps) Neutral Uppercase Italic Italic uppercase As typed	House style (italic, caps)
Size (desktop)	16 to 96 px, step 4	48 px
Size (mobile)	16 to 64 px, step 4	32 px
Alignment (desktop)	Left, center or right	Center
Alignment (mobile)	Left, center or right	Center
Margin top (desktop)	0 to 80 px, step 4	0 px
Margin bottom (desktop)	0 to 80 px, step 4	0 px
Margin top (mobile)	0 to 80 px, step 4	0 px
Margin bottom (mobile)	0 to 80 px, step 4	0 px

Text

A rich text paragraph, with an optional maximum width.

Block settings (11)

Setting	Values	Default
Text	Rich text	Share information about your brand with your customers. Describe a...
Size (desktop)	12 to 28 px, step 2	16 px
Size (mobile)	12 to 24 px, step 2	14 px
Alignment (desktop)	Left, center or right	Center
Alignment (mobile)	Left, center or right	Center
Limit text width	Checkbox	On
Max text width	400 to 1200 px, step 50	700 px
Margin top (desktop)	0 to 80 px, step 4	0 px
Margin bottom (desktop)	0 to 80 px, step 4	0 px
Margin top (mobile)	0 to 80 px, step 4	0 px
Margin bottom (mobile)	0 to 80 px, step 4	0 px

Button

A link styled as a Solid, Outline or Glass button, or as a text link.

Block settings (12)

Setting	Values	Default
Label	Text	Shop now
Link	Link	Empty
Open in a new tab	Checkbox	Off
Style	Solid Outline Glass Text link	Solid
Size (desktop)	Small Medium Large	Medium
Size (mobile)	Small Medium Large	Medium
Alignment (desktop)	Left, center or right	Center
Alignment (mobile)	Left, center or right	Center
Margin top (desktop)	0 to 80 px, step 4	0 px
Margin bottom (desktop)	0 to 80 px, step 4	0 px
Margin top (mobile)	0 to 80 px, step 4	0 px
Margin bottom (mobile)	0 to 80 px, step 4	0 px

Image

An image with a ratio, a width, an optional height limit and a corner radius.

Block settings (15)

Setting	Values	Default	Notes
Image	Image	Empty	The focal point set on the image is respected when cropping.
Ratio	Original (never crops) Square (1:1) Landscape (4:3) Landscape (3:2) Wide (16:9) Portrait (3:4)	Original (never crops)	"Original" applies no cropping.
Fit (when a ratio is set)	Fill (crops) Contain (never crops)	Fill (crops)
Width (desktop)	10 to 100%, step 5	100%
Width (mobile)	10 to 100%, step 5	100%
Limit height	Checkbox	Off	May crop the image (depending on the fit).
Max height (desktop)	200 to 900 px, step 20	480 px
Max height (mobile)	160 to 700 px, step 20	360 px
Alignment (desktop)	Left, center or right	Center
Alignment (mobile)	Left, center or right	Center
Corner radius	0 to 80 px, step 4	0 px	Capped by the global corner setting (Theme settings → Corner style).
Margin top (desktop)	0 to 80 px, step 4	0 px
Margin bottom (desktop)	0 to 80 px, step 4	0 px
Margin top (mobile)	0 to 80 px, step 4	0 px
Margin bottom (mobile)	0 to 80 px, step 4	0 px

Spacer

Empty space, with its own height on desktop and mobile.

Block settings (2)

Setting	Values	Default	Notes
Height (desktop)	0 to 200 px, step 4	40 px
Height (mobile)	0 to 160 px, step 4	24 px

Liquid

Your own Liquid or HTML. See Custom code.

Block settings (1)

Setting	Values	Default	Notes
Liquid code	Liquid code	Empty	Add app snippets or any other Liquid / HTML code.

A mega menu is a panel that opens under a top level item of the main menu. Add a Mega menu block to the Header section, type the exact title of that menu item in Linked menu item, then add the blocks below inside it. On phones the panel becomes an accordion in the mobile menu.

The panel itself: which menu item opens it, its grid, width and padding.

Block settings (13)

Setting	Values	Default	Notes
Linked menu item	Text	Empty	Exact title of a top-level item in the main menu (e.g. "Catalog"). The panel shows when hovering that item.
Grid
Grid alignment (desktop)	Left Center Right	Center
Columns (desktop)	2 to 6	4
Grid spacing (desktop)	0 to 60 px, step 2	24 px
Block spacing (mobile)	0 to 40 px, step 2	0 px
Panel dimensions
Panel width (desktop)	Full width Max width	Full width
Max width (desktop)	800 to 1600 px, step 50	1200 px	Used only when "Max width" is selected.
Accordion max height (mobile)	40 to 100 vh, step 5	75 vh
Inner padding
Top padding (desktop)	0 to 80 px, step 2	30 px
Bottom padding (desktop)	0 to 80 px, step 2	38 px
Horizontal padding (desktop)	0 to 100 px, step 2	50 px
Vertical padding (mobile)	0 to 40 px, step 2	0 px
Horizontal padding (mobile)	0 to 40 px, step 2	0 px

Accepts these blocks inside it: Link column, Image, Products, Promo, Banner.

Link column

A heading and the links of one of your menus.

Block settings (14)

Setting	Values	Default
Heading	Text	Column
Menu	Menu	Empty
Layout
Alignment	Same as panel Left Center Right	Same as panel
Width (desktop)	Normal Double	Normal
Spacing
Title to links spacing (desktop)	0 to 32 px, step 2	12 px
Title to links spacing (mobile)	0 to 24 px, step 2	8 px
Link spacing (desktop)	0 to 24 px, step 2	8 px
Link spacing (mobile)	0 to 24 px, step 2	8 px
Vertical padding (desktop)	0 to 40 px, step 2	0 px
Vertical padding (mobile)	0 to 32 px, step 2	12 px
Typography
Heading size (desktop)	12 to 32 px	18 px
Heading size (mobile)	11 to 28 px	16 px
Link size (desktop)	10 to 20 px	14 px
Link size (mobile)	10 to 20 px	14 px

Image

An image with an optional caption and link.

Block settings (20)

Setting	Values	Default	Notes
Image	Image	Empty	Set the focal point directly on the image (Shopify image editor).
Link	Link	Empty
Image crop
Ratio (desktop)	Original (never crops) Square (1:1) Landscape (4:3) Landscape (3:2) Landscape (16:9) Portrait (3:4) Portrait (4:5)	Portrait (4:5)
Ratio (mobile)	Original (never crops) Square (1:1) Landscape (4:3) Landscape (3:2) Landscape (16:9) Portrait (3:4) Portrait (4:5)	Square (1:1)
Crop	Fill the frame (may crop) Contain (never crops)	Fill the frame (may crop)
Dimensions and placement
Max image width (desktop)	100 to 400 px, step 10	220 px
Image width (mobile)	40 to 160 px, step 4	84 px
Image alignment (desktop)	Same as panel Left Center Right	Same as panel
Width (desktop)	Normal (1 column) Double (2 columns)	Normal (1 column)
Vertical padding (desktop)	0 to 40 px, step 2	0 px
Vertical padding (mobile)	0 to 32 px, step 2	12 px
Caption top spacing (desktop)	0 to 32 px, step 2	10 px
Image / caption gap (mobile)	0 to 32 px, step 2	14 px
Caption
Caption	Text	Empty
Caption position	Below the image On the image (bottom)	Below the image
Caption alignment	Same as panel Left Center Right	Same as panel
Caption size (desktop)	9 to 20 px, step 0.5	12.5 px
Caption size (mobile)	9 to 16 px, step 0.5	11 px
Mobile
Show (mobile)	Checkbox	On
Layout (mobile)	Image + caption side by side Full width (stacked)	Image + caption side by side

Products

Two to four products as mini cards with image, title and price. With Show product tagline on in the Header section, each card also shows the product's custom.tagline metafield.

Block settings (19)

Setting	Values	Default	Notes
Products	Product list	Empty	2 to 4 products, rendered as mini cards (image, title, price).
Grid
Grid columns (desktop)	Automatic 2 3 4	Automatic
Grid columns (mobile)	1 2 3	2
Card gap (desktop)	0 to 40 px, step 2	16 px
Card gap (mobile)	0 to 32 px, step 2	12 px
Width (desktop)	Normal Double	Double
Card alignment	Same as panel Left Center Right	Same as panel
Vertical padding (desktop)	0 to 40 px, step 2	0 px
Vertical padding (mobile)	0 to 32 px, step 2	12 px
Thumbnails
Thumbnail ratio	Original (never crops) Square (1:1) Portrait (4:5) Portrait (3:4) Landscape (4:3)	Square (1:1)
Thumbnail crop	Contain (never crops) Fill the frame (may crop)	Contain (never crops)
Content
Show price	Checkbox	On
Heading size (desktop)	10 to 24 px	14 px
Heading size (mobile)	9 to 20 px	13 px
Title top spacing (desktop)	0 to 32 px, step 2	10 px
Title top spacing (mobile)	0 to 24 px, step 2	8 px
Price size (desktop)	10 to 18 px	12 px
Price size (mobile)	9 to 16 px	11 px
Mobile
Show (mobile)	Checkbox	On

An image tile with a heading, a short text and a link.

Block settings (22)

Setting	Values	Default	Notes
Image	Image	Empty	Set the focal point directly on the image (Shopify image editor).
Heading	Text	Promo
Text	Text	Empty
Link	Link	Empty
Image
Image ratio	Original (never crops) Square (1:1) Portrait (4:5) Portrait (3:4) Landscape (4:3)	Square (1:1)
Image fit	Fill the frame (may crop) Contain (never crops)	Fill the frame (may crop)
Tile max width (desktop)	0 to 400 px, step 10	0 px	0 = uses the header's mega menu tile width setting.
Image width (mobile)	40 to 160 px, step 4	84 px
Layout
Alignment	Same as panel Left Center Right	Same as panel
Width (desktop)	Normal Double	Normal
Vertical padding (desktop)	0 to 40 px, step 2	0 px
Vertical padding (mobile)	0 to 32 px, step 2	12 px
Typography
Heading size (desktop)	12 to 32 px	18 px
Heading size (mobile)	11 to 28 px	16 px
Text size (desktop)	9 to 20 px, step 0.5	12.5 px
Text size (mobile)	9 to 16 px, step 0.5	11 px
Spacing
Title top spacing (desktop)	0 to 32 px, step 2	14 px
Title top spacing (mobile)	0 to 24 px, step 2	0 px
Text top spacing (desktop)	0 to 24 px	5 px
Text top spacing (mobile)	0 to 24 px	2 px
Image / text gap (mobile)	0 to 32 px, step 2	14 px
Mobile
Show (mobile)	Checkbox	On

A wide banner with a background image, a heading, a short text and a button or link.

Block settings (33)

Setting	Values	Default	Notes
Background image	Image	Empty	Set the focal point directly on the image (Shopify image editor).
Heading	Text	Banner
Short text	Text	Empty
Link	Link	Empty
Dimensions
Minimum height (desktop)	80 to 400 px, step 10	160 px
Minimum height (mobile)	60 to 300 px, step 10	120 px
Ratio (optional)	None (fixed height) Original (never crops) Panoramic (21:9) Wide (16:9) Banner (3:1) Banner (2:1) Landscape (4:3)	None (fixed height)	When a ratio is set, it applies as long as the minimum height is met.
Width in columns (desktop)	Full width 1 column 2 columns	Full width
Background image
Background crop	Fill the frame (may crop) Contain (never crops)	Fill the frame (may crop)
Legibility overlay
Overlay color	Color	`#000000`
Overlay opacity	0 to 100%, step 5	45%
Overlay style	Side gradient Uniform	Side gradient
Content
Content horizontal alignment	Left Center Right	Left
Content vertical alignment	Top Middle Bottom	Middle
Max text width (desktop)	30 to 100%, step 5	60%
Max text width (mobile)	40 to 100%, step 5	80%
Vertical padding (desktop)	0 to 60 px, step 2	24 px
Horizontal padding (desktop)	0 to 80 px, step 2	32 px
Vertical padding (mobile)	0 to 40 px, step 2	16 px
Horizontal padding (mobile)	0 to 40 px, step 2	18 px
Typography
Heading size (desktop)	14 to 60 px, step 2	26 px
Heading size (mobile)	13 to 40 px	19 px
Text size (desktop)	10 to 24 px	13 px
Text size (mobile)	9 to 20 px	11 px
Text top spacing (desktop)	0 to 32 px, step 2	8 px
Text top spacing (mobile)	0 to 24 px, step 2	6 px
Button
Button label	Text	Empty
Button style	Underlined link Button Glass	Underlined link
Button size (desktop)	10 to 20 px	13 px
Button size (mobile)	9 to 18 px	11 px
Button top spacing (desktop)	0 to 40 px, step 2	14 px
Button top spacing (mobile)	0 to 32 px, step 2	10 px
Mobile
Show (mobile)	Checkbox	On

Settings most sections share

Color scheme

Section background

Spacing, desktop and mobile

Transparent header

Inner panel and text color

Heading level

Text left empty

Spam protection notice

Header and footer

Announcement bar

Block: Message

Header

Footer

Block: Brand / logo

Block: Link column

Block: Newsletter

Block: Social

Block: Text

Block: Localization

Hero and storytelling

Hero

Slideshow

Block: Slide

Products showcase

Block: Spotlight

Featured set

Image with text

Rich text

Video

Marquee

Before and after

Lifestyle strip

Products and collections

Featured collection

Block: Promo tile

Collection list

Block: Collection

Lookbook

Block: Hotspot

Compare products

Block: Row

Recently viewed

Trust and engagement

Multicolumn

Block: Column

Testimonials

Block: Testimonial

Logo list

Block: Logo

Countdown

Newsletter

Newsletter popup

Socials

FAQ

Block: FAQ item

About page

Brand story hero

Comparison panels

Checklist banner

Block: Check item

Gallery banner

Block: Element

Contact and stores

Contact

Store locator

Block: Custom Liquid

Layout, code and apps

Divider

Custom Liquid

Apps

Template sections

Product

Product recommendations

Sticky add to cart

Collection

Block: Promo tile

Search

Collections list

Cart