Page-Layout Pickers (Product, Cart, PLP & the LPE Journey Pages)
Choose a design for every customer-facing page — product, category, cart, checkout, account, and more — and preview it with your real store data before you publish.
Beyond your homepage, BillionBiz lets you pick a design for every other page your customers see — the product page, the category listing, cart and checkout, account and order pages, utility pages (404, pop-up notifications, the cookie banner), and the About Us, Contact Us, and Maintenance pages. Every one of these pages shares the same picker experience: real store data rendered inside whichever design you're considering, before you commit to anything.
Screen: Online Store → Theme → Page Layouts (the Online Store group is called storefront in the new admin sidebar) for the pages below, organised around the customer journey. Online Store → Pages is a second entry point that lists the About Us, Contact Us, and Maintenance pickers alongside legal policies (which are plain content, with no template picker). On the new admin, the Contact Us card sits in the content pages group of that hub and opens the Contact Us editor straight away; it is no longer a placeholder. The card is hidden for team members without branding access, so if you cannot see it, ask a store admin to open it or to adjust your permissions.
How it works, in one paragraph
- A template is the design shown in the picker — for most pages this is a single list; product, category, cart, and checkout pages mix structurally different layouts and colour/style "skins" in that same list.
- A variant, where a page has one, is a different configuration of the same template rather than a different design — today only the product page has real variants (see below).
- A theme is your store-wide visual language (colour, type, corner rounding). It applies on top of whichever template you pick, so any template works with any theme.
- Nothing is customer-facing until you press Publish; Save Draft keeps your work private.
Designs labelled (2026) are opt-in
New designs in the page pickers carry a (2026) suffix in their name. They are available on every plan, and they are opt-in: no existing store changes to one until you pick it in the picker and publish. The set is still growing, so the list in your picker is the source of truth.
Before you configure anything: premium defaults
You don't have to pick a design before your store goes live. Every page below ships with a default that renders automatically until you publish your own choice — and as of the 2026-07-12 premium-by-default rollout, those defaults are the same polished designs you'd otherwise have to pick yourself, not a plain placeholder look:
| Page | Default before you configure it |
|---|---|
| Product listing (Category page) | New stores: the Left-rail filters + grid template with the Editorial look. Existing stores with no saved listing layout: Meridian style skin |
| Cart | Geometric style skin |
| Contact Us | The Aurora layout — a floating contact form over an animated gradient scene, with business hours, socials, FAQ link, email, and phone shown by default |
| Header | The centered logo, split navigation layout |
| Footer | The centered minimal luxury layout |
| Order Listing | Chronicle Editorial |
Why did my store's look suddenly change?
If your store went live before 2026-07-12 and you never explicitly picked a design for one of the pages above, its look changed on that date as part of this rollout — you were moved from an older, plainer default (the previous defaults were the "Dawn" skin for the product listing and cart pages, an "Editorial" layout for Contact Us, and a hand-built navbar/footer) to the premium ones in the table above. If you'd already picked and published your own design for a page, this rollout did not touch it — publishing always takes priority over the default, on any page.
Nothing about how you change these defaults is different — use the same picker described in this page for each one (Online Store → Theme → Page Layouts for Header, Footer, Category, and Cart; Online Store → Pages for Contact Us; the page-identity switcher for Order Listing, see below). Publishing any design for a page — default or not — replaces the automatic default for that page going forward.
Opening a page editor
From Online Store → Theme → Page Layouts, pages are grouped into an accordion that follows the customer journey: Header and Footer (always visible, at the top and bottom), Customers browse (Product, Category, Wishlist), Customers buy (Cart), Customers complete the order (Order confirmation, Thank you, Order detail, Order tracking), Customers return (Login, Sign up, Profile, Forgot password, Email verification), and Edge cases (404). Click any page to open its picker.
The same journey pages are also reachable as a flat list from Online Store → Pages, alongside the About Us, Contact Us, and Maintenance page pickers (see About Us, Contact Us & Maintenance below) and your legal policies. Checkout's picker specifically only has an entry point there, not in the Page Layouts accordion.
The editor's top bar
| Control | Purpose |
|---|---|
| Back button | Return to wherever you opened the picker from |
| Page-identity button | Shows the page you're editing; click it to open Every page of your store — the same page switcher used across BillionBiz's page editors (see Switching between your store's pages) — and jump directly to any other page type, grouped by journey stage |
| Draft status | Shows whether your current picks are unsaved, saved as a draft, or already published |
| Desktop / Mobile toggle | Switch the canvas between a desktop-width and mobile-width preview |
| Save Draft | Saves your design privately — customers still see the last published version |
| Publish | Makes your current design live for customers immediately |
The two tabs: Design and Config
The picker's left sidebar has two tabs, not the three-or-four separate tabs earlier versions of this screen had — Templates, Variants, and Themes now render together as one Design tab instead of three you click between, with a jump-chip row at the top so you can scroll straight to the section you want:
- Template — design cards for every template available for this page. Most cards use a saved thumbnail; a template can instead use its live renderer preview and metadata colours. The template currently live on your store carries a green Active badge; clicking a different card marks it Selected until you save or publish.
- Variant — only appears for pages that have more than one variant. Today that's the product page's four feature-density presets (below); category, cart, and checkout pages currently have only a single default variant, so this section is hidden for them rather than shown empty.
- Theme — a shortcut into the Theme Hub, right inside the page editor. Applying a theme from here changes your entire storefront, not just this page — see The Theme Hub. Exception: if your store has any saved custom brand-kit theme packs, they appear at the top of this same Theme section and behave differently from the built-in packs below them — see Custom brand-kit themes in the Theme tab below.
The Config tab is still its own tab, but it's no longer a flat Page Text / Capabilities / Color Overrides list — it's a search box plus six group cards: Content (headings, labels, and other copy, grouped by which part of the page they belong to), Media (images this template uses), Features (capability toggles — what used to be the Capabilities list, now shown as on/off rows), Layout (structural choices, where the template has them), Page Style (typography, spacing, motion, and colour tokens for this page), and Advanced (the underlying colour tokens and any per-token overrides). Click a card to slide into its fields; press Esc to slide back out.
This screen used to have four separate tabs
If you've used this picker before and remember four tabs across the top, that build has been retired — Templates/Variants/Themes are now one Design tab (peer sections, not separate clicks) and Config is reorganised into the six group cards above. The underlying pages, templates, and fields are unchanged — only how you navigate to them is different.
The canvas is the real thing
The right-hand preview renders using the same templates and themes your live storefront uses — it is not a wireframe or mock-up. If it looks right in the preview, it looks right on your store.
Some templates need a paid plan
A handful of pickers mark their most elaborate designs "flagship" — locked behind an Upgrade badge until your store is on any paid plan (Starter, Growth, Pro, or Max; Free is the only tier that's locked out). Header and Footer are gated this way in full — every one of their templates requires a paid plan (see Navigation, Header & Footer); About Us and Maintenance gate most, but not all, of their templates the same way (see About Us Page Editor and Maintenance Mode Page Editor). A locked card does nothing when clicked; hovering it shows "Upgrade to a paid plan to unlock flagship templates."
Custom brand-kit themes in the Theme tab
If your store has any custom theme packs saved — created via Online Store → Theme → Themes → Fine-tune and kept on that screen's Custom tab (see The Theme Hub) — they now also show up right inside every page's own picker: open Design → Theme on any page and your saved custom packs appear as small preview cards under a Your Custom Themes heading, above the built-in theme packs. This shows up on every page picker that has a Theme section — Product, Category, Cart, Checkout, Wishlist, the order and account pages, 404, and the landing page composer.
Clicking one of your custom packs here works differently from clicking a built-in pack in the same Theme section, so it's worth knowing the difference before you click:
| Built-in theme packs (below the custom row) | Your custom brand-kit themes (top row) | |
|---|---|---|
| Where it applies | Your entire storefront | This one page only |
| When it takes effect | Immediately — no save step | Only after you press Save Draft or Publish on this page |
In the Store Editor, choosing a custom theme on the Category page counts as an explicit theme choice for that page. The page keeps that theme when you save, instead of falling back to following the store-wide theme (see the listing page follows the store theme).
Header and Footer don't have a Theme tab
The Header and Footer pickers use a different, chrome-only gallery with no Theme section at all — built-in or custom. To apply one of your custom brand-kit themes to your header or footer, go to Online Store → Theme → Themes directly and apply it from there — see The Theme Hub; that path applies store-wide, including the header and footer.
Troubleshooting: my custom theme doesn't show up in a page's Theme tab
Two likely causes: (1) you haven't saved a custom theme yet — open Online Store → Theme → Themes → Fine-tune, adjust the colour tokens, and save the result; it then appears both on the Themes screen's Custom tab and here; or (2) you're editing the Header or Footer, which has no Theme tab at all — see above.
Style and motion in the current Store Editor
Use these controls to change the treatment of your product listing or product detail page without changing its catalogue data. They belong to the current Store Editor; the classic page-layout picker described above does not provide these zone and element controls.
Screen: Online Store → Theme → Page Layouts → Customers browse → Category page for listings,
or Product page for product details. Once Store Editor opens, use Pages → Browse → Product Listing or Product
Detail to switch pages. The direct editor paths are /store-editor/PLP and /store-editor/PDP.
Open the page and its Design inspector
Choose the listing or product page, select a template, and open Design in the right inspector. For an example with zone controls, use Left-rail filters + grid on the listing page or Editorial on the product detail page. Keep the page selected when you want to see all its design groups; select a region when you want to work on that part of the page.
Choose a supported control
Open the relevant group below. A grey row marked Not supported by this template cannot be edited for the selected template. Support can differ between desktop and mobile, so inspect both previews before publishing.
Preview with suitable catalogue data
Use a product with images, variants, a description, and specifications when editing product regions. On listings, preview a category with enough products to show filters and pagination. Appearance settings style an existing region; they do not create missing product data or turn on a hidden region.
Publish and check the customer journey
Publish the page after reviewing the previews. Open a category on your storefront, use its filters or sorting, then open a product and check its gallery, purchase panel, and sections below. A saved draft is private; customers see the published page.
Existing stores keep their template treatment until you choose an override. Template default means “let this template decide,” rather than a fixed colour, size, or spacing value.
Apply a one-click look
A look sets a page's style settings in one go, so you do not have to set each Design control by hand. Currently one look is offered, Editorial. It is available on the listing page with Left-rail filters + grid and on the product page with Editorial, in light colour scheme only.
Screen: Store Editor → Pages → Browse → Product Listing or Product Detail. The Looks control sits at the top of the page inspector, above the design groups, and shows on the Design, Content, and Settings tabs alike. Open the editor from Online Store → Theme → Page Layouts → Customers browse → Category page or Product page.
Open the page and pick a supported template
Choose Product Listing and select Left-rail filters + grid, or choose Product Detail and select Editorial. Any other template shows the unavailable notice instead (see the troubleshooting note below).
Confirm the colour mode is not dark
Go to Store Editor → Settings → Theme → Fine-tune → Color mode. Auto follows your active theme, so a dark theme counts as dark. Light is always supported. Dark is not.
Select Editorial under Looks
In the Looks control, select Editorial. The page's style settings change to that look's values at once, and the preview updates. The selected look is highlighted.
Adjust individual settings if you want
Every Design control stays editable after you apply a look. Change motion, spacing, regions, typography, or buttons as described in the sections below.
Publish
Applying a look edits your draft. Publish the page to show it to customers.
Looks apply to one page type only. Applying Editorial on Product Listing does not change Product Detail, and the reverse. Apply it on each page you want, and publish each one.
What the Looks control shows
| What you see | What it means |
|---|---|
| Editorial highlighted | The page's style settings match the Editorial look. |
| Customised | No look matches exactly, but a setting that Editorial controls is saved on the page. It appears only where a look is offered. Select Editorial to restore the look's values. |
| Editorial: current look (no longer offered) | The page's settings match Editorial, but the template or colour mode no longer supports it. The text is read-only, and merely viewing it does not change your saved settings. |
| No one-click looks are available for this layout and color scheme yet. Switch to a supported layout in light mode to use them. | No look applies to the selected template and colour mode. The picker is replaced by this notice. |
Selecting Editorial overwrites only the settings the look controls. Every other setting on the page is left as it is.
New stores start on Editorial
A store created after this change starts with a Left-rail filters + grid listing page and an Editorial product page, both on the Editorial look. Existing stores keep their current settings, and nothing is applied to them automatically.
Troubleshooting: why is Looks unavailable or greyed out?
The Looks control shows the notice instead of a button when no look supports your setup. Check these in order:
- The template. On Product Listing the look needs Left-rail filters + grid. On Product Detail it needs Editorial. Select one in the template gallery.
- The colour mode. If Store Editor → Settings → Theme → Fine-tune → Color mode is Dark, or Auto with a dark theme active, no look is offered. Set Light, or choose a light theme.
- You are on the other page type. A look applied on one page type does not carry over to the other. Open the page you meant to style.
If the page says Editorial: current look (no longer offered), the same two checks apply: return to a supported template in light mode and the button becomes available again.
Set page motion and outer spacing
Screen: Store Editor → Pages → Browse → Product Listing or Product Detail → Design. Open Page for Motion, Layout for Spacing rhythm, and Typography & colors for Type pairing and the page-level Shadow. If you have selected a region, return to the page before looking for page-wide controls.
Choose the motion treatment
Open Page → Motion. Standard keeps the template's authored motion. Cinematic uses a longer shared duration with an emphasized ease; Snappy uses a shorter shared duration; Bouncy uses a spring-like ease; None makes CSS effects effectively immediate. An override replaces existing CSS transition and animation durations with the preset's shared duration while keeping their authored properties and delays. It does not add animation to a static element.
Set the space around the page content
Open Layout → Spacing rhythm. Compact gives the page less vertical space at its outer edges, Generous gives it more, and Standard preserves the template's spacing. This does not resize the gaps between individual products or the padding inside the purchase panel; use the zone controls below for those tasks.
Check interactions before publishing
In each preview, hover a product image or button and open a control that already animates. Then publish and repeat on the storefront. Motion applies to modern listing layouts, not the older listing skins. Customers who request reduced motion through their device settings see minimized CSS motion when you have selected a motion override.
The same Page group also holds four page-wide layout controls. Each starts at Template default:
| Control | Choices | What customers see |
|---|---|---|
| Content width | Narrow, Standard, Wide, Full | The maximum width of the page content (56rem, 72rem, 88rem, or no limit). |
| Side margins | None, Sm, Md, Lg | The space at the left and right edges of the page. |
| Section gap | None, Sm, Md, Lg, Xl | The vertical space between the page's sections. |
| Type scale | Sm, Md, Lg | Scales the page's text up or down together. Text never drops below 0.75rem. |
These four are supported by all 26 product-page templates and by 12 listing templates, so on a product page they are always editable. The 12 listing templates are Left-rail filters, Top-bar chips, Drawer, Infinite faceted, Category drilldown, Editorial masonry, Split lookbook, Dense catalog, Staggered deal grid, Curved scroll carousel, Auto-configurator stepper, and Embedded app widget ordering. Older listing skins such as Dawn have none of them.
To change the product page's shared fonts, open Typography & colors → Type pairing, choose a pair, preview a heading and body text, and publish. This pairing is scoped to the page; it does not replace your store-wide theme. Text with an explicit element font may keep that font. To make an element follow the page again, reset its Font role or family, or choose Heading or Body.
A page allows at most 3 distinct fonts set through element Font role or family rows. A fourth is refused with an inline message; see the font-family limit below. Type pairing is not counted.
The page-level Shadow offers Default, Soft, Clay, Hard offset, Inset, Glow, and None. It changes surfaces that use the shared shadow treatment; a template with its own fixed shadows may retain them. For a specific supported region, choose that region's Shadow instead. A zone setting takes priority over the page fallback; the template is last. This precedence applies to matching properties, not to unrelated settings: changing a zone's margin does not remove the outer padding from Spacing rhythm.
Motion or spacing looks unchanged
Confirm that you published the page you edited and opened the matching storefront page. Choose an interaction that already has a CSS effect; motion timing cannot be judged from a still image. Spacing rhythm changes outer vertical space, not every gap inside a template. Older listing skins such as Dawn do not use these new listing motion and zone controls.
Style each region with appearance controls
Screen: Store Editor → Pages → Browse → Product Listing or Product Detail → Design → the region's Appearance group. Group names include Banner · Appearance, Filter · Appearance, Card · Appearance, Buybox · Appearance, and Spec sheet · Appearance. The inspector uses Filter, Card, and Buybox for the regions called Filters, Product grid, and Buy box in the page outline.
| Page | Appearance group | What customers see |
|---|---|---|
| Product Listing | Banner | The listing's banner or introduction, when the template shows it. |
| Product Listing | Breadcrumb | The trail back to the store or category. |
| Product Listing | Filter | The filter surface, including its mobile drawer or panel where supported. |
| Product Listing | Toolbar | The result-count, sorting, and search area. Find it in the page's Design inspector. |
| Product Listing | Card | The product-grid surface. These settings do not guarantee a separate box around every card. |
| Product Listing | Pagination | The supported page-navigation or load-more area. |
| Product Detail | Breadcrumb | The navigation trail above the product. |
| Product Detail | Gallery | The container around product media, not the content of the images. |
| Product Detail | Buybox | The purchase panel containing title, price, options, and actions. |
| Product Detail | Description | The product description or story section where present. |
| Product Detail | Spec sheet | The specification or variant-comparison section where present. |
| Product Detail | Reviews | The customer-review section when enabled and populated. |
| Product Detail | Cross sell | The related or recently viewed product section, where supported. |
| Product Detail | Sticky | The sticky purchase surface. In Editorial, its appearance applies on mobile; independent sticky title and price typography are unavailable. Find it in the page's Design inspector. |
Every group has the same appearance vocabulary. The active rows depend on the selected template:
| Control | What to choose and what it changes |
|---|---|
| Surface style | None gives a transparent surface without the preset border or shadow; Outline adds a thin border; Filled adds the theme surface colour; Elevated adds the surface colour and a shadow. Separate overrides below can replace parts of this preset. |
| Corner radius | None, Sm, Md, Lg, or Xl changes the rounding of the region container. |
| Padding | None, Sm, Md, or Lg sets space inside the region, between its content and edges. |
| Margin | None, Sm, Md, or Lg adds space above and below the region. It does not set left and right page gutters. |
| Inner gap | Sm, Md, or Lg changes spacing between items in a supported grid, flex container, or stacked region. |
| Border width | None, Thin, Medium, or Thick overrides the surface preset's border thickness. |
| Shadow | None, Sm, Md, or Lg overrides the region's shadow. The shadow sizes follow the active shadow treatment. |
| Background colour | Select a theme colour or a custom colour for the region's background. |
| Border colour | Set the outline's colour. It is visible only when a border has width. |
| Text colour | Set the region's text colour; an explicit element Colour takes priority. |
Each row can remain at Template default independently. Border width and Border colour are hidden when Surface style is None; previously saved values are kept, so choosing another surface style can reveal those controls again. Choosing None does not clear separate custom background or shadow settings. Reset those rows too if you want a plain surface.
Give the purchase panel breathing room
On Product Detail, choose Editorial and open Design → Buybox · Appearance. Set Surface style to Filled, Padding to Md, and Corner radius to Lg. Customers see a filled purchase panel with space between the text and its edges.
Separate regions without changing their contents
Set Margin to Md for space above and below the purchase panel. Use Inner gap for space between its supported children. For listings, open Card · Appearance and adjust Inner gap to change spacing in the grid; this styles the grid surface rather than copying a card style to other pages.
Choose colours that follow your theme
In Background colour, Border colour, or Text colour, prefer an option starting with Theme: when the colour should follow the theme. Choose Custom colour for a fixed colour. Then check readable text against the chosen background in both previews and publish.
If a pair is too hard to read, a red note appears inside that same group (Appearance, Text, or the buttons group), for example: "Text colour on Background colour has a contrast of 2.10:1 (light theme); WCAG AA needs 4.5:1." The note names the pair, the measured ratio, the theme it failed in, and the ratio required. It is a warning only: it does not stop you saving or publishing, so fix the colours yourself.
When the contrast warning shows, and when it stays silent
The check runs only when both colours of a pair are explicit: a Theme: colour or a Custom colour. A pair where either side is still Template default is never checked, so no warning does not prove the template's own colours are readable. The pairs checked are a zone's Text colour against its Background colour, an element's Colour against the zone background, and a button's text colour against its own background colour. Large text (the 2xl size step and above) needs 3:1; everything else needs 4.5:1. If your theme has a dark variant, the light and dark themes are both checked, and the note says which one failed. To clear it, change one of the two colours or use Reset to template default on the row.
Which templates support which regions
Listing zone controls (appearance, text, and buttons and controls) work on the same 12 templates that support the page-layout controls above. Within them, some regions are narrower: Banner is available on Left-rail, Category drilldown, Split lookbook, Staggered deal grid, Curved scroll carousel, and Embedded app widget ordering; Breadcrumb on Left-rail and Category drilldown only; Pagination on 10 of the 12. Filter, Toolbar, and Card are available on all 12, except that Filter · Text → Heading is limited to 5 of them. Details on a Left-rail or Top-bar chips card applies on desktop only.
Product-page zone controls work on 14 templates: Editorial, Immersive, Boutique, Brutalist, Bento, Glass, Gallery first, Horizon, Glass tech, Compass, Industrial terminal, Heritage craft, Galaxy diagonal, and Canvas. Within them, Breadcrumb is limited to Editorial, Brutalist, Bento, Glass, and Gallery first; Sticky appearance to Editorial, Immersive, Boutique, Brutalist, Bento, and Glass (and on Editorial it applies on mobile only). The other 12 product templates support the page-layout controls only, and every zone row is disabled for them. Some Boutique description text rows apply on desktop only.
A row for a region or element the selected template cannot render is greyed out and shows Not supported by this template (or a reason note). It stays visible so you can tell the control exists. Switching templates does not delete a value you set, but when you save, only values the active template supports are kept, and a zone or text value that is still at its template default is not stored. So switching to an unsupported template and saving can drop your overrides. Switch back to a supporting template before saving if you want to keep them. A section that is turned off or has no data stays absent whatever its appearance settings.
Why does a region still look different?
Check that the row is editable for your template and that the region is actually visible. A custom Background colour, Border width, or Shadow overrides the corresponding part of Surface style. Reset the specific row to let the preset or template decide again. Publish, then check a fresh storefront page; older listing skins do not support these zone settings.
For the shared treatment of listing cards and product-page recommendations, see Store-wide Product cards style. That guide separates store settings from local grid and page overrides.
Change one element's typography
Screen: Store Editor → Pages → Browse → Product Listing or Product Detail → Design → the region's Text group → the element. For example, open Buybox · Text → Title to change the product heading without changing the price, or Card · Text → Price for listing prices.
| Text group | Elements you can style when supported |
|---|---|
| Banner · Text | Heading, Body |
| Breadcrumb · Text | Text |
| Filter · Text | Heading, Item |
| Toolbar · Text | Label |
| Card · Text | Title, Price, Details |
| Pagination · Text | Label |
| Buybox · Text | Eyebrow, Title, Price, Body, Label, Button text |
| Description · Text | Heading, Body |
| Spec sheet · Text | Heading, Label, Value |
| Reviews · Text | Heading, Body |
| Cross sell · Text | Heading |
Gallery has no text-element group. Sticky title and price rows are not supported by Editorial. Details on Left-rail product cards applies on desktop; it does not add a details line to mobile cards. Other templates can have their own viewport limits: check the previews instead of assuming every text element exists on both sizes.
| Control | What it does |
|---|---|
| Font role or family | Body and Heading follow the page's font roles. System sans, System serif, Inter, Playfair display, and Dm sans choose a particular family for this element. |
| Size scale | Choose a named size from Xs through 4xl. Larger heading sizes adapt to the viewport; this is not a raw pixel-size field. |
| Weight | Choose 300, 400, 500, 600, 700, or 800, from lighter to heavier. The visual result also depends on the chosen font. |
| Style | Normal or Italic. |
| Letter spacing | Tight, Normal, Wide, or Wider changes the space between letters. |
| Case | None preserves your text's case; Uppercase, Lowercase, or Capitalize changes its display. It does not rewrite product data. |
| Alignment | Start, Center, End, or Justify aligns the text within its element. |
| Colour | Choose a theme colour or custom colour for this element, overriding the zone's Text colour. |
Select the exact element
Open Product Detail → Design → Buybox · Text → Title. Change Font role or family to Heading to follow the page heading font, or choose Playfair display for this title alone.
Adjust size and emphasis independently
Choose a Size scale, then set Weight, Style, and Letter spacing as needed. Use Case and Alignment for the title's display. Other elements stay on their own settings.
Check colour inheritance
Leave Colour at Template default to use the zone colour or fallback. Set it explicitly only if this title needs a different colour. Element overrides win over the zone; zone settings win over the page fallback; the template is last where it supplies the remaining property.
Review the actual text and publish
Preview long titles on mobile as well as desktop, then publish and open that product on the storefront. These controls change how text looks; edit the product record to change the words, price, or specifications.
A font or text change is not visible
Confirm the element exists in that template and viewport, and that you published the right page. An explicit element family can override Type pairing; reset Font role or family to remove it. The row action is Reset to store card style for local listing-card text and Reset to template default for other text. A missing review, specification, or metadata line needs the matching catalogue data or content toggle before its typography can be seen.
A font change is refused: this page already uses 3 font families
One page can use at most 3 different font families across all its Font role or family rows. If you pick a fourth distinct family, it is not saved, and the row shows: "This page already uses 3 font families. Pick one of them, or reset another text style first." Choose a family the page already uses (those stay selectable), or open another element that has its own family and use Reset to template default on it to free a slot, then pick the new one. Clearing a row is always allowed.
Style supported buttons and form controls
Screen: Store Editor → Pages → Browse → Product Listing or Product Detail → Design → Buttons and controls. Use a supporting template such as Left-rail filters + grid or Editorial. These controls affect existing actions and fields; they do not enable a hidden action or add an input to a template that does not render it.
Choose the button role
Open Primary button · Style for the listing's main product action or Editorial's add-to-cart button. Use Secondary button · Style for secondary actions such as supported wishlist, filter, or pagination buttons. Choose Shape (Square, Rounded, or Pill) and Fill style (Solid, Outline, or Ghost).
Set size and colours
Use Size (Sm, Md, or Lg) for preset padding and Full width to stretch the button across its container. Corner radius, Border width, Horizontal padding, and Vertical padding provide numeric overrides; a numeric corner radius takes priority over Shape, and numeric padding takes priority over Size. Set Text colour and Border colour as needed. With Fill style → Solid, use Fill → Solid with Solid colour, or Fill → Gradient for a background blend. Outline and Ghost keep a transparent background, even when a custom fill is saved.
Style the fields shoppers actually use
Choose the applicable rows below. On a product with size or colour variants, select different options and check their selected and unavailable states. On a listing, open filters and sorting and check the matching fields in desktop and mobile previews.
Publish and check the actions
Publish, then add a product to the cart, select a variant, and change a filter on the storefront. Styling does not remove stock limits or make a disabled action available. Keyboard focus and unavailable states still need to be recognizable against your chosen colours.
| Control | What it changes when supported |
|---|---|
| Inputs · Border style; Inputs · Corner radius | The border (None, Outline, or Underline) and rounding of supported text inputs, such as listing search or product-page fields. |
| Select menus · Border style; Select menus · Corner radius | The same border and rounding choices for rendered select menus, such as sorting. A custom mobile sheet is not a native select menu. |
| Variant chips · Style | Outline, Filled, Pill, or Swatch ring changes the product option treatment. Swatch ring needs a colour option to show a colour swatch. |
| Variant chips · Corner radius; Variant chips · Selected colour | Overrides chip rounding and the selected option's accent. A specific corner radius takes priority over the style's preset radius. |
| Quantity stepper · Style; Quantity stepper · Corner radius | Boxed, Inline, or Pill changes the quantity control; the radius row can override its preset rounding. |
| Filter controls · Checkbox shape; Filter controls · Radio shape | Chooses Square or Rounded for checkboxes and Circle or Square for radios that the listing template actually renders. |
| Filter controls · Active filter style | Outline, Filled, or Pill changes supported filter chips. |
| Filter controls · Price slider colour | Changes the accent on the template's supported price-filter controls. It does not turn a preset price filter into a range slider. |
For hover, selected, disabled, and keyboard-focus colours, use the shared Product cards button controls. Those state-colour rows belong to Site-wide → Product cards, not these local page button groups. The local Named style row selects a named button variant defined by the template; leave it empty unless you know that variant name.
Leave a control unset to inherit its styling. Use Reset to store card style for local listing button roles, or Reset to template default for product-page button and form rows. Reset controls removes supported button and form overrides in the group. Publish the local page reset; clearing a listing button role lets a configured shared card style take over.
A button or input has not changed
Confirm the row is supported and the action or field is enabled and present in that template. Check the relevant viewport: some listing layouts use a sorting sheet instead of a select menu. Publish the page, and reset explicit numeric or background overrides if they are taking priority over the preset you chose. Older listing skins do not use these new control styles.
Which setting wins: element, zone, page, template
Several controls can style the same property. For any one property, the most specific saved value wins and the rest act as fallbacks:
| Priority | Where you set it | Example |
|---|---|---|
| 1 (wins) | A single element's Text group | Buybox · Text → Title → Colour |
| 2 | The region's Appearance group (the zone) | Buybox · Appearance → Text colour, Shadow, Padding |
| 3 | The Page group, or the page's Typography & colors → Shadow and Layout → Spacing rhythm | Page → Type scale, page Shadow |
| 4 (last) | The selected template's own design | Anything still on Template default |
Precedence applies property by property. A zone's Margin does not remove the outer vertical space from Spacing rhythm, and a zone Shadow replaces the page Shadow only on that zone. On a listing, a card's text and buttons add one step between the zone and the template: a local value, then the shared Product cards style, then the template.
To find out why a property looks the way it does, work from the top: check the element's row, then the zone, then the page group. The first row that shows Custom value is the one in control. Reset it (see below) to hand the property to the next level.
Move a legacy product listing to a PLP template
A store that has never published a template for its product listing still shows the older listing skin, and the style controls above do nothing there. In the Store Editor, that store sees a strip across the top of the Product Listing page.
Screen: Store Editor → Pages → Browse → Product Listing. The strip reads "Your product listing page uses the legacy layout. Move to a PLP template to get the new layouts, filters and card styles." It appears only on the Product Listing page, and only while no template is published.
Open the Product Listing page
In the Store Editor, open Pages, then Browse, then Product Listing. If the strip is missing, see the troubleshooting note below.
Click Move to a PLP template
The Move to a PLP template button in the strip opens the Change template gallery, the same gallery as the inspector's Change template link. The strip hides while the gallery is open.
Choose a template and click Apply
Select a template in the gallery, then click Apply. This puts the template in your draft only. Nothing is changed on your live store yet.
Publish
Click Publish in the top bar. You publish it yourself; the editor never publishes for you. Once the PLP template is published, the strip disappears and customers see the new listing.
Return to the legacy layout
Once a PLP template is published (or has newer unpublished edits), a small underlined link, Return to legacy layout, appears above the canvas on the Product Listing page.
Click Return to legacy layout
The dialog Return to the legacy layout? opens: "The published PLP template will be taken down and your store will go back to the legacy product listing layout. Your PLP template draft is kept, so you can publish it again later."
Confirm or cancel
Cancel closes the dialog and changes nothing. Return to legacy layout takes down the published PLP template; both buttons are disabled while the request runs. A toast then confirms: "Your store now uses the legacy product listing layout. Your PLP template draft is kept." If nothing was published, the toast says "The PLP template was not published, so there was nothing to take down."
Troubleshooting: the move and return actions
Customers still see the old product list after I applied a template. Apply only saves a draft. Click Publish in the top bar, then open a fresh storefront page.
I returned to legacy and want my template back. The draft was kept. Open Product Listing and click Publish to put the kept draft live again. To use a different template instead, open the Change template gallery, choose it, click Apply, then Publish.
I do not see the strip or the link. Neither shows while the page's publish state is still loading or could not be read; reload the editor. The strip also disappears once a template is published, and neither control appears on other pages.
The return failed. The toast shows the server's message, or "Could not return to the legacy layout. Please try again." Taking a template down is limited by role; a team member without permission sees this error.
Why does my product listing or product page ignore these settings?
Work through these in order:
- The page is not published. The inspector edits a private draft. Publish the Product Listing or Product Detail page, then open a fresh storefront page.
- No published listing template. A store that has never published a template for its category pages keeps its older listing skin, such as Dawn, and that skin does not read the zone, page, motion, typography, or button controls. Choose a supporting template (for example Left-rail filters + grid) under Online Store → Theme → Page Layouts → Customers browse → Category page, publish it, and check again. The editor can do this for you; see Move a legacy product listing to a PLP template.
- The template does not support the control. The row shows Not supported by this template. Pick a template from the lists above.
- A more specific value is in control. An element or zone Custom value overrides the page level. Use the precedence table above.
- The region is not on screen. Appearance and text settings style existing regions only; a section with no data, or one turned off, stays hidden.
A design row shows Template default until you set it, then Custom value. A group shows how many controls are changed from template default. This is a count of explicit overrides, not a comparison with the last published page: publishing does not make an override a template default. The nested text-element groups also show their own change counts.
Reset one property
Use the row's reset action: Reset to store card style for local listing-card appearance, text, or button roles, and Reset to template default elsewhere. For example, reset Background colour to stop forcing a fixed background while keeping your custom padding. The action is disabled when there is no override to remove or the row is unsupported.
Choose the right group reset
Use Reset text to remove the supported element overrides in that zone's Text group. Reset zone in its Appearance group removes the zone's supported appearance and text overrides. Reset page in Page removes the supported page-layout overrides and returns Motion to Standard; it does not reset every zone, the template selection, or Type pairing.
Preview and publish the reset
The template and page fallback regain control of the removed properties. Review the result in both previews and publish to make the reset visible to customers. A group reset only clears supported rows; return to a supporting template to edit retained unsupported values. A design value you set on one template is kept when you save under a template that does not support it (the value is ignored there) and applies again when you switch back. Older style settings from before these controls are not kept this way, so do not rely on a switch to archive them.
The change count is still nonzero after publishing
That is expected if custom values remain. Use the reset action for the property or group you want to return to defaults. If a customer still sees the old appearance after a reset, publish the reset draft and confirm the storefront is using a supporting template rather than an older skin.
Product page
The product page picker offers 26 templates, spanning clean editorial layouts through information-dense, maximalist ones:
| Editorial | Marketplace | Immersive | Modular | Boutique |
| Brutalist | Bento | Storyteller | Glass | Showcase |
| Story Scroll | Spec Sheet | Gallery First | Horizon | Streetwear Drop |
| Glass Tech | Luxe | Compass | Industrial Terminal | Timepiece Atelier |
| Heritage Craft | Galaxy Diagonal | Wellness Apothecary | Prism | Canvas |
| Maison |
Accent colour applies to every product-page template
Every one of the 26 product page templates reads the same shared Accent colour field, in this page's own picker under Config → Page Style → Accent colour. Saving a value there tints two shared buy-box pieces that every template renders through the same shared components: the promoted variant picker (the swatch/button row for colour, size, and other options) and the extra buy-box blocks a template turns on — pincode/COD check, bank and EMI offers, and back-in-stock notify among them.
Until you save an accent colour, the buy box keeps rendering with your store's theme accent colour instead (the same token the Theme Hub's palette sets) — an unsaved pick in the field never replaces what's currently live.
Why doesn't my accent colour show up on the product page?
Confirm you pressed Save Draft or Publish after picking a colour in Config → Page Style → Accent colour — previewing a colour without saving leaves the buy box on your theme's accent. If you did save one and a block still shows the old colour, check whether that block is actually part of the template's buy box: the variant picker only tints when the product has options, and the extra buy-box blocks (pincode, offers, back-in-stock) only render when you've turned the matching one on for this template.
Choose the Maison product page
Maison is an opt-in editorial product page with a warm parchment-and-clay palette, Fraunces display type, and DM Sans interface and body type. Existing stores do not change until you select and publish it. Its picker card comes from the live renderer and metadata colours; Maison does not have a separate static thumbnail asset.
Open the Product template picker
In the existing editor, go to Online Store → Theme → Page Layouts → Customers browse → Product page → Design. In the new Store Editor, go to Store Editor → Pages → Browse → Product Detail → Design.
Select Maison
Under Template, choose Maison. Preview a real product with images, options, and both in-stock and sold-out variants. The desktop hero uses an editorial gallery and buy panel; mobile becomes a single readable column.
Check the customer states
Confirm the brand appears as the product byline, choosing a colour updates colour-linked gallery images, quantity and ADD TO BAG appear for an in-stock selection, and the sold-out state shows the email/notify form instead. A pre-order item replaces the ordinary purchase action with its pre-order badge, action, and helper copy. A failed gallery image uses Maison's warm placeholder, and the loading view uses a product skeleton instead of a blank page.
Save and publish
Select Save Draft, re-open to confirm Maison persisted, then Publish. Open a fresh product URL at desktop and mobile widths. Selecting Maison is the opt-in step; merely viewing its preview does not change an existing storefront.
Maison supports image gallery, variant selection, quantity, add to cart, wishlist, personalisation, recommendation rails, ratings & reviews, and product video. Product data gates those optional blocks: absent personalisation fields, recommendations, or ready video leave no empty shell. Recently viewed and You may also like do not repeat the same product, and a product-video card without usable artwork gets Maison's warm gradient placeholder. The same data-driven rule applies to specifications, customer photos, and complete-the-look content below the hero.
Ratings & reviews is capability-gated, not just data-gated: turn off Config → Features → Ratings Reviews for the product page and Maison hides the entire reviews block — the "Reviews · count" heading, the Write a review action, and the customer-photo strip — along with its Questions & answers block underneath. Even with the capability on, the reviews block itself only shows once the product has a rating count above zero.
Why are reviews hidden on Maison?
First check Config → Features → Ratings Reviews is turned on for the product page and the
change is saved or published — turning it off removes both the reviews block and the Q&A block,
not just the star count. If the toggle is on and reviews still don't appear, the product itself has
no rating count yet; Maison only renders the block once ratingCount is greater than zero.
The current Maison renderer always displays an Offers & EMI panel and a pincode field with CHECK. Those are presentation affordances in this template: they are not populated from saved merchant offer/EMI terms, and CHECK is not wired to a delivery lookup. Do not use their presence as evidence that an offer, EMI calculation, or pincode-delivery check is configured. Controls outside Maison's contract remain disabled in the inspector. Its sold-out form is a visible template state; do not treat seeing the form alone as proof that a notification subscription was accepted.
Why does a Maison section or action not appear?
First confirm Maison is selected and published. Then check the product has the backing data and the selected variant is in the required stock state. Empty blocks are deliberately omitted. If an inspector row says Not supported by this template, Maison does not consume that control; choose a compatible template rather than saving a value Maison cannot render.
Product is currently the only page with a working Variants tab — four feature-density presets that turn the same optional page elements (estimated delivery time, return policy summary, a "sold by" line, a key-features list, and a variant-comparison panel) on or off:
| Variant | What's shown |
|---|---|
| Full-featured | Everything on: delivery estimate, returns summary, sold-by line, key features, variant comparison |
| Minimal | Everything off — just the essentials |
| Trust-focused | Delivery estimate and returns summary on; the rest off |
| Comparison-enabled | Everything on (currently identical to Full-featured) |
Preview a real product and variant
Use Preview product when the sample item is too generic to judge image crops, long titles, prices, or variant-specific media. This is a preview tool: it does not change the product in your catalogue, choose a featured product for customers, or become part of the page you publish.
Open the Product page editor
For the existing page-layout editor, go to Online Store → Theme → Page Layouts → Customers browse → Product page. For the new Store Editor, go to Store Editor, open the Pages navigator, and choose Product Detail from the Browse group.
Open Design
In the existing editor, select the left-sidebar Design tab. In the new Store Editor, select the right inspector's Design lens. Preview product is a peer section beside the template and variant choices in both editors; it is not inside Config or Content.
Find and select a product
Type a product name into Preview a real product… and press Enter. While the search is running, the section shows Searching…. Select a result to replace the sample item on the canvas with that real catalogue product.
Try a variant
If the selected product has more than one variant, use the variant selector that appears under its name. The choices use the variant's option values, falling back to its SKU when no option label is available. The canvas updates to the selected variant.
Return to sample data
Select Use sample product to clear the real item and return the canvas to its built-in sample.
The whole section appears on Product pages only. Category, cart, landing, and other page types do not show an empty or disabled picker. A product with only one variant has no variant selector; selecting the product still updates the product preview.
Why can't I find Preview product or a variant selector?
First confirm the Pages navigator shows Product Detail, then open Design rather than Config, Content, or Behaviour. Search requires a product name and Enter; no results means the store search did not return a matching catalogue product. The variant selector appears only after you select a product that has at least two variants.
Control the product description and gallery side
These controls live in the new Store Editor's right inspector and are template-aware, so it hides a row when the selected template does not read it. Go to Store Editor, use the Pages navigator to choose Pages → Browse → Product Detail, then select the template named below. The existing page-layout editor still provides its template/variant/theme picker and Preview product tool, but it does not render these contract-backed control rows.
| Control | Template that exposes it | Default | Customer-facing effect |
|---|---|---|---|
| Description | Modular only | On | On shows the product description in the below-the-fold Description card/accordion. Off removes that entire description block on desktop and mobile; it does not delete the product's description from the catalogue. |
| Gallery Position | Horizon only | Right | Left places the gallery on the left of the product hero; Right places it on the right. On a store that has never saved this control, the editor now shows Horizon's own Right default selected instead of showing neither choice selected. Merely viewing that default does not create or save an override. |
Show or hide Modular's description
Choose Modular, open the Content lens and its below-fold/description group, then switch Description on or off. Check both desktop and mobile: on shows the description text; off removes the complete Description section.
Choose Horizon's gallery side
Choose Horizon, open the Design lens and Gallery group, then set Gallery Position to Left or Right. A never-configured store starts on Right; selecting Left creates the merchant override.
Save, preview, and publish
Check the canvas at desktop and mobile widths, select Save Draft, reopen the page to confirm the value persisted, and select Publish only when the storefront result is ready.
Why don't I see Description or Gallery Position?
The rows are intentionally absent—not disabled—on templates that do not consume them. Select Modular for Description or Horizon for Gallery Position. If the row is present but customers still see an older result, confirm the change was published, then open a fresh product URL rather than relying on an already-open preview tab.
Optional product-page blocks and the data they need
The Modular template can now render product data that used to stop before it reached the page. Go to Store Editor, choose Pages → Browse → Product Detail, and select Modular. Use the right-inspector search to find each exact control name below; Content controls decide whether a block appears, Behaviour controls decide how it behaves, and Design controls decide placement. Finish with Save Draft, check desktop and mobile, then Publish and open a fresh product URL.
An enabled control is permission to render, not placeholder content. Every block below deliberately renders nothing when its required product/store data is empty.
| Block family | On-screen controls | Backing data and customer-facing result | Empty or disabled result |
|---|---|---|---|
| Pre-order terms | Show pre-order badge, Show expected ship date, Show pre-order payment breakdown | In Products → Add product / Edit → Selling features → Pre-order, switch it on and complete its terms. Customers can see a Pre-order badge, an exact expected date or ships-in-days message, and a deposit percentage/amount when payment mode is Deposit. | No saved/enabled pre-order means no pre-order block. Each of the three controls independently hides its own line. |
| Back-in-stock alert | Back-in-stock signup | When product stock is exactly zero, customers get an Email address field and notify action. A successful request confirms that an email will be sent when stock returns. | In-stock products, a disabled control, or an unavailable subscription service show no form. |
| Video-call booking | Video consultations, Video consultation mode, Video consultation label | In the product form, enable Offer a video-call consultation for this product and choose a Video offering created under Appointments → Offerings. The customer button uses your label and opens that offering's booking page, preselecting that exact offering. The current modes are Instant Or Book and Book Only, but the supplied service is booking-only, so both lead to booking. | No plan access, no saved offering ID, or Video consultations off means no button. A saved offering ID that no longer resolves (deleted or renamed offering) doesn't break the booking page — the customer lands on the normal offerings list instead of an error, so confirm the saved offering is still the one you want before publishing rather than relying on the button to fail loudly. |
| Product bundles | Show product bundles, Bundle placement | Bundle placement chooses Buybox or Belowfold. Build bundles from Bundles in the left sidebar — see Bundles. Once a bundle includes this product, customers see it and its linked product items. | With no bundle rows saved for this product, the enabled block remains absent — the storefront never shows an empty bundles block. |
| Specifications | Product specifications, Size & fit, Care instructions, Sustainability information | Existing product-spec rows are separated by their saved group: ordinary specifications, size/fit, care, or sustainability. Customers see only the non-empty enabled groups as key/value tables. Author rows in Specifications — see Specifications and size chart. | A group with no matching rows renders nothing even when its control is on. A blank Group on a spec row is stored under the backend's general group, not any of the four named groups. |
| Questions and answers | Questions & answers | The block always renders when this control is on — it's no longer conditional on an existing question. Signed-out visitors see the Ask a question entry too; tapping it sends them to sign in first. Signed-in visitors get Ask a question directly and their submission is sent for review — see Question moderation. | A product with zero published questions still shows the block and its Ask-a-question affordance — only the list of existing Q&A pairs is empty, not the whole block. |
| Customer media | Customer photos | Existing public UGC media appears as a From our community image grid with optional credit handles. Customer-submitted photos now go through an admin moderation queue before they're eligible to show here — see Customer photo moderation. | No public media means no block. |
| Recommendations | Complete the look, Complementary products, Related products, Maximum related products, Recently viewed products | Related uses other products from the same category and obeys Maximum related products; Recently viewed uses that browser's product history; Complementary reuses unique products from bundle rows. | No category/related results, no browser history, or no bundles omits that rail. The customer portal currently supplies no Complete the look collection, so enabling it alone cannot render one. |
| Product videos and 360° spin | Product videos, 360° product view, Product video section | Use Products → Add product / Edit product → Selling features → Product video / 360° view. Product videos adds ready videos to the gallery; 360° product view adds a frame slider; Product video section creates Shop the video cards with product links. | Only ready videos reach the product page; a video is ready once the product save that uploaded it succeeds. A video that is not ready is left out. With no saved video/sequence, or with the control off, the product keeps the normal image gallery and the below-fold block is omitted. |
Use Purchase panel content order to choose which slots appear in the purchase panel, including Preorder, Pickup, Video call, Back-in-stock signup, and buybox bundles; see Choose what the Modular purchase panel shows. Use Below-product section order to choose which below-product blocks are placed first. It is a list with one on/off switch per block, always in the same fixed sequence: Description, Specs, Size fit, Care, Shipping returns, Sustainability, Reviews, Qa (Questions & answers), UGC (Customer photos), Video, Complete the look, Complementary, Related, Recently viewed, Bundles, FAQ, and Story. The switches do not drag blocks into a new position. Switching a block off here does not hide it: a block left out of the list is still shown after the listed ones, as long as its own control is on and its data exists. To remove a block from the page, switch off its own control (for example Questions & answers). Description and Story are in the list, but this below-product area has no block of either name, so their switches move nothing. On Modular, the product description is its own card above this area, shown by the Product description control in the same group rather than placed by this list.
Product pickup availability is data-driven
When store pickup is enabled for the store and product, the product page can show each active location as In stock or Out of stock without exposing the raw on-hand quantity. The current Admin dialog saves base-product stock; the storefront uses an exact variant allocation when one exists and otherwise falls back to that base row. With no active locations, the product switch off, or an availability error, the entire block is hidden. See Customer Pickup & Gift Wrap.
Choose what the Modular purchase panel shows
These steps apply to the Modular product template: the purchase-panel list, the tax note, thumbnail arrows, and body typography below are all read by Modular on both desktop and mobile.
Open the Modular product page
Go to Store Editor → Pages → Browse → Product Detail and select Modular. Use the right-inspector search to find each exact control name below.
Switch purchase-panel blocks on or off
In the Design lens, find Purchase panel content order. It is a list with one on/off switch per block (for example Pincode, Offers, Back in stock, Share, Bundles, Preorder, Pickup, and Video call). A block that is switched off stays out of the purchase panel even when its own control and data are present. The blocks appear in the list's fixed sequence; the control does not drag blocks into a new position.
Turn on the block's own control
Pickup and Video call each need their switch in the order list and their own setting in the Content lens: Show pickup options, and Video consultations (with Video consultation mode and Video consultation label). Preorder needs only the product's pre-order terms; Show pre-order badge, Show expected ship date, and Show pre-order payment breakdown hide individual lines of it.
Show or hide the tax note
In the Content lens, switch Show tax note on or off. It is on by default. When on, the small note in the purchase panel reads "Inclusive of all taxes". Switch it off and the note disappears from desktop and mobile. To reword it, search the Content inspector for "Inclusive of all taxes" label.
Show the thumbnail arrows
First turn on Gallery → Show image thumbnails in the Content lens. Then, in the Behaviour lens, switch Gallery → Show thumbnail navigation arrows on. Modular draws previous and next arrows beside its horizontal thumbnail strip, on desktop and mobile.
Style the description and key features
In the Design lens, open Buybox · Text → Body and set the font, size, weight, style, letter spacing, case, alignment, or colour. Modular applies it to the product description and the Key features text. The Description · Text → Body and Spec sheet · Text settings, when you have set them, still win over this one for their own elements.
Save, preview, publish
Select Save Draft, check desktop and mobile, then Publish and open a fresh product URL.
What shoppers see:
| Setting | Storefront result on Modular |
|---|---|
| Preorder in the order list | For a product with pre-orders switched on, the pre-order badge, ship date, and payment breakdown sit inside the purchase panel, in that block's place in the list. They appear once, not again lower on the page. With Preorder switched off in the list, the pre-order details move to their separate spot further down the page. |
| Pickup in the order list, plus Show pickup options | The pickup availability block (each active location marked In stock or Out of stock) appears in the purchase panel. See Product pickup availability is data-driven. |
| Video call in the order list, plus Video consultations | A button with your Video consultation label (default Video call) appears in the purchase panel and opens booking for the product's video offering. |
| Show tax note | The "Inclusive of all taxes" line in the purchase panel. Off removes it. |
| Show thumbnail navigation arrows | Previous and next arrow buttons beside the thumbnail strip, with screen-reader names "Scroll thumbnails left" and "Scroll thumbnails right". They show only when the strip overflows, and an arrow is disabled when that end is reached. |
| Buybox · Text → Body | The description and Key features text use your chosen body font. Unset leaves them in the template's own type. |
Why don't customers see Pickup, Video call, or Pre-order?
Check in this order. (1) The block's switch is on in Purchase panel content order. A store that already saved its own list keeps it, so the three newer blocks stay off there until you switch them on; a store that never saved a list shows all three in the default list. (2) The block's own control is on: Show pickup options and Video consultations are off by default. (3) The backing data exists: Pickup needs store pickup enabled for the store and the product, with at least one active location; Video call needs plan access and a saved video offering; Preorder needs the pre-order terms completed on the product. (4) The draft was saved and published, and you opened a fresh product URL. With the data missing, an enabled block renders nothing rather than an empty box.
Why is the tax note still showing, or missing?
Show tax note is on by default on Modular, and Modular always showed its "Inclusive of all taxes" line before the control existed, so a store that never touched it keeps the note exactly as before. It disappears only after you switch the control off, save, and publish. If you switched it off and the note remains, open a fresh product URL: an already-open preview tab can show the earlier result. If the note is missing but the control is on, check that the text under "Inclusive of all taxes" label has not been cleared.
Why don't I see thumbnail arrows on Modular?
The arrows need Show image thumbnails on, Show thumbnail navigation arrows on, and a product with enough photos that the strip actually overflows. A product with a few photos that all fit shows no arrows. Both settings must also be published.
Choose the sticky add-to-cart mode
Go to Store Editor → Pages → Browse → Product Detail, choose any product template, then find Sticky purchase bar under the Behaviour inspector. Choose None, Desktop Right Rail, Mobile Bottom Bar, or Both. The setting is supported across all product templates.
The sticky action appears only when the main purchase action has moved out of view and the selected item can be added to cart. A sold-out product does not gain a purchasable sticky button. For a pre-order product, the sticky label follows the pre-order state rather than a custom add-to-cart label. Save the draft, test by scrolling at desktop and mobile widths, publish, and repeat on a fresh product URL.
Why doesn't the sticky action appear?
Confirm Sticky purchase bar includes the viewport you are testing, the draft was published, the main purchase action has actually scrolled out of view, and the selected variant is purchasable. None deliberately removes the sticky action.
Understand inspector labels and disabled rows
The Store Editor shows human control names such as Product videos, 360° product view, Sticky purchase bar, and Colour swatch style rather than internal registry keys. When the chosen template does not render a feature, its row remains visible but greyed out with Not supported by this template. A greyed row cannot change or save a value; select a supporting template first.
Data-backed controls also show Needs: … followed by the required catalogue data, such as variant images, unit pricing, a size chart, active trust badges, tracked inventory, or product specifications. This is guidance, not generated sample content: add and save that data on a real product before expecting the block in preview or on the published page.
Product videos and 360° product view use this state instead of suggesting they work everywhere.
Video sections on other pages get their videos differently from the Product-page Product videos control above. In the v3 Store Editor, Shoppable Video, Video Section, and Video Spotlight Carousel (including its Reels grid layout) have a Content source control. Set it to Product videos to reveal the Product videos picker, which lists videos already saved on your products. Set it back to Manual and Shoppable Video and Video Section show Video source instead, with Source type MP4, YouTube, or Vimeo and a Video URL / id. The legacy editor's Shoppable Video section has no product-video picker; it only takes a Source Type and a URL. Neither editor uploads video files: upload the video on the product first (Add a shoppable video). The storefront video feed serves only videos that are ready, and a video is ready as soon as the product save that uploads it succeeds; there is no separate processing wait. If a section stays empty, check that the product's save finished without a video could not be uploaded message, then save and publish the page again. Step-by-step setup: Product-backed video sections.
Why don't customers see an optional Product-page block?
Check in this order: Modular is selected; the named control is on; the block is present in Purchase panel content order or Below-product section order where applicable; the product has the backing data listed above; the draft was saved and published; and you opened a fresh product URL. If the editor has no authoring input for that data, enabling the display control cannot create the missing rows.
New buy-box blocks available on every template
Unlike the Modular-only blocks above, this set is read by the shared buy-box renderer used across all 26 product-page templates, so the controls below work no matter which template a page uses. Go to Store Editor, choose Pages → Browse → Product Detail, select any template, and use the right-inspector search for each exact control name.
| Control | On-screen name | What it needs to show anything | Empty or disabled result |
|---|---|---|---|
pdp.buybox.price.showUnitPrice | Show unit price | A unit measure on the product or the selected variant — see Unit measure | No unit measure means no unit-price line, even with the control on. |
pdp.buybox.trust.enabled | Show trust badges | At least one saved, active store-wide badge — see Trust badges | No active saved badges means no trust row. |
pdp.buybox.personalisation.enabled | Personalisation fields | At least one saved personalisation field | Off by default. No saved fields means no block. A required Image field blocks Add to Cart until its upload finishes successfully. |
pdp.buybox.sizeChart.enabled | Size chart | A saved size chart on the product — see Specifications and size chart | Off by default. No saved chart, or a chart saved as empty via Remove size chart, means the control has nothing to show even when it's on. |
pdp.buybox.buyNow.enabled | Buy now button | Nothing beyond stock above zero | With the item out of stock, Buy now is disabled rather than hidden. |
pdp.belowfold.reviews.photos | Customer review photos | At least one approved review with attached customer photos | No qualifying review photos means the reviews section shows text and ratings only. |
Turn on and configure the enhanced product gallery
In the classic admin sidebar, go to Online Store → Theme; in the new admin sidebar, go to storefront → Theme. Open Page Layouts, then choose Customers browse → Product page. This opens Store Editor on the Product Detail page. If you are already editing another storefront page, the equivalent in-editor route is Pages → Browse → Product Detail.
Set the shopper-facing content
Open the inspector's Content tab and use these groups:
- Gallery → Show image thumbnails — shows selectable product photos beside or below the main image. Turning this on also reveals the thumbnail-arrow setting in Behaviour.
- Inventory & urgency → Show stock availability — shows In stock (N) for the product or option combination the shopper selected, or Sold out when none remain. The line appears in the template's purchase panel near quantity and Add to cart.
Set the gallery behavior
Open the Behaviour tab:
- Gallery → Show image zoom button adds a zoom button over the main image (help text: "Adds a zoom button to the product gallery. Works even when the larger-viewer option is off."). It works on its own: select the button and the larger, screen-filling viewer opens.
- Gallery → Open images in a larger viewer makes the main product photo itself clickable (help text: "Lets shoppers click or tap the main product photo to open it in a larger viewer."). A shopper can click or tap the photo, or focus it and press Enter or Space, to open the viewer. It does not need the zoom button, and the zoom button does not need it.
- Gallery → Show thumbnail navigation arrows adds previous and next controls when more thumbnails exist than the rail or strip can show. This setting is hidden until Show image thumbnails is on.
- Variants → Unavailable variant behaviour controls unavailable option values. Choose Hide to remove them, Disable to leave them visible but unselectable, or Disable With Text to leave them disabled and mark them Sold out.
Save and publish
Use Save Draft to keep the changes private for review, or Publish to make them visible to customers. See Use the enhanced product gallery for the desktop, mobile, keyboard, swipe, colour-photo, and stock experience shoppers receive. The first publish after this upgrade keeps the store's existing Show seller, Key features, Show delivery information, Show returns information, and Compare variants choices; it does not silently reset them.
When Show variant picker is on, the shared option choices appear directly under the price inside each template's purchase panel. The selected-item stock line and enabled purchase helpers stay near quantity and Add to cart, before related products. The template's older choice UI is hidden in that state so customers do not see duplicate selectors.
Only stores created after this gallery release start with all five on/off controls above enabled and Unavailable variant behaviour set to Hide. A store that already existed before the release is never given these values automatically, including when it opens the product-page editor for the first time. It retains its current template gallery and saved behavior until a merchant makes, saves, and publishes these choices. Turning the settings on does not flatten the templates into one design. On desktop, each template keeps its side rail or thumbnail strip, image crop, spacing, surface, corners, and control shape; on mobile, the enhanced gallery uses a horizontal thumbnail strip and supports swiping.
I turned on zoom, but customers don't see it
Turn on Show image zoom button for the button, or Open images in a larger viewer to make the main photo clickable, or both, then save and publish. Either one works without the other. A product also needs a photo. For an existing store, changing the template alone does not turn on the enhanced gallery.
Publish failed — what should I do?
Read the message before retrying. An expired plan says Publishing requires an active subscription. Check your plan and try again. A changed page says This page changed while you were editing. Reload the latest draft, then publish again. Invalid settings say Some page settings can't be published yet. Review the settings and try again. Other failures say Couldn't publish — try again. Expand Technical details when it appears, correct the named problem, and publish again.
Why don't thumbnails or their arrows appear?
Turn on Show image thumbnails and publish a product with at least two photos. The Show thumbnail navigation arrows control appears only after thumbnails are on, and shoppers see its arrows only when the thumbnail rail or strip actually overflows. A one-photo product has no thumbnail strip.
Price, gallery, and add-to-cart controls now apply on every template too
Price display (Single, Range, From, Hidden, or the quantity-tier Ladder), Show original price, Show tax note, Main image ratio, Thumbnail ratio, and Add to cart label now follow the saved Store Editor value on all 26 templates. On a store that existed before this release, a never-configured page keeps the price, gallery, and button rendering it already had, so this is not a visual change on its own — it only takes effect once you save a value for one of these controls. The tax note on Modular is the one default worth knowing: Show tax note is on there by default (Modular always showed its "Inclusive of all taxes" line), so nothing changes until you open the product page's Content lens, switch Show tax note off, then save and publish. Main image ratio (1:1, 3:4, 4:5, 2:3, or Natural) and Thumbnail ratio (1:1, 3:4, or 4:5) sit in the Gallery group of the product page's Design lens.
Add to cart label doesn't apply to pre-order products
While a product is in the pre-order state (Enable pre-orders switched on in the product form), the buy button always reads PRE-ORDER and ignores whatever text is saved in Add To Cart label — the mobile sticky Add to Cart bar switches too, reading Pre-order. Turn pre-orders off on the product to restore your custom label. See v1: pre-orders, badges, video, 360° spin, and video calls.
Quantity-tier price ladder
Price display's Ladder option shows a small quantity-break table next to the regular price instead of a single number, using whichever tiers are saved on the currently selected variant — see Quantity-tiered pricing in the classic admin for how to add tiers to a variant.
Add quantity tiers to a variant first
The Ladder display renders whatever tiers the selected variant has saved — set those up in Products, the variant's Edit Variant dialog, Sale & Pricing, Quantity Tiers before changing the Store Editor control, or the table has nothing to show.
Set Price display to Ladder
Go to Store Editor, choose Pages → Browse → Product Detail, select any template, and use the right-inspector search to find Price display. Set it to Ladder.
Save, preview, and publish
Select Save Draft, check the product page at desktop and mobile widths, then Publish and open a fresh product URL to confirm.
Customers see the regular price, followed by a table with a Quantity column (each tier's minimum as "N+") and an Each column (that tier's per-unit price, already discounted). A tier saved at 0% discount still appears as its own row, priced the same as the regular price. Switching the selected variant on the product page can change or remove the table, since tiers are saved per variant.
Why doesn't the quantity ladder show for this product?
Check, in order: Price display is set to Ladder for the template in use and the change is published; the customer's currently selected variant has at least one saved quantity tier (tiers do not carry over between variants); and you opened a fresh product URL rather than an old preview tab. With no saved tiers on the selected variant, the page falls back to showing only the regular price — this is expected, not a bug.
Product photos now follow the selected variant by default
Without any saved Gallery Source or variant-media-sync value, the gallery now switches its main image to match the variant a customer picks, on every template. This applies automatically to existing stores — it needs no Store Editor change — and only affects products that have variant-specific media; a saved Gallery Source value still wins, and products without variant media render unchanged.
Why don't customers see one of these buy-box blocks?
Check in this order: the control is on for the template in use; the underlying data exists (unit measure, active trust badges saved under Settings → Trust badges, personalisation fields, review photos); for Personalisation, a required Image field's upload actually succeeded; the draft was saved and published; and you opened a fresh product URL. For Size chart, the product also needs a saved chart. In the new admin use Products → Add product / Edit → Selling features → Size chart → Done → Save product; in the classic admin use Inventory → Edit Product → Storefront product details → Save size chart. With none saved, the block stays hidden.
Edit Modular's video, bundle, and 360° copy
On the same Pages → Browse → Product Detail → Modular page, open the Content inspector (or search its copy label). These eight registry keys make eleven renderer strings editable:
| Exact key | On-screen copy label | Where the changed text is used |
|---|---|---|
pdp.modular.belowFold.video | "Shop the video" section heading (Modular below-fold) | Both the section heading and its below-fold navigation label. |
pdp.modular.belowFold.videoAriaLabel | Shoppable product video aria-label (Modular below-fold) | Screen-reader name for each playable below-fold product video. |
pdp.modular.belowFold.videoProcessingAlt | Processing video poster alt text (Modular below-fold) | Alt text for the still poster the block shows instead of the player when a video is not ready. The product page normally receives only ready videos, so this text rarely appears. |
pdp.modular.belowFold.bundles | "Product bundles" section heading (Modular below-fold) | Heading/navigation title for below-fold bundles. |
pdp.modular.gallery.videoFallbackAlt | Fallback alt text for gallery videos without merchant alt text | Both gallery video thumbnails and the playable gallery video when that media has no saved alt text. |
pdp.modular.gallery.spin360FallbackAlt | Fallback alt text for 360-degree gallery frames without merchant alt text | Both the spin thumbnail and displayed frame when that frame has no saved alt text. |
pdp.modular.gallery.spin360UnavailableAriaLabel | Unavailable 360-degree gallery view aria-label | Screen-reader name when a spin item has no current frame. |
pdp.modular.gallery.spin360FrameSelectAriaLabel | 360-degree gallery frame selector aria-label | Screen-reader name for the spin frame slider. |
The Video heading, Gallery Video Fallback Alt, and Gallery Spin360 Fallback Alt keys each change two places at once by design, keeping the thumbnail/player or heading/navigation wording aligned. For the two fallback-alt keys, media-specific alt text still wins; the override is used only when that video or frame has none. Leave a key unsaved to keep its built-in English default.
Why did one text override change two places?
That is expected for the three shared keys named above. If an alt-text override appears to do nothing, check whether the media already has its own alt text; the fallback never replaces merchant-authored media alt text. Save, publish, and re-open a fresh Modular product page before judging the storefront result.
Category (listing) page
The category page picker offers 22 templates. Eight are structural filter layouts; the other 14 are colour/style skins layered on top of a default structure:
| Filter layout | Description |
|---|---|
| Left-rail filters + grid | Permanent sidebar filters — large catalogues with many facets |
| Top-bar filter chips + grid | Quick horizontal chips above the grid |
| Drawer filters | Filters slide open from a button |
| Inline faceted + infinite scroll | Filters embedded in the grid, loads more as the customer scrolls |
| Category drill-down | Customers land on a top-level category and drill into subcategories |
| Editorial masonry | Magazine-style staggered grid |
| Split lookbook | Split-screen, lookbook-style presentation |
| Dense catalog | Compact, high-density grid |
The 14 style skins include Auto Configurator, Avant-Garde, Clinical Wellness, Meridian, Orbit, Vesper, Solene, Hype Gold, Loft Furniture, and Audio Crescendo, plus three older skins — Ledger, Atelier, and Gazette — and the new Maison editorial skin.
Three skins don't render their named look yet
The Ledger, Atelier, and Gazette category-page skins currently fall back to the default look instead of their own distinct style — a known wiring gap on the BillionBiz side, not something you did wrong. Avoid picking one of these three if a specific look matters to you until it's fixed; the other 11 style skins and all 8 filter layouts work as shown in the preview.
Category has only a single default variant — there's no Variants tab for this page.
Default skin: Meridian
A store created recently starts on the Left-rail filters + grid template with the Editorial look, not a skin. An existing store that has never saved a category-page layout still shows Meridian — see Before you configure anything above.
Choose the Maison listing page
Maison is opt-in. In the existing editor, go to Online Store → Theme → Page Layouts → Customers browse → Category page → Design → Template. In the new Store Editor, go to Store Editor → Pages → Browse → Product Listing → Design → Template. Choose Maison, then Save Draft and Publish. Existing storefronts remain on their saved template until you do this.
Maison gives customers a sticky desktop filter rail and a three-column grid of 4:5 product cards. Category, Price, and Colour are the supported facets, and every available option carries its result count. Applied filters appear as removable chips with Clear all. Its sort menu offers Featured, Newest, Popularity, Price: low to high, Price: high to low, and Rating. On mobile, products use a two-column grid and 48-pixel Filter / Sort controls open a bottom sheet over a dimmed page, with CLEAR and SHOW N results actions.
Product cards show a desktop hover quick-add only when the product can be added. Sold-out cards do not expose quick add. If a product image cannot load, the card renders a designed placeholder with Image unavailable while preserving its price and colour swatches. A filtered listing with no matches retains the listing shell and shows a clear-filters action plus real supplied suggestions instead of an empty grid.
Preview realistic listing data
Use products with categories, several prices, colour options, a sold-out item, and one missing or invalid image. Check the filter counts, applied chips, sort order, quick-add suppression, and image placeholder.
Test mobile filtering
Switch the canvas to mobile, open Filter, choose Category, Price, or Colour, and select SHOW N results. Reopen the sheet and use CLEAR. Controls are sized for touch and the listing remains two columns.
Publish and verify a fresh page
Save the draft, reopen it to confirm Maison persisted, publish, and open a fresh storefront category URL. Repeat the filter, sort, sold-out, no-results, and image-error checks.
Why is a Maison filter or action missing?
Maison only offers features its listing contract supports. Confirm the products carry Category, Price, or Colour data and that the published page still uses Maison. Quick add is desktop-only and is suppressed for sold-out products. Size, Fabric, and Availability are not supplied by the current Maison listing contract, so those filter families do not appear; this is a contract limit, not missing product configuration. Empty or unsupported filter families are not invented.
Show colour swatches on product cards
Go to Store Editor → Pages → Browse → Product Listing, select a template that supports product card swatches, and find Colour swatch style in the Product card inspector group. The hint reads Off by default. Choose a display mode to show colour options on product cards. Choose a mode other than None, save, preview, and publish.
If the selected template does not support swatches, the row stays visible but greyed with Not supported by this template. If a supported published page still shows no swatches, confirm its products have Colour variants with saved swatch data; None intentionally shows no swatches. When customers select a swatch, its checkmark remains visible against light or dark colours rather than relying on colour alone. Split-lookbook listing calls to action likewise use a readable text colour when the configured foreground would not meet contrast; already-readable colours are kept.
Configure the Left-rail filter and sort toolbar
Go to Store Editor → Pages → Browse → Product Listing and choose Left-rail filters + grid. The following seven controls are the filter/search/sort settings this template reads. Search for the exact on-screen name in the right inspector, change it, then test the canvas at both desktop and mobile widths.
| On-screen control | Choices and storefront effect |
|---|---|
| Filter layout | Rail Left, Rail Right, Horizontal Bar, Drawer, or None. None removes the filter affordance; Drawer waits for the customer to open it; Horizontal Bar stays open across the content width. On mobile, every non-horizontal surface opens from Filter; Rail Right and Drawer anchor to the right/left edge respectively. |
| Filter apply behaviour | Instant updates the grid on every choice. Apply Button keeps choices as a draft until the customer selects Apply filters; on mobile that action also closes a non-horizontal panel. |
| Remember shopper filters | Session keeps state only in the mounted listing; Local Storage restores it on later visits in the same browser; URL writes category, price, sort, and colors into the address so the filtered view can be bookmarked or shared. If the browser denies storage/history access, filtering still works for the current view but does not persist. |
| Sort options | A switch for each supported option: Price asc, Price desc, Popularity, and Newest. Turn on any combination; the picker lists your choices in that fixed order. If nothing valid is saved, the template default set is used instead of hiding the picker. Rating is not supported by the current public product-list API and is not offered. |
| Open sorting in a mobile sheet | Off keeps the native mobile sort select. On replaces it on mobile with a bottom sheet of the chosen Sort options; desktop keeps its normal dropdown. |
| Show product search | On adds a search field to both desktop and mobile toolbars. It matches the name, brand, or category of products supplied to the current listing and updates the visible grid as the customer types. Off removes the field. |
| Keep the toolbar visible while scrolling | On pins the desktop and mobile listing toolbar to the top while the customer scrolls. Off keeps the existing non-sticky toolbar. |
The visible facet groups are configured separately with Available filters: one switch each for Category, Price, and Color. Turn on any combination; groups appear in that fixed order, a stale saved value is dropped without discarding your other choices, and a list with no valid entry falls back to the template default. This template currently supports only those three. Size, Brand, Availability, Rating, and Pickup Available cannot be selected; the current public listing endpoint does not serve those filters here.
Page colours, elevation and theme apply on the storefront
Saved page-level design settings now reach the live listing, the editor preview and the customer storefront. Four semantic colours are honoured: Surface, Surface Alt, Text on Brand and Text on Surface; other colour values are ignored. Elevation (default, soft, clay, hard-offset, inset, glow, none) is opt-in: it changes the toolbar, filter rail or panel and product cards only after you pick a value, and a page with no elevation choice renders as before. If a colour or elevation does not appear, confirm the value was saved and published, and that it is one of the values listed here.
To find these controls, go to Store Editor → Pages → Browse → Product Listing, open the Design tab of the right inspector and use the Typography & colors group: Type pairing, the four colour rows above, and Shadow (the row that holds the elevation values). Find Motion in the Page group when using the modern listing layouts. The Category page's Change theme button (in the inspector's gallery links, next to Change template) opens the theme gallery for this page; the button is always available and shows no "fixed style" note. In the gallery, a saved custom theme whose colour, type or corner data is incomplete shows a plain gradient skeleton card instead of a live preview, rather than failing to open the gallery.
The editor's listing preview applies the Type pairing you select in Typography & colors as soon as you pick it, and loads that pairing's web font, so you can judge the typography before saving.
The published product listing applies the same two settings: the Text on Surface colour sets the listing's body and title text colour, and the Type pairing sets its fonts. The pairing also sets the heading font, which shows wherever the chosen layout uses a heading font. A page with no Type pairing saved keeps its existing fonts.
Troubleshooting: my Type pairing does not change the header or footer, or looks different in the editor
On the published store the Type pairing styles the product-listing area only; the store header and footer keep the store theme's fonts. The editor canvas, however, currently previews the header and footer with the pairing applied, so something like the footer brand name can look different in the editor than on the live store. Trust the published page for header and footer fonts. Also, some listing layouts render no heading at all, and on those only the body font visibly changes.
There is no Mobile Live Count control here yet
The contract names a mobile live-count setting, but the Left-rail renderer does not read it in this release. Mobile still shows the listing's supplied product/category counts; the editor does not offer a working switch for per-facet live counts.
Choose the surface and filter groups
Set Filter layout first, then use the Available filters switches to choose among Category, Price, and Color.
Choose when and where state is applied
Set Filter apply behaviour to Instant or Apply Button and Remember shopper filters to Session, Local Storage, or URL. In the canvas, select a price or category and confirm the grid changes immediately or only after Apply filters, as configured.
Configure search and sort
Turn on the wanted Sort options switches, decide whether mobile uses Open sorting in a mobile sheet, then switch Show product search and Keep the toolbar visible while scrolling on or off. Test search with a product name, brand, and category; test every retained sort option.
Test persistence and publish
For Local Storage, reload and confirm the selection returns. For URL, copy the filtered address and open it in a fresh tab. Save the draft, publish, and repeat the checks on a fresh storefront Category URL at desktop and mobile widths.
Why is Filter data source greyed out?
Filter data source is no longer an editable setting. No product-listing template switches the filter source: the filter groups are always built from the store's Category, Price, and Color data. If the row still appears in the inspector, it is greyed out and reads Not supported by this template, and it cannot change or save a value. A source saved earlier is ignored and changes nothing on the storefront. To change which groups customers see, use Available filters; if one is missing, confirm Filter layout is not None.
Choose product-card badge and meta rows
On Pages → Browse → Product Listing, select a style-skin listing that exposes the shared product-card controls, then find these Content rows:
- Badge sources selects which saved/automatic badge families may appear: Sale, New, Bestseller, Low Stock, Sold Out, Preorder, Custom Label. The renderer keeps the badge's real type, so Preorder gets its outlined treatment instead of being styled as an ordinary sale badge.
- Product details shown has one supported choice this release: Preorder Ship Date. Select it to show the product's expected ship date under its card when that product also carries a Preorder badge.
An untouched store preserves its earlier card output. Once you explicitly save either list, the saved selection becomes authoritative: an empty Badge sources list hides all structured and legacy card badges, while an empty Product details shown list hides the pre-order ship-date row. A selected badge source still renders nothing when the product has no badge of that type.
Choose the badge families
Open Badge sources and keep only the types the listing should show. Include Preorder for products configured under Products → Add product / Edit → Selling features → Pre-order.
Choose the pre-order meta row
Open Product details shown and select Preorder Ship Date if the expected date should appear beneath a card. No other meta-key choice is supported by the shared card in this release.
Verify empty and populated products
Preview one product that has the chosen badge/date and one that does not. The first should show the selected content; the second should keep that part of the card empty rather than inventing a label or date.
Publish the Category page
Save Draft, reload to confirm both lists persisted, Publish, then open a fresh category listing. Check both desktop and mobile cards.
Why don't customers see the selected badge or pre-order date?
Confirm the product itself has that badge type and, for the date row, Enable pre-orders plus an Expected ship date. Badge sources must include Preorder and Product details shown must include Preorder Ship Date. If the rows are absent from the inspector, the selected Category template does not use the shared card controls; choose a supported style skin. Finally, publish and re-open a fresh listing URL.
Set how the next products load
Go to Store Editor, use the Pages navigator to choose Pages → Browse → Product Listing, choose the listing template, then open the right inspector's Behaviour lens and its Loading group. Use Product loading style; its choices are limited to what that template actually renders. The existing page-layout editor can still choose a Category template, but does not render this contract-backed Product loading style row.
| Template family | Product loading style choices | Default |
|---|---|---|
| Pagination-gated layouts: Left-rail, Editorial masonry, Split lookbook, Dense catalog, Staggered deal grid, Curved scroll carousel, Auto Configurator Stepper, Embedded App Ordering, and style-skin listings that use the standard loader | Load more / None | Load more |
| Inline faceted + infinite scroll | Infinite scroll / None | Infinite scroll |
| Top-bar filter chips, Drawer filters, and Category drill-down | No Product loading style row—the template has no next-products loader to configure | Not applicable |
With Load more, customers reach the end of the current products and select the Load more button when another page exists. On the layouts in this table, the products already on screen stay put while the next batch loads. The page no longer swaps to a full-page loading placeholder (only the very first load, before any product is shown, still does), so a shopper who switched to list view keeps that view and keeps their scroll position (for example on Left-rail). The classic skin layouts still show a loading skeleton in their product grid area while the next batch loads. With Infinite scroll, reaching the loading sentinel asks for the next page automatically. With None, the products already loaded remain browsable, but the button/sentinel is removed and the page does not request another batch through that template's loader.
Existing stores keep their previous rendering. During migration, a pagination-gated template that already had pagination enabled resolves to Load more; one that explicitly had that capability off resolves to None. The infinite-faceted template follows the same rule for its existing infinite-scroll capability. A store with no prior saved value receives its template's default, so opening the editor alone does not opt it into a new behavior.
Choose a compatible Category template
Select a pagination-gated layout for Load more/None, or Inline faceted + infinite scroll for Infinite scroll/None. If Product loading style is absent, the selected template does not expose a loader.
Set Product loading style
Open Behaviour → Loading, choose the offered loading behavior, and check the canvas. Use None only when intentionally showing the initial product batch without a next-page action.
Verify the customer flow
Save the draft, preview a category with more products than the first batch, and scroll to the end. Confirm the button appears and loads more, infinite scrolling requests another batch, or None shows no next-products action, according to your choice.
Publish and recheck
Select Publish, open a fresh storefront category URL, and repeat the end-of-list check. Also test a category with only one page: a Load more button should not appear when there is no next page.
Why don't customers see more products?
Check Product loading style first: None deliberately removes the next-products trigger. If the row is missing, the chosen template does not expose a loader. If Load more or Infinite scroll is set, confirm the category actually has another page, the change was published rather than only saved as a draft, and test a fresh storefront URL. A one-page category correctly shows no load-more action.
Cart and checkout
Cart and checkout are two separate pickers with two separate template lists.
Cart (the shopping-cart summary page) offers 21 templates (plus the opt-in Dawn Cart (2026), see below): 9 structural layouts — Side Drawer, Modal Popup, Inline Expand, Single Page, Multi-Step, Buy Now, Receipt Column, Split Ledger, and Drawer Flow — plus 12 colour/style skins.
Three cart skins don't render their named look
Of the 12 cart style skins, Atelier, Ledger, and Aurora currently render an existing skin instead of the distinct look their name and preview promise — the components for those three were never built. The other 9 skins (Terminal Matrix, Neumorphic, Isometric Depth, Geometric, Synthwave, Candy Playful, Poster Typography, Watercolor Nature, and Artisanal Clay) work as shown.
Checkout (the payment flow) offers 15 designs, all colour/style looks. Thirteen are the classic designs: Editorial, Boutique, Minimal, Brutalist, Immersive, Storyteller, Modular, Glass, Marketplace, Heritage, Atelier, Ledger, and Aurora. Two more are the opt-in Atelier (2026) and Minimal (2026) refreshes; the original Atelier and Minimal designs stay unchanged. The cart's structural layouts (Side Drawer, Modal Popup, Inline Expand, Single Page, Multi-Step, Buy Now) are not offered for checkout.
A checkout design changes the look of your checkout, not its steps. Your storefront's live checkout keeps using its standard address, shipping, and payment flow, with the design's theme and colours applied. Place-order, address, and payment behaviour does not change when you switch designs.
Cart and checkout each have only a single default variant — neither shows a Variants tab.
Cart's default skin: Geometric
If you haven't picked a cart skin yet, your store currently shows Geometric — see Before you configure anything above. Checkout's default did not change in this rollout.
Opt-in "(2026)" designs in the Store Editor pickers
Newer designs are added to the page pickers of the new Store Editor with the suffix (2026) in their name, for example Dawn Cart (2026) in the Cart picker. They are opt-in and open to every plan. They are appended to the list; no existing design is renamed, moved or removed, so an existing store looks exactly the same until you pick a (2026) design and publish it.
The suffix can appear on the pickers for these pages: Login, Signup, Forgot password and Email verification; Footer; About Us, Contact Us and Not found; Cart and Checkout; Product listing (PLP); Product detail (PDP); and the account pages. Labels seen in the editor include Dawn Cart (2026), Maison (2026), Confetti Pop (2026), Atelier Account (2026), Chronicle (2026), Divided Columns (2026), Minimal Links (2026), Founder Letter (2026), Atelier Contact (2026) and Canvas Gallery (2026). A page only lists the (2026) designs that exist on your store's build, so the list you see may be shorter.
Open the page's picker
Go to Store Editor → Pages → Browse, open the page (for example Cart), then open the Design tab.
Find the (2026) card
Scroll the template list to the end; the (2026) designs sit after the existing ones. Dawn Cart (2026) is the last Cart template; its description reads "Refined editorial cart — Fraunces serif, warm parchment, quiet minimalism."
Select it and publish
Select the card to preview it, then publish when you are happy. To go back, pick your previous design again and publish.
Dawn Cart (2026) and products sold by weight or measure
Once Dawn Cart (2026) is published, a customer's cart shows it. It handles lines sold by weight, length or other measures: under each measured line it shows the quoted rate (for example "2.5 kg × ₹64 / kg"), the line shows the server-quoted total or Pending until the price arrives, and the + and − buttons move by the product's step (for example 0.5 kg). It restyles the cart only: there is no Dawn checkout design, and the storefront's live checkout keeps using its standard checkout flow, so a cart with measured lines proceeds through that standard checkout. See Selling by unit for the setup and the customer flow.
Why don't I see a (2026) design on my picker?
- The design is not on your store's build yet. The picker shows a (2026) design only once its template package is installed on your store; older builds list the existing designs only.
- You are in the old editor. The legacy page-layout pickers do not receive new designs; use the Store Editor.
- You are looking at the wrong page. Each design belongs to one page picker (a cart design is only in Cart).
Booking page
Booking — the appointment-booking funnel — has its own picker with three templates (Editorial Calm, Warm Concierge, Immersive Reserve) and, unlike every page above, no page-level Variants section at all; its variation instead happens per step, in a Step Format group on the Config tab. Full walkthrough: Booking Experience Editor.
The canvas here is NOT the real thing, and most controls still don't reach the funnel
Unlike the rest of this page, Booking's canvas preview is a placeholder strip of labelled boxes, not
a rendering of the actual template — and saving or publishing the page template or any per-step
format here doesn't change a step's design on the live /book funnel. The one control that does
reach the live funnel is the Staff / resource picker row's on/off switch, and even that only
shifts the step count/labels a customer sees, not the step's design or whether the screen is
actually visited. See Booking Experience Editor → Why don't customers see my new
layout?
and → When the on/off switch reaches the live
funnel
for exactly what is and isn't wired up.
No menu entry in the Page Layouts accordion
Like Checkout, Booking has no entry in Online Store → Theme → Page Layouts — open it from its own card in Online Store → Pages, or from the page-identity switcher's Buy group.
The full page journey
Beyond product, category, cart, and checkout, BillionBiz gives you a template picker for every other page in the customer journey — organised in Online Store → Theme → Page Layouts, with Checkout reachable only from Online Store → Pages:
| Stage | Pages | Reachable from |
|---|---|---|
| Frame (always visible) | Header (7 templates × 4 layout variants), Footer | Page Layouts |
| Customers browse | Product page, Category page, Wishlist | Page Layouts |
| Customers buy | Cart | Page Layouts |
| Customers buy | Checkout, Booking page | Pages |
| Customers complete the order | Order confirmation, Thank you, Order detail, Order tracking | Page Layouts |
| Customers return | Login, Sign up, Profile, Forgot password, Email verification | Page Layouts |
| Edge cases | 404 / Not found | Page Layouts |
Auth pages (Login, Sign up, Forgot Password, Email Verification) and post-order pages (Order Confirmation, Order Detail, Order Tracking, Thank You) each get their own independent template picker — they don't have to match each other. Two more page types follow the same picker pattern but sit outside this journey list: the Toaster page controls how pop-up notifications look throughout your store, and the Consent page controls your cookie banner. Find both at Online Store → Theme → Advanced → Feedback & messaging (not in the Page Layouts accordion).
Whichever Toaster template you choose, a pop-up notification on the storefront (for example the message a shopper gets when adding more than the available stock to the cart) goes away on its own after about 6 seconds by default. Earlier, some Toaster templates left a message on screen until the shopper closed it. A message marked as persistent stays until it is dismissed, and the thin countdown bar on some templates is only decoration, not the timer. If a message seems to stay too long, reload the storefront to pick up the latest version.
Newer admin skin now has the full journey
The newer editorial admin skin's Page Layouts screen now reaches every page in the journey list above — Header, Category, Wishlist, Product, Cart, Order Confirmation, Thank You, Order Detail, Order Tracking, Login, Sign Up, Profile, Forgot Password, Email Verification, 404, and Footer — the same set as the classic admin skin.
Thank You page: Newsletter CTA requires GDPR consent
Open the Thank You picker and turn on the Newsletter CTA capability from its Config tab to show an email sign-up block right after checkout, while the customer's order is still fresh. Just like the footer and About page newsletter fields, the Subscribe button here stays disabled until the customer checks a GDPR consent box — there's no way to collect an address without it. Subscribers are tagged with source Store and land in Marketing → Newsletter alongside subscribers from your footer, About page, landing pages, and hosted sites — see Forms & Newsletter.
If a customer says they subscribed right after checkout but isn't in your subscriber list, the usual cause is the same as elsewhere: they left the consent box unticked, so the button never activated and nothing was sent. Ask them to check out again from My Orders or reach out directly, and confirm they tick the box before submitting.
About Us, Contact Us, and Maintenance
These three pages each have their own live template picker, using the same picker experience as the journey pages above — they're content pages, but not plain uneditable ones.
Screen: Online Store → Pages, then open About Us, Maintenance page, or Contact Us.
- About Us — your brand story and feature highlights.
- Contact Us — a branded contact form, address, and map; inbound messages go straight to your inbox.
- Maintenance page — what customers see while your store is paused.
Each opens the same picker shell as the journey pages, with the same Templates / Variants / Themes / Config tabs, Save Draft, and Publish behaviour described above.
Contact Us's default: Aurora
If you haven't picked a Contact Us template yet, your store currently shows the Aurora layout — a floating contact form over an animated gradient scene, with business hours, socials, an FAQ link, email, and phone shown by default. See Before you configure anything above.
Atelier Contact (2026): name and email placeholders and the details column
The opt-in Atelier Contact (2026) design for Contact Us has two behaviours worth knowing.
Open the design
Go to Store Editor → Pages → Browse, open Contact Us, and select the Atelier contact design (shown with the (2026) suffix) on the Design tab.
Edit the form placeholders
Select the Content tab and find Name field placeholder (default "Your full name") and Email field placeholder (default "Your email address"). Type your own wording. The editor may show an "[Atelier Contact 2026]" prefix in front of these labels.
Save and publish
Select Save Draft, then Publish. The placeholders are the grey hints inside the empty Name and Email boxes on the contact form.
Where the contact details sit on desktop. If the design has no left panel photo (the Left panel photo media field is blank) and the page shows at most two contact rows, the desktop layout has no dark panel: your contact details appear under the heading in the left column, with the form in the right column. A row counts when it has something to show: the address, the business hours, the phone, and the email, each only if its feature is switched on and the store has that detail. With a panel photo, or three or four rows, the design keeps the panel on the left. On mobile the layout is always a single column, so this rule does not apply.
My placeholder edit does not show on the contact form
If an older shared Contact Us placeholder text (the name or email placeholder used by other contact designs) was saved on your store, the form keeps showing that shared text and ignores the Atelier placeholder rows. Change that shared text instead, or ask support to clear it. Also check that you published, not only saved a draft.
Why are my contact details not in the left column?
Either a panel photo is set, or the page shows three or more contact rows (address, hours, phone, email), or you are looking at mobile. Remove the photo and switch off or leave blank enough rows to get to two or fewer on desktop.
Order Listing
Order Listing — the order-history list page a customer sees (distinct from Order Detail, which is a single order) — also has a working template picker with the same Save Draft / Publish behaviour as every other page here. It's the only page in this journey that renders real order data live in the picker preview, not sample content.
No menu entry yet — open it from another page's switcher
Order Listing has no card in Online Store → Pages and no entry in the Page Layouts accordion. The only way to reach it today is the page-identity switcher inside any other page editor's top bar: open any page picker, click the page-identity button, and choose Order Listing under the Complete group.
Default: Chronicle Editorial
Once you publish an Order Listing design, your customers' My Orders page renders it (template, variant, theme and the texts you set), showing a loading skeleton while it loads. If you haven't published one yet, your customers currently see Chronicle Editorial. New stores default to colour product images; existing stores keep their current look. See Before you configure anything above. There's no cancel or complete-payment action inside this template itself — those actions render as a separate "Needs your action" strip above the templated list on the customer-facing page (see My Orders, Tracking & Returns for what your customers see).