The Section Library: Hero, Product, Category, Social-Proof, Content & Conversion Sections

A reference tour of every section category available in the Landing Page Editor — what each one is for and when to reach for it.

This page is a reference, not a step-by-step guide — use it to browse what's available, then head to the Landing Page Editor to actually add and configure a section. Click + Add Section in the editor to open the same library, with a search box and a mini visual preview on every card. The same dialog also has a Start from template tab — for starting or replacing your whole page with one of the pre-built templates instead of adding sections one at a time, see Template gallery.

Screen: Online Store → Landing Page Editor → Add section → Library.

Finding your way around the dialog

The eight categories run down a vertical sidebar on the left of the dialog, each with a count of how many section types it holds — click a category to filter the grid to just that group, the same job the old row of tabs across the top used to do.

Two extra rows appear above the categories, but only once you have something in them:

• Recently used — the last few section types you've added, most recent first.
• Favorites — any section you've starred, from that section's card in the grid.

Both are per-user, not per-store — a teammate sees their own recently-used and favorites, not yours — and neither row shows up at all until it has at least one item in it.

Section tiles show real previews

When you browse All sections in the Store Editor's Library (the Library tile in the module rail on the left edge of the editor), each family tile draws a real preview of that section, not a blank or broken placeholder. Two tiles used to look empty and now render meaningful samples: Product Spotlight shows a sample product, and Spacer shows a labelled Section break divider. A few sample photos that failed to load were replaced with images bundled with the editor. Previews are illustrations only; they never change your store, and once you add the section it uses your own products and content.

Each card also has Add, a star to add it to Favorites, and, for plan-gated sections, a plan badge.

Jumping from the Library to another editor area

While the Library is open, the module rail stays visible. Click Pages, Site-wide, or Settings on the rail and the Library closes and that area opens in the same click — you no longer land back on Pages first and have to click the tile a second time. Clicking Library itself while it is open does nothing, and the Close button (or Esc, when no popup is open above the Library) returns you to Pages.

Header and Footer blocks use task groups

The Header/Footer Add block pickers are separate from + Add Section, but their block editors use the same Store Editor inspector. Go to Online Store → Theme → Page Layouts → Header or Footer, select the row/band and then the block you added, and use these merchant-facing task groups instead of older internal headings:

• Content: Text & media and Accessibility.
• Design: Colors, Typography, Layout, Spacing & sizing, Shape & borders, Effects, and Advanced.
• Behaviour: Components, Sticky & scroll, and Mobile.

Only groups relevant to the selected row, band, menu, or block appear. Nested Header panels use Layout for slot placement and Components for action blocks. Footer row styles use Colors, Spacing & sizing, Effects, and Shape & borders; row content uses Text & media, and device visibility uses Mobile. For a saved Footer override, follow the inspector's pointer to Footer Section controls → Spacing & sizing, Footer Section controls → Colors, or Footer Section style → Colors rather than looking for the retired Spacing & Appearance or standalone Appearance headings.

Use Search this block's controls with merchant terms such as “font”, “background”, “sticky”, or “mobile”. Search and the N changed filter are scoped to the current Content/Design/Behaviour lens, so clear them and confirm the selected block if a control seems absent.

Starter content in a newly added section

When you add one section from the library, the editor selects it immediately and opens it with visible starter content wherever that section needs content to render. The sample is editing guidance, not customer-ready copy: replace it before publishing.

Existing saved sections are not rewritten with these defaults; starter content is applied only at the new-insert boundary. Undoing the add removes the new section and clears its selection.

What you see when you add it: photos and copy on newly added sections

A newly added section from the list below is no longer empty. Choose Online Store → Landing Page Editor → Add section → Library, pick the section, and the editor selects it with example media and copy already filled in. The photos are neutral, licensed home-and-craft stills with no people or brand marks; the copy is generic and written for a made-by-hand home store.

Why doesn't this section show on my store?

A section whose required data is empty is hidden on the published storefront, while the editor keeps showing it so you can fill it in. Check the data each section needs:

These nine do not come with example content when you add them from the picker, because the content is your own catalogue, images or brand names. After adding the data, Save and publish, then reload the storefront.

Empty catalog sections: auto-fill, the "Nothing to show yet" notice and the "Choose…" prompt

Nine sections show nothing to shoppers until you give them data: Tabbed Products, Collection List, Category Circles, Shop by Concern, Press Logos Band, Ingredient Table, Blog Posts, Brand Index A-Z and Product Bundles. The Store Editor helps you fill them in three ways.

What shoppers see: nothing. The notice and the Choose… prompt exist only in the editor; the published store simply leaves an empty section out.

Troubleshooting. "My new Collection List came up empty": the store has no categories to fill it from, so use the notice button. "A Category Circles section was not filled": none of your categories has an image, so add circles yourself. "The notice is still there after I added something": check that you added it in the field the notice names, then save; Blog Posts only counts as empty when Hide section when empty is on. "There is no Choose… button in the preview": the preview has not connected to the editor yet; the dashed box in the preview shows only the text when no button is available.

Brand Index A-Z and Product Bundles — add brands and bundles

Both sections used to have no way to add their data from the Store Editor. They now have a list in the inspector.

Brand Index A-Z, each brand: Brand name, Link (where the brand goes when clicked) and Logo (an image). A brand with a Link is clickable on the storefront; one without is shown as plain text and logo. Use Move up and Move down to arrange brands. When the section groups brands by letter, the storefront sorts them A to Z whatever the row order.

Product Bundles, each bundle: Managed bundle (click Choose bundle to show a bundle you manage under Bundles with its live price; only active bundles are listed; see Product Bundles), Bundle title, Products in this bundle (pick several products), Bundle price, Compare-at price and Discount badge (%) (0 to 100). The card shows the title and "Includes N items", N being the number of products you picked.

On the published storefront, a card with a Managed bundle shows the bundle's current price from the bundle itself, with the item total as the struck compare-at price and a recomputed Save N% badge when the bundle saves money; the typed price fields apply only if the bundle cannot be loaded or the card has no managed bundle. The editor preview still shows the typed price. See Product Bundles.

Customer-facing result: the brand grid or the bundle cards appear on the published page once at least one entry exists. Until then the section is hidden on the storefront and the editor shows the Nothing to show yet notice described above.

Troubleshooting. "My brands appear in a different order": the section is grouping brands by letter, which sorts them A to Z. "The storefront price differs from what I typed" or "the preview shows a different price": a card with a managed bundle uses the live bundle price on the storefront; edit the price on the bundle. "My bundle does not show": the section needs at least one bundle in the list, and you must save and publish. "I cannot find the Brands or Bundles list": it is on the Content tab under Content details, not under Design.

Composite presets and sample content

Screen: Online Store → Landing Page Editor → Library → Composite Carousel, Grid, Marquee, Split, Stack or Tabs → Add. Select the new section, then open the Inspector's Design lens. Its preset thumbnails appear above the component-look groups. These presets are section layouts, not the individual card, heading or media looks farther down the Inspector.

When the reminder clears automatically. It clears after none of that preset's recorded sample photo URLs remains anywhere in the section. Replacing one of several photos is not enough; keeping or reusing a sample photo keeps the reminder. Changing only text or a link does not clear it. For a preset with no recorded sample photos, use Keep as is after reviewing the copy. The reminder's absence is not a check that every word, product or destination has been reviewed.

Saving and reopening. Choose Save in the top bar, wait for the saved status, then reopen the section. The reminder stays for saved sample content until you dismiss it or replace all recorded sample photos. A dismissed reminder stays dismissed after saving. Neither action changes an existing live page: Publish is a separate decision.

Tabs: choose the image shape

Select Composite Tabs → Design → Image shape. The Product tabs preset starts at 16:9; Collection tabs starts at 1:1. This is the tabs layout's image shape, not the separate Tabbed Products section's navigation settings.

• Choose 1:1 for square images, 4:5 for portrait cards, 9:16 for tall images, or 16:9 for wide images. The setting changes the layout's image proportions, not the uploaded file.
• Choose Auto to remove your saved shape override and use the layout's existing behaviour. An older tabs section with no saved shape also shows Auto; opening the control does not backfill a new shape.
• Save, then check both desktop and mobile previews. A different shape can change the crop; choose a photo that keeps its important subject visible at the selected proportions.

Troubleshooting

• "I cannot find the preset tiles." Select a composite section and open Design. Its text and items are in Content. Ordinary section looks and component looks use different groups.
• "A thumbnail is a neutral tile." The preview image did not load; its name is still usable. Reload the editor if several previews fail. Adding the same section again is not necessary.
• "I replaced my text but the reminder remains." Review every sample photo, including photos inside items. If you deliberately kept a sample, choose Keep as is, then Save.
• "Image shape did not change my uploaded photo." It changes how images fit in the tabs layout; it does not edit the asset. Confirm that you selected Composite Tabs, not a different product or collection section, and preview the saved section.

A family — a section with more than one visual variant, like Marquee's Text Ticker/Logo bar/Image strip looks — shows small variant chips under its card. Hover a chip and the larger preview panel beside the grid flips to show that exact variant's look before you commit to adding it.

Hero & banner sections

The first thing a visitor sees. Options include a multi-slide carousel, a single hero banner with an optional sale badge, a 50/50 split layout with image and text, a full-width background-video hero, a countdown-timer hero for launches and flash sales, and a floating-product-card showcase for spotlighting bestsellers. Whenever the multi-slide carousel has autoplay turned on and more than one slide, it carries a visible pause/play control, operable by keyboard or touch, so a shopper can always stop the motion — required by WCAG 2.2.2.

A further set of hero-flavoured looks rounds out the library: a Split Slideshow and an Image + Text Slideshow for editorial, alternating image-and-text frames; a Video Section and a Video Hero Overlay for a background or featured video (MP4, YouTube, or Vimeo) with optional text overlay; a Mid-Page Banner and a Parallax Band for full-bleed visual breaks further down the page; and a Split Hero Scrub, where the image swaps as the visitor scrolls. Video Section is a look inside the Stage — Hero family, not a separate section-library tile.

Hero Banner — how left-aligned text looks on phones

Screen: Online Store → Store Editor → open Hero Banner → Layout & emphasis.

A Hero Banner whose Text alignment is Left now keeps its headline, subheadline and buttons left-aligned on phones as well as on desktop. Earlier, the text snapped to the centre below 768 pixels wide.

Hero Banner, Hero Split & Hero Product Showcase — the extra controls

These three sections carry a handful of fields that only surface once you open All settings → Pro and pick the right Display Style — they're easy to miss if you're only skimming the Content tab.

Hero Banner (Content tab):

• Badge Text (Eyebrow) always shows; once you type something into it, a Badge Color picker appears underneath to set its text colour.
• A separate Eyebrow field (unrelated to Badge Text, despite the similar name) only appears when Display Style is set to Numbered Index, Editorial Overlap, Kinetic Marquee, Full Bleed Collage, or Stacked Deck — the other layouts (Default, Split, Frosted Panel, Full Bleed Backdrop, Full Width) don't render it, so the field is hidden there rather than shown-but-ignored.
• Image Caption only appears under the Editorial Overlap layout (a small caption line under the image).
• Marquee Text only appears under the Kinetic Marquee layout — leave it blank to scroll your headline instead.
• Deck Layers (Label + Body for three layers) only appears under the Stacked Deck layout; Numbered Items (Label + Body for three items) only appears under Numbered Index.
• Offer Strip — the newest Display Style: a slim, full-width tinted band with no photography behind it, for a single promo code or short-lived offer. It reuses fields you've already set elsewhere in this section — Badge Text (Eyebrow), Headline, Subheadline, CTA Text/Link/Style, and the Highlight Color/Highlight Gradient — 2nd Color/ Highlight Gradient Angle trio from the Content tab's Headline group — but repurposes that trio as the band's own background gradient instead of a headline text-clip, since Offer Strip has no photo to tint against. Leave both highlight colors blank and the band still paints a sane on-brand accent gradient rather than rendering invisible. One new field, Offer Code (Content tab → Body group, only visible when Display Style is Offer Strip), renders as a small dashed-border pill next to the CTA — e.g. "BB25". The band has no fixed height (it grows to fit a long headline or code) and no entrance animation, unlike the other Hero Banner layouts.
• Highlight Color sits in the Content tab's Headline group. (In the current Store Editor, Heading color is the first field of the Design tab's Heading typography group, and the Subheading typography group has its own Color field. Heading color is hidden on the Editorial asymmetric panel look, which sets a fixed headline colour; Subheading color is ignored on that panel and on the compact layouts Numbered index, Editorial overlap, Kinetic marquee, Collage, Stacked deck and Offer strip.) Highlight Color only does anything once you've typed something into the Highlight Text (Gradient) field back on the Content tab (Heading group) — that's the word or phrase the color paints. Underneath it, Highlight Gradient — 2nd Color (optional) turns the highlight into a real two-stop gradient: set it and the highlight fades from Highlight Color into this second color, at the angle set by Highlight Gradient Angle (degrees) (0–360, defaults to 90, and stays disabled until a 2nd color is set). Leave the 2nd color blank and the highlight renders as a flat color, exactly as it always has — existing sections with no 2nd color set are unaffected.

Hero Split (Content tab → Motion group): Lift image on hover toggle (with a Hover lift amount (px) field), and a Parallax intensity slider. A Tilt angle slider (3°-20°) in the Content tab's Layout group only appears when Display Style is set to Asym. Tilt.

Hero Split — video media (Content tab → Media group): the Media Type dropdown now offers a third option, Video, alongside Image (default) and Category Rail. Media Type only appears when Display Style is Classic Split — the other five split layouts (Image Foreground, Editorial Stacked, Panel Frame, Asym. Tilt, Overlay Text) use the image as a full-bleed or diagonal backdrop rather than a swappable content slot, so the field is hidden rather than shown-but-inert there. Choosing Video reveals four more fields: Video URL (the MP4/WebM file), Poster Image (shown before the video loads), Mobile Fallback Image (a dedicated static image for narrow viewports — falls back to Poster Image if left blank), and three toggles — Autoplay, Muted, and Loop — all on by default.

Hero Product Showcase (Content tab): an Eyebrow field in the Heading group, and a Show Background Image toggle (on by default) in the Background Image group that reveals Background Image and Mobile Background Image pickers when it's on. Its Display Style section also now exposes a Columns (Desktop) control for both the Grid and Carousel layouts — this was previously hidden for this section even though the renderer already honoured it.

Hero Product Showcase — Pinned Photo (Hotspots): the Display Layout picker under Display Style has a third option alongside Grid and Carousel — Pinned Photo (Hotspots), a single large photo with clickable pins over specific products in the shot, the same "tap the pin to shop" pattern as the Shoppable Image section, built into the hero.

Switching Display Layout to Pinned Photo (Hotspots) swaps the Products accordion for a Hotspots accordion (the product grid isn't shown in this mode, so its Columns (Desktop) and Background Overlay Opacity controls are hidden too — they don't apply). Add a photo first in the Background Image accordion, then in Hotspots: click anywhere on the photo preview to drop a pin at that spot (or add one manually and set its X % / Y % position by hand), give it a Label, and either a Product ID (via the picker, so the pin links to a real product and its live name/price/thumbnail can show in the popover) or a Link URL for a plain link-out pin — only one of the two can be set at a time. Popover Style controls what a shopper sees when they tap a pin: Label Only (just the text you typed), Product Card (a thumbnail, name, and price pulled live from the linked product), or Image Hotspot (the same card with a custom thumbnail). Pulsing Animation on Hotspot Pins adds a subtle animated ring around each pin to draw the eye — it's automatically switched off for shoppers who have "reduce motion" turned on at the OS level.

Still in Display Style, right below Background Overlay Opacity, an Overlay Style dropdown picks how the background photo darkens behind your heading and products: Fade Image (classic) dims the photo itself, while Scrim Tint (recommended) keeps the photo at full brightness and darkens it with a separate tint layer on top instead. A section you built before this control shipped keeps rendering with Fade Image (classic) until you switch it — only a new Hero Product Showcase section you add from today gets Scrim Tint as its starting point. Both this control and Background Overlay Opacity are hidden entirely when Display Layout is set to Pinned Photo (Hotspots), since that layout suppresses the decorative background overlay altogether.

Hero Product Showcase's Design tab has its own Product cards group, with a Hover effect dropdown among its border/shadow/image-ratio fields — None, Zoom image, Lift card, Overlay, or Brighten image, applied when a shopper points at one of the product cards in the Grid or Carousel layout. This field is hidden whenever Layout is set to Pinned photo, since that layout shows one large photo with hotspot pins instead of a grid of product cards for the effect to animate.

Separately, the full-width background-video hero (Hero Video)'s Background colour control (Content tab → Band style group) now changes the rendered background — it used to accept a colour and save it without ever affecting the page. Any Hero Video section that never had this field touched keeps rendering exactly as before.

Hero Video — video image treatment

Select a Hero Video section, then open Design → Image treatment → Video image treatment. This part controls the fixed video or poster frame; Hero Video does not offer an Image Shape or aspect-ratio control.

Hero Video — content position

Use the single Content position control to move the heading block to one of nine positions.

If the section was saved with the older four-position control, the current editor shows its real matching position: Middle center, Bottom left, Bottom center, or Bottom right. Choosing any position now saves the new nine-position value; that new choice takes precedence while the older fallback is kept in the section data.

Rich heading and subheading typography in the current Store Editor

Screen: Online Store → Landing Page Editor → select a section → All settings → Design.

These controls belong to the current Store Editor. Hero Banner, Hero Split, and Hero Video each have a Heading typography group. Featured Product has a Heading and subheading typography group with the same controls for both text levels. The classic Landing Page Editor may arrange similarly named typography controls differently, so use the current editor for the paths and labels below.

An existing section with these typography values unset keeps its previous type styling.

Hero Carousel — image-only slides

Each slide in Hero Carousel has a Content mode choice. Go to Online Store → Pages → [your page] → Hero Carousel → Content → Slides, open the slide, and choose Text over image or Image only. Use Image only when the artwork already contains its finished promotional copy and should not have BillionBiz text or buttons painted over it.

Image Gallery, Lookbook, and Brand Story — item controls follow the selected type

The same inspector rule applies to repeated media and pane items: a control disappears when the selected item type does not render it, while its saved value remains available if you switch back.

For a Brand Story editorial pane, Product shows the Product picker and hides Media, Kicker, Headline, Body, and button fields because the selected product supplies the content. Media shows the media, kicker, headline, and optional button fields but hides Body. Image + text shows those fields plus Body, while the Product picker is hidden.

Hero Carousel — Visual Style variants, framing & Variant D

The Visual Style dropdown (Content tab → Slides group, above the slide list) now has four options: Variant A (Classic Centered), Variant B (Split Layout), Variant C (Overlay & Parallax), and Variant D (Editorial Asymmetric).

Below the slide list, a Layout & Framing group applies to every variant:

• Containment — Full-bleed (default) or Inset (rounded card), which frames the carousel in a rounded card with page gutters on each side, the look brands like Vilvah, Plum, and boAt use.
• Gutter Size — only appears once Containment is set to Inset: Small, Medium (default), or Large.

Slideshow frames, countdown dates and choice fields in the current inspector

These behaviours apply to the current Store Editor (v3; UAT today, the legacy editor on production is unchanged).

Product sections

Sections that pull directly from your live catalogue: a bestsellers grid, a new-arrivals feed, a single featured-product spotlight, a flash-sale grid with a live countdown, product bundles with savings call-outs, a side-by-side product-comparison table, a "trending now" scroller, and a "recently viewed" strip.

A newer batch of product sections covers more specific merchandising needs. Inside the Shoppable Media family, Shoppable Video places timestamp-pinned product chips directly on lifestyle video. Featured Product (Rich) is an extended single-product spotlight with a thumbnails-side gallery; Product Tabs and Tabbed Products split a catalogue into tabbed groups (by material/care/specs, or by category); Complete the Look suggests frequently-bought-together add-ons with bundle pricing; 3D / AR Viewer embeds an interactive 3D product view — either a merchant-supplied Spline scene URL, or (in the 3D Source group) a direct Model URL pointing at a GLB/GLTF file, which renders through a native model viewer instead of the Spline embed; there's no default scene/model, so the section shows a placeholder until one is set. In the Display group, Interactive (on by default) enables orbit/zoom drag-to-rotate on the model; turning it off shows a static view. Linked Product ID adds a plain "View Product" link below the viewer pointing at that product's page — it does not pull in the product's name, price, or image, so pair it with the Heading/Subheading fields if you want that context shown. Only the base viewer is available today (a full iOS AR handoff isn't wired up yet, and the Show AR Button toggle stays disabled until it ships). Also inside Shoppable Media, Video Spotlight Carousel is a carousel of native, vertical product videos with a pinned mini product card. Neither video look has its own standalone section-library tile. Neither of these sections uploads a video file: they show videos already attached to your products (or, for Shoppable Video on Manual, a pasted video address). To add the product video itself, see Upload a shoppable product video.

Product-backed video sections

Shoppable Video, Video Spotlight Carousel, and the product-enabled Video Section can use published product-video records instead of manually entered media. They are family looks in the v3 Store Editor, so you add or switch to the look through its family rather than searching for a standalone tile.

On the storefront, the selected records resolve in their saved order and missing records are omitted. Video Section and Shoppable Video use the first resolved video; Video Spotlight Carousel can use the ordered set. Published media supplies its video file and poster. Shoppable product tags come from the product-video record in their saved sort order and position. A simple tagged product can be added to the cart; a product with variants opens its product page instead so the customer can choose the required variant.

Per-item Live or Pinned snapshots

Product, category, collection, review, and product-video picker rows in the Store Editor have a Live / Pinned control labelled Live or pinned. The choice belongs to that one selected item: items in the same picker can use different modes.

• Live is the default. The storefront uses the source item's current display content whenever it renders.
• Pinned preserves a safe snapshot of selected display fields from the moment you pin. Later edits to those fields do not change the published item until you refresh its snapshot or switch it back to Live.

Opening a picker, loading a selected item, searching, or closing the dialog does not create or refresh a snapshot. If Pinned or Refresh snapshot is disabled, the picker has not loaded current display data for that item. Open its Choose product, Choose category, Choose collection, Choose review, or Choose product video dialog and search for the existing item. After its result loads, close the dialog and try the row control again. If the item cannot be found, the editor cannot safely create a new snapshot from it.

Featured Product and Featured Collection — restore a missing source

Screen: Online Store → Landing Page Editor → select the section → All settings → Content. This guidance applies to the standard Featured Product and Featured Collection presentations. Use the member-specific instructions below for Featured Product (Rich) and other family members.

Featured Product (Rich) — the product picker

Screen: select a Featured Product (Rich) section (or the Rich variant of Featured Product) → Content tab.

The Product field is a real catalogue picker — search and pick a product the same way as any other product-picker field in the library. It shows the product's actual name once selected, and still resolves correctly (rather than falling back to a plain ID field) on a section that was absorbed from an earlier Featured Product Rich save. Every other Content field this variant carried before — Heading, Subheading, Custom Heading, Custom Description, CTA Text, Show Price, Show Add to Cart, Show Description, and Background Color — stays exactly where it was; picking a product doesn't remove or reset any of them.

Use the selected product row's Live or Pinned mode when its name and image should either track the catalogue or stay fixed for this placement. Price, stock, and variants remain live in both modes.

Use the copy and price controls when this placement needs to differ from the catalogue product. In Content → Copy, Custom heading supplies a placement-specific title when Heading is empty; if both are empty, the product name is shown. Custom description replaces the catalogue description with plain text for this section and falls back to the product description when empty. In Content → Product signals, turn off Show price to hide the price in every Featured Product (Rich) layout.

Featured Product — image aspect ratio

Use Image aspect ratio to set the product-image frame in both the standard presentations and the Editorial presentation.

Bulk Order Table — product source, tier hints & the silent-empty edge case

Screen: Online Store → Landing Page Editor → Add section → Library, search "bulk" for Bulk Order Table — a wholesale/bulk ordering grid with a quantity stepper and per-row subtotal, one row per product.

Product Comparison — choose and order products

Screen: Online Store → Store Editor → open Product Comparison → Content → Products compared.

With Product specifications, the published storefront builds one specification table from the union of specification names across the available selected products. Each product keeps its picker order as a column. When a product has no value for a row that another selected product supplies, its cell shows — so the table stays aligned. In Layout & highlights, Show specs is on by default; turn it off to hide the specification rows without clearing the selections.

Comparison Carousel (above) is the first section that can build its content from reusable blocks — Compare Slider, Image, Video, and Quote, up to 12 per section — instead of only its own fixed fields; see Content Blocks for how the Blocks panel works. It also auto-advances when its own Autoplay setting is on and has more than one slide, and — like the other carousels in this library — carries a visible, keyboard- and touch-operable pause/play control whenever it's auto-advancing, per WCAG 2.2.2.

Flash Sale — Default Card Appearance (section-level fallback)

Screen: Flash Sale section → Design tab → Card look group.

Default Card Appearance sets the fallback look for every product card in the section: Shape (Square, Rounded — default, Circle, Pill), Shadow (None — default, Subtle, Medium, Strong), Background Color, Border Color, and Border Width. Leave any of them blank/zero and the card keeps its existing built-in look (rounded corners, no shadow) — this group is additive, not a forced restyle.

Featured Collection — show empty stars on unrated products

Screen: Store Editor v3 → select a Featured Collection section → Design → Rating look.

A Featured Collection that never saved a rating look or Show empty stars keeps its previous cards: the single star with the score for rated products and nothing for unrated ones.

Featured Collection — Meta stack look and Price look

Screen: Store Editor v3 → select a Featured Collection section → Design.

Meta stack look and Price look are hidden, not just disabled, in two cases. The section is on classic cards. Or the section is on an Editorial card preset, or on the contained editorial grid (Grid layout with the contained editorial grid card preset): those cards never read these two looks. The Product card look group stays visible in the Editorial case, because resetting it is how you leave Editorial.

Featured Collection — New Arrivals heading alignment

In + Add Section, choose the Featured Collection family's New Arrivals (Badge) variant (an existing section may still be named New Arrivals). Then select it and open All settings → Content → Heading.

Category & navigation sections

Ways to help customers browse: category circles (round image tiles), a bento-style category grid for wide catalogues, a "shop by category" browser that pulls your real catalogue structure, "shop by price" and "shop by brand" link groups, and a collection-showcase block for featuring one collection at a time.

Newer navigation options include Shop by Concern (health/wellness stores browsing by concern rather than category), a full Mega Menu dropdown, Sticky Header behaviour controls for your site header's scroll response, a typography-only Brand Index A-Z for multi-brand editorial stores, a Dynamic Showcase that adapts between a grid and a carousel automatically, and three collection-focused variants that sit alongside Collection Showcase above: Featured Collection (one curated collection with editorial intro text), Collection List (a grid of collection tiles), and Collection Tabs (several collections behind a tab strip — replaces what would otherwise be multiple Featured Collection sections stacked on the page).

Shop by Category — choose and order catalogue categories

Shop by Category uses the same catalogue-backed category picker as the Store Editor's other category bindings. The storefront keeps the order you set in the selected list.

Shop by Concern — add concern tiles

Shop by Concern shows a row of tiles such as "Hair fall" or "Dry skin", each opening your product list filtered to the categories you attach to it. Until you add at least one tile the section has nothing to show.

Eyebrow, Heading and Subheading sit under Content → Heading. Column counts, gaps and tile size are Design-lens controls, not part of Content.

Mega Category Grid — set the category tiles

Open Online Store → Store Editor, select the section (Library name Browse categories (grid)), then open the Content lens and the categories list. Use its add row to create a tile, fill the tile fields and choose Add. Tiles can show a custom label and image, and a size of small, medium or large in the bento layout.

Collection Showcase — Overlay Heading (cover-image overlay text)

Screen: Collection Showcase section → Content tab → Heading accordion.

The Heading accordion has two text fields, not one: Heading (the section's own heading, shown above the collection block) and Overlay Heading, right underneath it — the text shown on top of the cover image, inside the dark overlay next to the "Shop Collection" link. Before this control existed, the overlay always repeated the section Heading verbatim, with no way to word it differently (e.g. a shorter, punchier line for the image overlay than the section heading above it).

The overlay (and so the Overlay Heading text) only renders at all when Show Cover Image is switched on in the Media accordion further down the same Content tab, with a Cover Image URL set. Cover Overlay Opacity (%) — also in the Media accordion — controls how dark the scrim behind the overlay text is (0 = transparent, 100 = fully dark).

Collection Showcase — products, decorations, and typography scale

Screen: Online Store → Landing Page Editor → select Collection Showcase → All settings. These paths and labels apply to the current Store Editor.

An existing Collection Showcase that never saved Heading scale or Body scale keeps its previous typography. Removing one decoration leaves every other decoration in place; removing all of them removes the decoration layer without changing the collection or product cards.

Collection Showcase image shape and fill

Select a Collection Showcase section, then open Design → Image treatment. The treatment includes these two controls:

An existing Collection Showcase keeps its previous storefront appearance until you change either control. The first time you reselect Image Shape or How images fill the shape, the section's currently saved shape and fill begin applying together; review both values before publishing. When you choose Natural, differently proportioned source images can produce differently tall frames.

Pill Anchor Nav — in-page jump links

Screen: Online Store → Landing Page Editor → Add section → Library, search "anchor" or "pill" for Pill Anchor Nav — a horizontally-scrolling row of pill-shaped jump links to other sections further down the same page (e.g. Reviews, Sizing, FAQ).

Dynamic Showcase — Card Corner Radius

Screen: Dynamic Showcase section → Content tab → Display Style accordion → (below Items per Row).

Card Corner Radius sets the corner rounding for every product card the section renders, in either Grid or Carousel display mode: Square (0px — default), Small (4px), Medium (8px), Large (12px), or Extra Large (16px). It sits right under the Items per Row (Desktop) / Items per Row (Mobile) fields in the same accordion. Existing Dynamic Showcase sections default to Square (0px) — the historical look — so nothing changes for a page you built before this control shipped until you deliberately pick a rounder value.

Columns and filter chips on rows carried over from Featured Collection. A Dynamic Showcase row that was absorbed from a Featured Collection keeps that section's Columns (desktop and mobile) and Show filter chips values, and the storefront now honours them. In Grid mode the saved Columns set the number of cards per row, falling back to Items per Row when no Columns value exists. With Show filter chips on, the row shows an All / Sale / New chip bar above the cards: Sale and New narrow the product cards, and category cards always stay. Carousel mode (chosen, or reached automatically when the item count passes the switch threshold) still uses fixed card widths, so Columns does not change a carousel. If a carried-over row looks wider, narrower, or gained a chip bar after this change, that stored value is now being applied; change or clear that value to get the old look back.

Collection Tabs and Dynamic Showcase — product actions are opt-in

In the Store Editor, open either section, then open Product actions → Show add to cart buttons. The switch is off unless you explicitly turn it on. Save and publish after changing it.

When enabled, a simple product gets an add-to-cart action. A product with variants opens its product page instead so the customer can choose a variant. When the switch is off, the cards still navigate to their products but do not show a cart action. Category, collection, and testimonial cards never gain cart actions from this setting.

Section controls newly reachable in the Store Editor

Six controls that the storefront renderers already read were not reachable in the v3 Store Editor. They are now. In each case open Online Store → Store Editor, pick the page, select the section, and use the lens named below (the Content or Design tab of the section's inspector). Save and publish afterwards; check the published page, not just the editor preview.

Collection List: Collection tile corner radius. Open Design → Image → Collection tile corner radius and pick None, XS, S, M, L, XL, Pill or Full. The radius rounds each collection tile. When it is set it wins over the Image group's own corner radius; when it is unset the tile keeps its previous rounding, so existing stores do not change. If the radius seems to do nothing, check whether the section's tiles show images at all, and remember that a value you set here overrides the other radius.

Collection Tabs: View all link. Open Content → View all link and turn on Show view all link. Two more fields appear only while the toggle is on: Link URL and Link text. Leave Link URL empty and the link goes to the active tab's collection page, or to /collections when that tab has no collection chosen. Leave Link text empty and it reads View All, or View All (N) when the tab has more products than its product limit shows (N is the tab's full product count); a Link text you type is used as written. The link appears under the products of the active tab, including a tab with no collection chosen. Once you have touched this group, its toggle is authoritative: switching it off hides the link on every tab, even one cut short by its product limit. A section that never touched this group keeps the older behaviour: no link unless a tab has a collection, and a tab cut short by its product limit shows the link on its own.

Why Us: Card description color. In the section's Cards group, open Card description color and choose a colour for the description line under each card's title. Leave it empty to keep the card's default description colour. If the colour does not change, confirm you are editing the description colour and not the heading colour, which is a separate setting.

Influencer Picks: name typography and heading color. Open Design → Influencer name typography. Influencer name color and Influencer name transform (Default, None, Uppercase, Lowercase, Capitalize) apply to the section's influencer names and to the quote line beneath them. Heading color is the more specific setting: when it is set it decides the colour of each influencer's name, and Influencer name color then colours the quote line. If only Influencer name color is set, it colours both. Leaving all three empty keeps the existing look. The transform changes only how the text is shown, not what you typed.

Popup Announcement: Open button link in. Open Content → Content details → Open button link in and choose Same tab (the default) or New tab. New tab opens the popup button's link in a new browser tab and keeps the shopper's current page open behind it. The choice only matters when the popup has a button with a link; a popup without one shows nothing to open.

Referral Program: full setup. Open the Referral Program section in the Store Editor. Reward, copy, link and share settings are under Content → Content details; Background image is under Design → Layout.

1. Set the reward. In Content → Content details, choose Reward type: Percent off, Flat amount, Free product or Points. Percent off is what the field shows when no type has been saved. Then enter Reward amount, the number shown in the reward, such as 15 for 15% off or 100 for 100 points. Reward amount is hidden for Free product. For Flat amount, Reward currency symbol appears; type $, or leave it empty to keep ₹.
2. Add your own reward (optional). Your reward for referring has its own Reward type (Percent off, Flat amount, Points) and Reward amount. Once an amount is set, the pill adds "you get N back" after the friend's reward (a percent adds %, points add pts, a flat amount adds no symbol). Leave the amount empty to hide it.
3. Set the button and link. Button text replaces the main button's label; leave it empty to use Copy link button label, which also names the Copy link share button and defaults to "Copy Link". Default referral link is the base URL that gets copied and shared.
4. Edit the steps. How it works steps is a list: each step has Step number, Title, Description and Icon. Leave the list empty to show the three default steps ("Share your link", "They shop", "You earn").
5. Choose share buttons. Switch on any of WhatsApp, Email, SMS, X (Twitter), Facebook and Copy link under Share buttons. With all six off, the section shows WhatsApp, Email and Copy link.
6. Optional extras. Show QR code adds a Show QR code button; the code is fetched only when the shopper clicks it. Show leaderboard reveals Leaderboard title (empty means "Top Referrers") and Leaderboard rows (1 to 10, default 3). Under Design → Layout, Background image sets the section background.
7. Save and publish.

What customers see in the reward pill ("Give your friends ..."), per type:

• Percent off shows the amount followed by % off, for example "15% off".
• Flat amount shows the symbol then the amount, for example "$100".
• Points shows the amount followed by points, for example "100 points".
• Free product shows "a free product" and ignores the amount.

The main button and the Copy link share button copy the link; the other share buttons open WhatsApp, X, Facebook, the mail app or the messages app with the reward text and link filled in.

Edge cases:

• If no Reward type has been saved and there is no stored reward amount, the reward pill is not rendered at all. A chosen type with no amount renders ? in place of the number.
• In the editor preview the buttons are disabled, the QR code is never shown and the link is a sample, so test them on the published page.
• The leaderboard does not list real referrers; it shows a placeholder message sized to Leaderboard rows.

Social-proof sections

Trust-building blocks: press mentions ("As Seen In" logos), influencer picks, and a stats counter ("10,000 orders shipped"). Customer reviews and video testimonials, certifications and guarantee badges, and a UGC/Instagram photo wall are also covered — by the Testimonial Rich Carousel, Trust Badges, and Customer Photo Wall sections below, not by dedicated cards of their own; see the callouts further down this section for exactly what moved where.

A separate, premium option — the Testimonial Rich Carousel, with avatars, star ratings, and verified-badge quotes — auto-advances when its own Autoplay setting is on and there's more than one testimonial. Whenever it's auto-advancing, it carries the same visible, keyboard- and touch-operable pause/play control described above, per WCAG 2.2.2.

Testimonial Rich Carousel — use approved store reviews

Screen: Online Store → Store Editor → open Testimonial Rich Carousel → Review source.

Set Source to Manual testimonials to keep editing the section's own testimonial items, or choose Store reviews to use published customer reviews. With Store reviews selected, Review filters appears. Configure:

• Minimum rating — include only reviews at or above that rating, from 1 to 5.
• Review limit — the maximum number shown, from 1 to 50.
• Sort — Top rated or Most recent.
• Only reviews with images — exclude text-only reviews when on.
• Product (optional) — choose a catalogue product to restrict the source to its reviews. Its selected row uses the same Live or Pinned control as other Store Editor entity pickers.

The public source returns approved reviews only. Storefront cards may show a shortened customer name, verified-buyer status when the review belongs to an order, and review images in their saved order. Customer contact details, order details, and moderation data are not exposed.

Custom storefronts can request GET /api/v1/customer/public/products/reviews with minRating, limit, sort, withImages, and an optional productId. The default limit is 12 and the maximum is 50; the response includes total and limit metadata. Each row uses the same safe public DTO as a product's review response: verifiedBuyer, customerDisplayName, and ordered images entries shaped as { url, sortOrder }, without customer or order identifiers.

Testimonial Rich Carousel — empty sections and the Verified Buyer badge

Screen: Online Store → Store Editor → open Testimonial Rich Carousel → Testimonials.

Nothing is invented. The section only ever shows testimonials you entered (or approved store reviews). The Full bleed collage, Stacked deck, and Bento mosaic layouts used to pad a short list with made-up people; they no longer do.

• On your published storefront, a Full bleed collage, Stacked deck, or Bento mosaic section with no testimonials renders nothing at all — no heading, no empty box. The section is simply hidden.
• Inside the Store Editor, the same section shows a dashed placeholder that reads No testimonials yet — add some in the Testimonials group, so you can still see and select it. Open the Testimonials group in the inspector and add an item (Quote, Name, optional Role or location, Photo, Rating, Source, Date).

The Verified Buyer marker is shown only for testimonials that are genuinely verified:

• Verified Buyer (in the card footer or under the author, depending on Card style) or Verified • (before the product name when a product link is shown) appears only when that testimonial is marked as a verified buyer.
• You can't tick this by hand. The Testimonials items have no Verified field, so a manually entered testimonial never shows the badge. Verification comes from the Store reviews source: set Review source → Source to Store reviews (see the previous section) and a review shows the badge when it was matched to a purchase. A review that came in through a bulk import is never badged, whatever its other data says.
• A testimonial with no verification information shows no badge — it is no longer treated as verified by default.

Testimonial Rich Carousel — Full bleed collage and Stacked deck with few testimonials

With the Full bleed collage or Stacked deck layout, the storefront shows exactly the testimonials you have: one testimonial shows one card, and no invented names or quotes fill empty slots. The storefront never pads the layout with placeholder testimonials, so one or two real testimonials render as one or two cards (the collage and deck lay out at most three). A section with none shows nothing on the published page (the editor shows a placeholder).

Testimonial Rich Carousel — heading placement & carousel layout controls

Open the section's Layout tab for two additional controls beyond the Layout/Card style/Show Avatars/Show Ratings/Autoplay group.

Instagram Feed (Content tab → Instagram Feed group) now has two tile-image controls: an Image Corner Radius (px) field (0–48) and an Image Shadow toggle, both applying to every tile in the grid or carousel. UGC Gallery gets its own Tile Style group, but on the Style tab rather than Content — background, shadow, and hover-effect controls for its photo tiles, the same shared style editor used elsewhere in the library. Influencer Picks' Heading group has a new Show Subheading toggle (on by default); switching it off hides the subheading text entirely rather than just leaving the field blank.

Press Mentions — logo height and logo-only layouts

Screen: Online Store → Store Editor → open Press Mentions.

With the Logo bar or Ticker layout (Logo bar is the default when no layout is chosen), logos are capped at 32 pixels tall unless you change it. In the Logo style group, Logo max height is a slider from 16 to 160 pixels in steps of 4 pixels. The slider is hidden on the other layouts ("Only used with the Logo bar and Ticker layouts"). Logos on the logo-only layouts also sit at full strength on hover instead of a permanently faded look.

On those two layouts there is no quote to show, so each mention's Quote color (overrides section default) and Accent color fields are hidden. They reappear on the quote layouts.

Press Mentions & Instagram Feed — Card Appearance

In the older editor both sections have a Card Appearance accordion on the Style tab. In the current Store Editor, Press Mentions has Design → Quote style → Card style (Card background, Border color, Border width, Corner radius, Shadow, Hover effect), shown only on the Quotes carousel layout, and Instagram Feed has Design → Tile style → Tile card with just Tile background and Tile hover effect (None, Lift, Zoom, Brighten, Glow); border and shadow are not offered there. In the older editor on Instagram Feed it sits below the existing Show Dots / Auto Scroll switches. Press Mentions gets the full shared control set (background, border width/color/style/radius, shadow, hover) used across the library, applying to every quote card in its carousel or grid layouts (it has no effect on the ticker or logo-bar looks, since those don't render individual cards). Instagram Feed's panel is narrower — see below.

Customer Reviews — star colour and card look

Screen: Online Store → Landing Page Editor → select the Customer Reviews section → Design → Card look. Set Card background, Card border color, Card border width, Card corner radius and Card shadow (None, Soft, Medium, Bold). They apply to every review card.

Customer Reviews — Image aspect ratio (existing sections)

This control applies to an existing Customer Reviews section — see the callout above the Testimonial Rich Carousel how-to for where this look now lives on new pages.

The customer-reviews carousel's Card Appearance accordion (Design tab → Image treatment group) has a Card aspect ratio field. Choose 1:1 (default), 3:4, 4:3, or 16:9 for the crop applied to each review's photo. It's read by the section's Variant A and Variant D layouts; if your Customer Reviews section is set to a layout that doesn't show reviewer photos at all, changing this field won't visibly do anything until you switch to a layout that does.

Customer Reviews — autoplay and reduced motion (existing sections)

For an existing Customer Reviews section, automatic movement is off when Scroll automatically has never been set. The control appears only when the section uses the Carousel layout.

Visitors whose device or browser requests reduced motion get no automatic review advance, even when Scroll automatically is on. This follows the same pause-or-stop expectation documented by WCAG 2.2.2 for moving content.

A further set rounds out trust-building: Trust Badges and a Press Logos Band (a second, simpler "As Seen In" strip alongside Press Mentions above), Social Links for follower counts and profile links, a Customer Photo Wall for UGC photos with @handle attribution, and a general-purpose Marquee / Ticker for any continuously scrolling strip of brands, logos, images, or announcements — a Marquee Style control switches it between a text ticker, a scrolling logo bar, and a scrolling image strip. Logo Marquee and Image Marquee, previously two separate cards here, are now looks of this one Marquee section — see the how-to right below.

Trust Badges — hover effect (Card Grid look only)

Trust Badges' Content tab has a Card style group with a Hover effect dropdown (None, Zoom, Lift, Brighten, Glow).

This group only affects the Card Grid look — open Trust Badges' Layout tab and switch its variant picker to the Card Grid option first. On any other variant the Hover effect won't change anything on the storefront. Trust Badges has no transition-duration control: an older Transition (ms) value saved on a section is not read by the storefront and changes nothing.

Trust Badges and Guarantee Banner — what to put in the icon field

Each badge in Trust Badges has its own icon field. Screen: Store Editor → open the page → select the Trust Badges section → Content tab → Badges group → open a badge → Icon name. Badge image and Badge image (mobile), just below it, take an uploaded picture instead.

1. In Icon name, type an icon id, such as VerifiedUser. This is the safe choice on every store: the storefront draws the matching line icon, and an id it does not recognise draws a check mark instead of the word.
2. To use your own artwork instead, use Badge image (or paste an image URL in Icon name). The picture shows in place of an icon.
3. Publish, then reload the live store to see it.

This applies to Trust Badges, including its Guarantee (Single Featured Badge) look, and to an older Guarantee Banner section already on a page.

Content Slider — cards and their button

Screen: Online Store → Landing Page Editor → select the Content Slider section → Content → Cards. A new Content Slider starts with three titled example cards to replace. Each card has Title, Body, Icon, Accent color, Button text and Button link. Playback, navigation and Cards per view (Desktop, Tablet, Mobile) are in their own Content groups.

1. Type Button text. The card also saves an empty Button link so the pair stays complete.
2. Type Button link.
3. Publish. The button shows on the storefront only when both are filled; a card with only one of them shows no button (a text-only button would be unnamed and a link-only button would have no label).

Troubleshooting: if a card's button is missing, fill the other half and check neither is blank or only spaces.

Compatibility Checker — devices and example data

Screen: Online Store → Landing Page Editor → select the Compatibility Checker section → Content. Devices holds Compatible devices, Incompatible devices and Max visible tags; Display style offers Finder, Matrix and Wizard; Product categories and Compatibility matrix (pairs of products with a status and optional note) feed the other styles. A newly added section starts with three example compatible models and two incompatible ones; replace them with your real device names. On Refined, the Not Compatible panel is hidden when you list no incompatible devices.

Troubleshooting: if the search finds nothing for a device, add its exact name to Compatible devices; names are matched as written.

Marquee — Text Ticker, Logo bar & Image strip looks

Screen: Online Store → Landing Page Editor → Add section → Library, then search or scroll to Marquee / Ticker. Logo Marquee and Image Marquee no longer have their own cards here — they're now looks of this one Marquee section, picked with the Marquee Style control inside it. If you already had a Logo Marquee or Image Marquee section on a page before this change, it's untouched: it still renders exactly as before, and clicking it to edit it opens this same Marquee editor with Marquee Style already set to match (Logo bar or Image strip).

Content & brand-story sections

Sections for telling your story rather than selling directly: an FAQ accordion, a "how it works" numbered-steps block, a before/after image comparison, blog-post previews, a founder-story block, a brand timeline, and a split brand-story layout with image and text.

In the split brand-story layout, the Description field (Content tab → Body group) now always updates the paragraph text under your Subheading — any brand-story section still shows exactly what you last typed there.

FAQ's Heading group gained an Eyebrow Text field (a plain label line above the FAQ heading), and a separate Heading Style group below the questions list gives you a full typography editor — Font Weight, Size, alignment, bold/italic/underline, and a Color swatch — for the heading text.

FAQ — Item Appearance & Question/Answer Style

In Store Editor v3, open the FAQ section's Design tab and use the Question & Answer Style group (Design → Question & Answer Style) for the item colours. The v3 swatch labels are sentence case: Item background, Active item background, Question color, Answer color and Icon color. In the older editor the same accordions sit on the section's Style tab, below the shared Decorative Shapes accordion (see Decorative shapes further down this page). Together they shape how each question-and-answer row looks, separate from the Heading Style group.

Item Appearance — the shared per-item card controls (background, border, shadow, hover effect, and so on) applied to every FAQ row.

Card Style — five fields that target the FAQ row's own container, independent of Item Appearance: Background Color, Border Width, Border Radius, Border Color, and Shadow. Before this update these were declared in the FAQ schema and the renderer already read them, but no editor control could reach them — a merchant could only set them by hand-editing the page JSON.

Question & Answer Style — five color swatches (Item Background, Active Item Background, Question Color, Answer Color, Icon Color, each with a Solid/Gradient fill toggle) plus a Question Style and an Answer Style typography group. Each typography group exposes four fields — Style (Normal/Italic), Text align, Decoration (None/Underline/Strikethrough), and Text transform — scoped to just those four; Font Family, Font Weight, Color, Line Height, and Letter Spacing aren't shown here because the FAQ renderer doesn't read them off this field (color for the question/answer text is the separate swatch above, not this typography group). Leaving every field in this accordion untouched renders byte-identical to before — every field falls back to the section's existing item-appearance/typography values.

There's also a plain Slideshow for a mid-page image sequence, separate from the sections above. Turn on its own Autoplay setting with more than one slide and it, too, carries the same visible, keyboard- and touch-operable pause/play control, per WCAG 2.2.2.

A longer list of general content blocks fills out the rest of the library. Storytelling and value-proposition blocks: Why Choose Us (icon-plus-text value props), an Ingredient Spotlight with hotspot annotations on a product image, a Sustainability Story with eco-impact stats, a full-screen Story Mode for sequential narrative slides — see the full control breakdown further down this page — and a second Blog Posts grid/carousel (with excerpts and dates) alongside Blog Preview above.

Layout and media blocks: Multi-Column and Alternating Columns for flexible or side-alternating image-and-text rows, an Image Gallery with a lightbox (its asymmetric collage and mosaic looks live inside this one card now — see the callout under Content & brand-story sections below), a Content Slider of generic content cards, a Headline Collision for an oversized, layered-typography headline, a Rich Text freeform block, a Custom HTML / Embed for pasting third-party widgets or iframes, an Ingredient Table and a Size Chart for detailed tabular information, and a Store Locator map for physical locations.

Sustainability Story — stacking on phones and certification logo colours

Screen: Online Store → Store Editor → open Sustainability Story.

• Stacking on phones. With Layout preset set to Image left or Image right, the image and text now stack vertically on phones (below 768 pixels wide) instead of staying side by side in a squeezed row. From 768 pixels up the two-column layout is kept, with the image on the side you chose.
• Logo colours. In the Certifications group, Logo colours chooses how certification logos are painted: White silhouette (the default) or Original colours. The helper text says white silhouette suits transparent logos and Original colours suits logos with a solid background. The control only appears when Layout preset is Full-bleed overlay, because the other layouts do not paint logos as silhouettes.

Sustainability Story — stats row

Screen: Online Store → Store Editor → open Sustainability Story → Stats.

In Image left and Image right, a section with exactly three stats shows them in a single row of three; one, two, or four or more stats sit in two columns. In Full-bleed overlay, stats show two columns on a phone and three from tablet width up. The small uppercase stat labels use a slightly darker shade of your accent colour so they stay readable against the section background.

Ingredient Table — enter ingredients by hand

Screen: Online Store → Store Editor → page → Ingredient Table → Content. Parts open in this order: Heading, Ingredients, Ingredient groups, Table.

Size Chart — enter size rows by hand

Screen: Online Store → Store Editor → page → Size Chart → Content. Parts: Heading, Size rows, Columns & units, Fit guide, Table style. This is the section's own chart, separate from the per-product size chart in Specifications and size chart.

Store Locator — location card layout and featured badge

Use these settings to align each location card and colour its Featured badge without changing your store names, addresses, map or search settings.

Screen: Online Store → Pages → Landing → Store Locator → Design in the Store Editor. Select the section in the outline before opening Design.

Why don't the alignment or badge colours change? First select a component look in Design; the classic location-card appearance does not use these settings. For badge colours, also check that at least one location is marked Featured store. If the draft preview is correct but customers still see the old appearance, check that the page has been published after saving.

Calculator and Personalization Preview — text alignment

Select Calculator or Personalization Preview in the Store Editor outline, then open Design → Layout → Content layout → Text alignment. Choose Left, Center or Right to align the form or preview when a component look is selected. This does not rearrange the Calculator's inputs and result, or change the text placement on a personalization image.

Without a new alignment choice, the control shows the previously saved style alignment, or Center if there is none. Opening Design does not save a new value. Choose a component look, check the preview, and Save the draft. The existing text-on-image alignment controls in Personalization Preview remain separate; use those to position text within the image.

Three utility blocks round out Content: a Divider for a visible or invisible spacing break between sections, an Announcement Bar thin banner for site-wide notices, and a Maintenance Message block for a maintenance notice placed inline on a regular page — the dedicated offline experience with its own templates and countdown is a separate screen; see Maintenance Mode Page Editor.

Divider — visible styles & the invisible spacer

Screen: Online Store → Landing Page Editor → Add section → Library, search "divider" for Divider.

Divider Style picks what actually shows: Blank (spacing only) renders nothing visible — it's pure vertical space; Hairline is a thin rule; Ornamental flanks a small glyph (Ornament: Dot, Diamond, or Flourish) with two short bars; Gradient Fade is a soft gradient bar that fades to transparent at both ends. Height sets the block's overall height (Extra Small 8px through Extra Large 96px, or Custom to type an exact pixel value in the Custom Height (px) field that appears). Thickness and Color (Border/Accent/Muted/Inverse) only appear when Divider Style isn't Blank — a blank divider has nothing to thicken or color. Full-bleed (edge-to-edge) removes the divider's normal side padding and max-width so it spans the full browser width instead of matching the page's content column.

Story Mode — chapters, motion, and pinned scroll

Screen: Online Store → Landing Page Editor → Add section → Library, search "story" for Story Mode — a full-bleed sequence of narrative chapters (image + heading + body + optional CTA), for founder stories, product origin stories, or step-by-step brand narratives.

Blog Preview — whole-card click-through & Card Appearance

Every post card in Blog Preview — the image, title, excerpt, and meta line, not just the Read More link — is clickable and navigates to that post, on every Display Style (Grid, List, and Carousel alike). Clicking Read More itself still works exactly as before and doesn't double-navigate; it's just no longer the only clickable part of the card.

Screen: Blog Preview section → Design tab → Image treatment group → Card shape.

Card Appearance gives you the shared background/border/shadow/padding/hover controls for every post card in the section — the same panel used across the library.

Announcement Bar — rotating through multiple messages

By default the Announcement Bar's Content tab shows a single Announcement Message field — the classic one-line banner. Open the Multi-Announcement Rotation group underneath it (its own accordion, with a hint reading "Add two or more announcements to rotate them automatically") to add a second message and turn the bar into an auto-rotating carousel instead.

If your rotation items link to products or collections, fill in the Store Base URL field in the Call to Action group (e.g. https://yourstore.billionbiz.store) — it's what the rotation items' product/collection links are built against. The bar-level Dismissible toggle, Bar Style (font size, background/text color, bottom border), and Bar Layout (position, sticky, scroll-hide, text alignment, height) controls apply to every rotation item the same way they apply to the classic single message.

Announcement Bar — schedule, countdown, direction, and dismissal

Screen: Online Store → Store Editor → open Announcement Bar. The same controls remain available when editing an older Secondary Announcement Bar.

Announcement Bar — Bar Layout: only a sticky-top bar reserves space above the header

Screen: Announcement Bar section → Layout tab → Bar Layout. Two of its fields govern where the bar sits and whether it pushes the header down: Position (Top — default, or Bottom) and Sticky (fixed while scrolling) (off by default).

Only a bar that's both Position: Top and Sticky on actually claims header-offset space — a non-sticky top bar (including one placed as your page's first section) scrolls with the page like any other section, and a sticky-bottom bar occupies the opposite edge instead. If you have more than one sticky-top Announcement Bar mounted at once (for example on a page and its published header), the storefront reserves space for whichever one is tallest, and removing the taller one lets the remaining bar's own height take over automatically.

Conversion sections

Sections aimed at nudging a purchase or a sign-up: a newsletter sign-up block, a referral-program invite, and gradient call-to-action banners.

A wide range of urgency and loyalty sections also live in this category: a Low Stock Alert banner with tiered urgency styling, a Limited Edition countdown for exclusive drops, a Deal of the Day spotlight with its own countdown, a Free Shipping Banner progress bar tied to the live cart total, a Loyalty Program promo showing points and tier progress, a Gift Finder quiz that narrows down results by price range, a Subscription CTA with a monthly/annual billing toggle, a Back in Stock notify-me form (email or SMS), a Wishlist Reminder nudge that reads the visitor's live wishlist, and a Pricing section for plan or product-tier comparison tables.

Free Shipping Banner — live threshold, coupon, and countdown

Screen: Online Store → Store Editor → open Free Shipping Banner → Shipping threshold.

Set Threshold source to Shipping rules to use the store's current free-shipping rule at runtime, or Manual amount to use Free shipping threshold. Turn on Use live cart total so the customer's cart contributes to the progress display; when it is off, the progress bar always shows 0% used. The published storefront recalculates the remaining amount from the live cart; the editor uses preview data.

In the same Shipping threshold group, set Coupon code, optional Coupon message, Countdown ends at, and When countdown ends (Hide countdown or Keep at zero). Customers can copy the coupon code; the editor preview does not write to their clipboard. The countdown can disappear at zero or remain visibly at zero without hiding the shipping progress itself.

Gift Finder's Content tab has a Button Labels group with six editable button texts — Start Quiz, Next, Back, View Results, View Gift, and Shop All Gifts — so you can rename any step of the quiz flow without touching code; each defaults to that same wording if left blank.

Gift Card Band — denominations & the CTA target

Screen: Online Store → Landing Page Editor → Add section → Library, search "gift card" for Gift Card Band — a promotional strip for selling gift cards, with a row of denomination pills and a CTA.

A second set covers popups, compliance, and promotional layout: a Popup Announcement (entry, exit-intent, scroll-depth, or timed trigger), a Newsletter Popup for email capture, a Cookie Banner and an Age Verifier for GDPR/CCPA and age-gate compliance, a Promo Banner and Promo Tiles for slim strips or tile grids, a Sticky Add-to-Cart bar that follows the visitor while scrolling a product page, and a Contact Form with configurable fields. Contact Form submissions go to a webhook you configure, or to BillionBiz's own handler if you leave that blank — either way you'll see a real error if delivery fails, never a false success message.

Promo Tiles — columns, image ratio, and gap

Screen: Online Store → Landing Page Editor → select Promo Tiles → All settings → Content → Layout. These controls are available on the standard Promo Tiles layout in the current Store Editor; the Promo Grid variant uses its own layout controls.

Industry-specific sections: Style & Lifestyle

+ Add Section groups these into two category tabs, Style (fashion and beauty) and Lifestyle (home, food, and electronics) — the five older per-industry tabs were merged into these two, but nothing about searching for a section changed: type "beauty," "fashion," "home," "food," or "electronics" in the search box and the matching cards still appear, since each section keeps its original industry as a searchable tag even after the re-grouping.

A set of sections built for particular product categories, including a lookbook, a seasonal-edit layout, and a Size Guide CTA for fashion; recipe cards, a meal planner, and Nutrition Highlights for food brands; a skin quiz and shade finder for beauty; a compatibility checker and a Setup Guide (numbered steps with per-step time estimates) for electronics; and room-inspiration, shop-by-room, and an AR Preview CTA for home goods.

Recipe Cards — carousel dots

Screen: Online Store → Store Editor → open Recipe Cards → Design → Layout, with Layout set to Carousel (the default; Grid has no dots).

In the plain carousel, each recipe card now fills the width of the carousel (on some template looks, wider screens show two or three cards across and phones show one), and the dots are measured from the real card width, so each dot lines up with one recipe. Previously the slides did not take a full width, so the dots jumped past recipes. No setting is involved. The dots show only when there is more than one recipe and the strip can scroll, and they are not drawn when the carousel uses the carousel-chrome arrows and pagination composition instead.

Recipe Cards — Card Appearance

Screen: Online Store → Landing Page Editor → select the Recipe Cards section → Design → Card style. The group has Card background, Border color, Border width, Corner radius, Shadow (None, Soft, Medium, Bold) and Hover effect (None, Lift, Zoom, Brighten, Glow). The older editor's Style tab → Card Appearance accordion is the same panel.

The same shared background/border/shadow/hover panel as Blog Preview above, applied to every recipe card. Unlike Blog Preview, there's no layout restriction here — Recipe Cards' Grid and Carousel display styles both route their cards through the same rendering path, so Card Appearance applies regardless of which one you've picked. Defaults match the section's existing look (your theme's surface background color, soft shadow, subtle lift on hover), so an existing Recipe Cards section renders unchanged until you open this accordion and change something.

Featured Collection & Tabbed Products — Card Style

Screen: Featured Collection section → Content tab, and Tabbed Products section → Content tab.

Both sections have a Card Style dropdown with two choices: Classic (the default, and how every existing Featured Collection or Tabbed Products section already renders) and Premium, a richer product-card treatment. Picking Premium and saving is enough — there's nothing further to configure on the card itself.

Universal Card (preview) on six sections

Six sections — Best Selling Products, New Arrivals, Flash Sale, Trending Now, Shop by Category, and Category Circles — share a newer, consolidated card design you can preview one section at a time. Each of these sections has a Universal Card (Preview) group in its Content tab, with the same controls in every section:

Recently Viewed — show the wishlist heart

Recently Viewed has its own Universal-card wishlist control. It is on when the setting has never been saved, unless an older section already saved its corresponding wishlist setting off.

The control is hidden when Card system is Legacy, because legacy Recently Viewed cards do not render a wishlist action. It is also hidden when Layout is Grid and Premium card geometry is Contained editorial grid, because that premium geometry uses a separate card without a wishlist action.

Flash Sale — which products it shows

Screen: Online Store → Landing Page Editor → select the Flash Sale section → Content → Products shown → Products to show. Pick the exact sale products, in order. A Flash Sale with no products, tag or collection chosen shows nothing on the published page unless it uses the Refined look (Design → Presentation → Refined, which new sections start with): then it fills from your catalog, up to the section's product count (4 when none is set). If you choose a tag or collection that matches no products, the section stays empty, because an explicit choice is never replaced by the catalog. Older sections on Classic keep showing nothing until you pick products.

Troubleshooting "why is my Flash Sale empty?": pick products, a tag or a collection; or switch Presentation to Refined for the catalog fill; then check the tag or collection actually contains published products.

Flash Sale — sold-progress bar

Flash Sale's countdown timer stays on the section itself either way. Its per-item sold-progress bar (the "X% Sold" bar under a product, controlled by the section's own Show Sold Bar toggle) carries over onto the Universal Card automatically when both that toggle is on and the product has a real sold-percentage value — you don't need to configure anything extra for it once Universal Card is on.

Trending Now — what doesn't carry over yet

Trending Now's decorative urgency flame badge and its trend graph don't have an equivalent on the Universal Card yet — turning Universal Card on for this section loses them. Its plain low-stock count does carry over, shown as a "Only N left" note on the card.

Style navigation and utility sections in Store Editor v3

Screen: Online Store → Landing Page Editor → select the section → All settings → Design. Start with the section's real content, links and targets in Content, then choose a component look. The coordinated spacing and framing below activate after a styled look is selected. Keeping the original tile, or only changing Advanced while the original tile is selected, does not activate that coordinated treatment. A heading look needs heading content; a button look needs a rendered button.

Choose a look, check desktop and mobile, click Save, and Publish when ready. Test the actual links or tab switches on a fresh storefront page. A visual look keeps the section's existing content and destinations; it does not create a missing target, brand, measurement or button.

Product Tabs — make long details easier to scan

Screen: Online Store → Landing Page Editor → Product Tabs → All settings → Content. In Tabs, add each Tab label and Tab content. Add a Tab image and its Alt text when using Content layout → Text + image. Show icons controls the existing icons, and Sticky tab navigation controls the existing sticky behavior.

Open Design → Tab navigation look. Choose Editorial underline for an underlined active tab, Retail pills for compact pills, Segmented for a grouped switch, or Quiet text for a quiet text treatment. Section natural keeps the section's own tab style. Styled navigation gives tab buttons a larger touch target and readable content width; it keeps each tab's content and images. Use Active tab style, Tab alignment and Tab density directly below the look tiles to refine a selected look.

For a lower dot selector, choose Dots in Design → Carousel controls. Those dots select a content tab; they do not add product slides. When no Tab navigation look is configured, the styled dots replace the upper navigation. A configured Tab navigation look takes precedence for that upper row. Check that customers can distinguish the tabs from the selected panel's content. For a more visible section title, choose Boxed in Heading look to frame an existing heading as a pill.

If styling appears unchanged, confirm a styled tile is selected and that the section has tabs. If an image is missing, check Content layout and the image inside that tab before changing Media look on another section. Preview long tab labels on mobile and test every panel after publishing.

Pill Anchor Nav — style links that scroll within the page

Screen: Online Store → Landing Page Editor → Pill Anchor Nav → All settings → Content → Pills. For each pill, set Pill label and Target section anchor ID to the anchor ID of a real section on this page. Enter the ID itself. In Scroll behaviour, use Highlight the pill in view, Stick to top on scroll and Sticky offset for the existing scrolling behavior.

Open Design → Tab navigation look and choose Retail pills or Segmented for distinct selected states, or Editorial underline / Quiet text for lighter navigation. The styled presentation gives links larger touch targets and removes the edge fade. Heading look → Boxed frames the existing heading without changing where the pills scroll.

If a pill does nothing, compare its Target section anchor ID with the destination section's anchor ID. Changing a look cannot repair an unmatched ID. If a sticky header covers the destination, check the existing sticky offset and test the page on mobile. A highlighted pill requires Highlight the pill in view and a real destination; a look alone does not add scroll tracking.

Mega Menu — frame real featured images and destinations

Screen: Online Store → Landing Page Editor → Mega Menu → All settings → Content → Columns. Add a Column heading and Links, with Link text and Link URL for each destination. Use Featured image for the column image and its Alt text / Image link, or Promo tile for Tile image, Tile label, Button text and Tile link. Enable Show featured images and Show promo tiles in Menu for the elements you want customers to see. Opens on keeps its existing Hover or Click behavior.

Open Design → Tab navigation look and choose a styled tile for the column navigation. A selected Media look can also frame the existing featured or promo images. The styled menu uses larger link targets and a link-and-media composition on desktop; mobile stacks the content and keeps the tab list scrollable. Featured images use a wide frame on desktop and a taller frame on mobile, so check the crop and alt text at both sizes.

If an image does not appear, confirm the relevant Show featured images or Show promo tiles control and its image source. A media look does not supply an image. If a link opens the wrong page, correct Link URL, Image link or Tile link in Content; choosing a new look preserves those values. Test both opening the menu and following a destination after publishing.

Size Chart — keep measurements readable

Screen: Online Store → Landing Page Editor → Size Chart → All settings → Design → Tab navigation look. Choose Segmented for the measurement-unit switch, or another styled tab tile for its preferred active state. The styled chart increases button targets and aligns table cells while preserving the configured measurements and the existing unit-toggle setting. Check both units when the toggle is enabled, and scroll a wide chart on mobile.

Heading look → Boxed frames an existing title. A styled Card text look can show a "Measurements in cm" or "Measurements in inches" note for the selected unit; it does not fill in missing rows. If the unit switch is hidden, check the section's existing unit-toggle setting. If the chart is empty, add the measurements in Content before styling it. A look does not convert missing or incorrect measurements into valid sizing data.

Brand Index A–Z — frame the directory heading

Screen: Online Store → Landing Page Editor → Brand Index A–Z → All settings → Design → Heading look. Choose Boxed to frame a populated heading, or Plain to keep the original heading treatment. Keep the real brand names, logos and destinations in Content. Check a brand link and the directory's existing filtering on mobile after publishing. If there is no visible heading to frame, supply the heading first; changing its look does not add brands to the directory.

Divider — choose spacing, a rule or a section label

Screen: Online Store → Landing Page Editor → Divider → All settings → Design → Divider size & style. Set the native Style, Height, Line thickness, Line color and Full width (edge to edge) for the separation you need. Custom height is used with the Custom height choice; Ornament mark is for an ornamental rule. In Content → Divider label, Label text supplies a section label when the native Style is Section label.

Open Design and choose a divider look: Current divider keeps the native style; Blank spacer creates space; Hairline, Ornamental and Gradient fade create their respective rules; Heading rule arranges a label with a rule. The native settings stay saved, while a styled look can add spacing and a minimum height. Check the preview; use Current divider with the native Style when you need its original height. When using a section label, you can also choose Heading look → Boxed; its side rules are hidden on narrow mobile screens to leave room for the label. Existing ornament choices remain in effect where the selected divider uses an ornament.

If you wanted only whitespace, choose Blank spacer and check Height. If you wanted a visible label, check Label text and the native Section label style. A heading look needs that label; it does not invent one. Inspect the section boundaries on mobile as well as desktop before publishing.

Featured Collection — card video and card ribbon

Screen: Store Editor v3 → select a Featured Collection section → Cards group.

Featured Collection — Link product titles to product page

Screen: Store Editor v3 → select a Featured Collection section → Cards group.

The switch is off by default, and off writes nothing: titles stay plain text and existing stores are unchanged. The links and the variant redirect work on the published storefront; inside the editor preview, add-to-cart on a variant product does not navigate.

Testimonial Rich Carousel — two marquee rows

Screen: Store Editor v3 → select a Testimonial Rich Carousel section → Layout group → Marquee rows (1 or 2).

The field appears only when Layout is Kinetic marquee and Source is Store reviews; otherwise the inspector explains that it is used only on that layout and source. Enter 2 for two rows that scroll in opposite directions; leave it empty (or 1) for a single row. If the field is missing, check that the source is not Manual testimonials.

Video Spotlight Carousel — Reels grid

Screen: Store Editor v3 → select a Video Spotlight Carousel section → Layout group.

Best Selling and Hero Product Showcase — add-to-cart under the image and mobile image focus

• Best Selling: in the Cards group, Show add-to-cart below the image moves the add-to-cart button out of the photo and under it. It is available only while Show add to cart is on.
• Hero Product Showcase: in the Background image group, Mobile image focus sets which part of the background photo stays in view on phones, written as "x% y%" (0% 0% is top-left, 100% 100% is bottom-right). Leave it empty for the centre. It is available only while Show background image is on.

Add-to-cart button text, brand fill and phone image stacking (Store Editor v3)

Four controls were added to the v3 Store Editor. Open Online Store → Store Editor, pick the page, select the section, and use the Content tab of the section's inspector. Save and publish afterwards, then check the published page, not only the editor preview.

Best Selling — Add-to-cart button text.

Best Selling — Fill the add-to-cart button with the brand colour. In the same Cards group, switch this on to turn the button under the photo into a solid brand-colour button instead of an outline. It is visible only when both Show add to cart and Show add-to-cart below the image are on. With the button still on the photo, the toggle is hidden and the editor says to turn on Show add-to-cart below the image.

Best Selling — Show best sellers until you pick products. Select Best Selling, open Content → Product source, set Product source to Manual selection, and switch on Show best sellers until you pick products. While no products are picked, the section shows your best sellers instead of an empty placeholder; as soon as you pick products, only your picks show. The switch is off by default and is visible only while Product source is Manual. With Auto (best sellers) the section already lists best sellers, so the switch is hidden.

Best Selling — Flat add-to-cart button. Select Best Selling, open Content → Cards, and switch on Flat add-to-cart button. The grey strip behind the button under the photo disappears and the button uses the standard 4px corner radius. It is visible only while Show add to cart, Show add-to-cart below the image and Fill the add-to-cart button with the brand colour are all on; otherwise the editor says to turn on the brand-colour fill. Like the brand fill, it applies only to the current (revision 2) card rendering. Off keeps the strip.

Hero Banner — Image shadow. Select Hero Banner, open Content → Media, and choose Shadow or None under Image shadow. None removes the drop shadow around the image when it sits inside the banner as a framed picture; the corner rounding stays. Shadow is the default and keeps today's look. Layouts where the image fills the whole banner have no frame, so the setting changes nothing there.

Hero Banner — Darken behind text on mobile. Select Hero Banner, open Content → Media, and switch on Darken behind text on mobile. On phones and small tablets (under 900px wide) an extra dark layer sits behind the hero text so it stays readable over a bright photo. The toggle is off by default, and off writes nothing: the image keeps its normal darkening. It is visible only while Hero layout is Full-bleed backdrop (including its Editorial — text block anchored left text panel) or Frosted panel; on every other layout the control is hidden because those layouts do not render the layer. Image darkening, just above it, still sets the darkening on all screen sizes.

Hero Carousel — Darken behind text on mobile. Select Hero Carousel, open Design → Height & image darkening, and switch on Darken behind text on mobile. Below 900px wide (phones and small tablets) the dark layer over each slide image is held at no less than 60% darkness, so light headline text stays readable over a bright photo. A slide whose own Image darkening is already above 60% keeps its stronger value. The toggle is off by default, and off writes nothing: the slide keeps its normal darkening. It is always shown, with no condition.

Hero Carousel — Image fit on mobile. In the same Design → Height & image darkening group, Image fit on mobile is a two-way switch: Fill (the default) crops each slide image to the box, and Fit shows the whole image below 768px wide. Use Fit for banners with text baked into the picture, which Fill would crop. Desktop is unchanged either way.

It takes effect only when all of these hold:

• the hero carousel uses the newer rendering (revision 2). A hero carousel from a Store Template ships with it only where the template sets it; one on the earlier rendering ignores the toggle;
• the section uses the default layout (variant A, the classic centred layout), the only one whose image layer this applies to;
• the visitor's screen is under 900px wide.

Without it, on the newer rendering, the dark layer on screens under 768px is capped at 35% so a phone photo is not over-darkened. Turning the toggle on replaces that cap with the 60% floor.

Featured Product — Add-to-cart button text. Select Featured Product, open Content → Call to action, and fill Add-to-cart button text (placeholder and default Add to Cart). It appears only while Show add-to-cart button is on. Empty keeps Add to Cart.

Flash Sale — Add-to-cart button text. Select Flash Sale, open Content → Cards, and fill Add-to-cart button text (placeholder and default Add to Cart). It applies to every deal card. This field has no on/off condition in the editor, so it is always shown. Empty keeps Add to Cart.

Hero Product Showcase — Stack the photo under the text on phones. Select Hero Product Showcase, open Content → Background image, and switch on Stack the photo under the text on phones. On screens narrower than 480px the text comes first and the photo sits below it, 260px tall, instead of sitting behind the text. Wider screens are unchanged. The toggle is visible only while Show background image is on, and it is also hidden when the section uses the pinned-photo (hotspots) layout.

Hero Product Showcase, Stats Counter and Guarantee banner: choose Design Classic or 2026

Hero Product Showcase, Stats Counter and Guarantee banner each have an opt-in Design control with two choices, Classic and 2026. Classic is the original look and is the default: a section you have never touched, and every section on a store that already exists, stays Classic. 2026 switches that one section to the refreshed treatment. The control's own help text reads "2026 adds the refreshed treatment for this section. Classic keeps the original look."

Screen: Store Editor → open the page → select the section → Design tab → Design group → Design.

Only these three sections have this control. Opting one section in does not change any other section or page, and the control never saves a value until you click 2026.

Hero Product Showcase: Text over image

On Hero Product Showcase only, the same Design group has a second segmented control, Text over image, with three choices: Auto, Light and Dark. It sets the colour of the text that sits over the image overlay on the 2026 design. The help text reads "Auto picks light or dark text for readability over the image overlay." Auto is the default when you never set it, and Light or Dark force that text colour.

The control is visible only while Design is set to 2026. On Classic it is hidden, and the editor's note for it is "Choose the 2026 design above to edit this." Switch Design to 2026 and Text over image appears right below it.

Rich Text, Trust Badges and Custom HTML — style the visible content

For Rich Text, go to Online Store → Landing Page Editor → Rich Text → All settings → Content, enter Text, and set Presentation → Prose. A styled heading or quote look gives existing prose a readable centered measure and framed heading or pull-quote treatment. It preserves the text. These prose treatments do not apply to Code block presentation; keep code formatting under its own controls. If a heading or quote look appears to do nothing, check that the text actually contains that kind of content and that Presentation is Prose.

For Trust Badges, go to Online Store → Landing Page Editor → Trust Badges → All settings → Content → Layout → Layout → Guarantee banner. Populate the existing badges and, if needed, Guarantee banner → CTA text and CTA link. A styled Heading look or Call to action look gives this presentation an open badge arrangement, with three columns on desktop and one on mobile. It keeps the badge content and link behavior. Other layouts keep their own arrangement, so check Layout before expecting the Guarantee banner treatment.

For Custom HTML, go to Online Store → Landing Page Editor → Custom HTML → All settings → Content. Supply HTML and, if desired, the native Heading, Button text and Button link. Choose Heading look or Call to action look in Design to style those native elements around the HTML. The styled wrapper limits their reading width and adds spacing, and its typography can affect the HTML content. It does not rewrite your HTML or its links. Render in a sandboxed frame retains the separate frame behavior. If the section is absent, check that HTML is populated; if a native button is absent, check Button text before changing its look. Preview embedded content and follow the native button's real link before publishing.

Sections that offer component looks

In the v3 store editor, some sections show a component look group in the Design lens of All settings. See Choosing a component look for how the picker works. A group appears only where the section actually contains that piece:

• Card looks (a card group plus Price look and Meta stack look where they apply): Best Selling Products, New Arrivals, Flash Sale, Trending Now, Recently Viewed, Featured Collection, Tabbed Products, Shop by Category, Category Circles and Promo Tiles. These sections show card looks on the storefront once their Card system is Universal. While a section uses classic (Legacy) cards, the picker keeps its tiles disabled and shows a notice with a Switch to universal cards button. Shade Finder also offers card looks, with no notice: its layout, hover, price and meta stack apply under either system, and it has no design or material controls. Promo Tiles uses offer card looks after the same explicit switch. Price look is for product cards only; Meta stack look is for product and category cards.
• Media look: Hero Video, Shoppable Image, Shoppable Video, Video Section, Video Hero Overlay, Video Spotlight Carousel, Video Testimonials, Hero Split, Multi-Column, Alternating Columns, Why Choose Us, Featured Product (Rich), Press Logos Band, Split Hero Scrub, and the media items inside composite sections.
• Announcement bar: the Announcement Bar section has its own five-look editor.
• Free shipping banner: its own five look tiles plus content fields.
• Tab navigation look: Tabbed Products, the collection tabs section, Product Tabs, Pill Anchor Nav, Mega Menu and Size Chart. See Style navigation and utility sections for setup and troubleshooting.
• Form input look: Contact Form and Newsletter CTA.
• Heading look and Carousel chrome: available on most sections that have a heading or a carousel (well over a hundred sections have a heading look). Carousel chrome is opt-in: a section that has never had a carousel look picked renders exactly as before.
• Composite sections (carousel, grid, marquee, split, stack, tabs) add the section-level composite editor described on the editor page.

Call to action look is available on supported hosts, including Newsletter CTA and Hero Banner. Go to Online Store → Landing Page Editor → select the section → All settings → Design → Call to action look. See Give buttons a shared look for the four styled tiles, controls, preserved action behavior, and presentation-specific limits. Other look groups depend on the section's supported components and populated look catalog; use its normal Content, Design, and Behaviour controls when the group you need is unavailable.

Configure family members in Store Editor v3

Use this guide when you choose a named member inside a section family in the current Store Editor. The Content, Design, and Behaviour controls below belong to that member. The earlier category references on this page also describe the classic editor, whose tabs and labels can differ.

Screen: Online Store → Landing Page Editor → Add section → Library → choose a family member → select its outline row.

The saved section can retain its family name while showing the chosen member's controls. For example, a Limited Edition member belongs to Featured product; select that member's outline row to edit its quantity and countdown. Opening the inspector alone does not fill or replace saved content. If you see unrelated fields, check the selected outline row and the member you chose.

Limited Edition — stock, collector badge, and deadline

Choose Online Store → Landing Page Editor → Add section → Library → Featured product → Limited Edition, then select its outline row. Open Content → Content details to configure the drop's image, stock display, and collector badge.

Open Behaviour → Playback & countdown → Countdown. Set End time to the deadline in the store timezone shown beside the picker, then enable Show days if you want days alongside hours, minutes, and seconds. The date is saved as an absolute UTC time, so customers share the same deadline.

If the collector badge is missing, check both Show collector badge and Collector number. A past deadline displays zeroed countdown units; check the date and timezone before publishing. Quantity remaining is a section display value: changing it does not adjust catalogue inventory.

3D / AR Viewer — fallback image and crop focus

Choose Online Store → Landing Page Editor → Add section → Library → Featured product → 3D / AR Viewer, then select its outline row. Open Content → Content details → Fallback image.

Edit both focal-point coordinates to keep the product visible when the image is cropped. Each coordinate edit preserves the other coordinate and the image information.

If the fallback image does not appear, check the viewer's configured source: a model takes priority over the scene and still image. A scene normally takes priority over the still image. Setting a fallback image does not replace the configured model.

Newsletter Popup — fixed or per-visitor countdown

Choose Online Store → Landing Page Editor → Add section → Library → Promo popup → Newsletter Popup, then select its outline row. Open Behaviour → Playback & countdown → Countdown.

Customers see hours, minutes, and seconds while the timer is running, then the ended message. If the timer is missing, confirm Show countdown is on and either a deadline or duration is set. If changing the duration has no effect, clear the fixed End time first. Previewing an already open popup is insufficient for checking a newly configured per-visitor window; reopen the customer page to start a fresh instance.

Story Mode — edit and order chapters

Choose Online Store → Landing Page Editor → Add section → Library → Image banner midpage → Story Mode, then select its outline row. Open Content → Content details → Chapters.

Customers read the chapters in the saved order. In the normal chapter layout, Text only hides the chapter image; keeping an image saved lets you switch back later. A chapter button appears only when both its text and link are filled in. If the story is empty, add at least one chapter; if a button is missing, check both button fields. The earlier Story Mode reference describes presentation and motion behavior separately.

Image + Text Slideshow — slide content and playback

Choose Online Store → Landing Page Editor → Add section → Library → Image banner midpage → Image + Text Slideshow, then select its outline row. Open Content → Content details → Slides.

Fill a new row and select Add to create a slide. Use Move up, Move down, and Remove to maintain the sequence. Then open Behaviour → Playback & countdown:

If the slideshow is empty, add at least one slide. If autoplay appears still, confirm Playback is Autoplay and there is more than one slide. The editor does not show the customer playback progress bar, so check that setting on the published page. If mobile imagery looks unchanged, check that the intended slide has a Mobile image rather than editing another slide's image.

Size Guide CTA — link, image, and layout

Choose Online Store → Landing Page Editor → Add section → Library → Gift finder → Size Guide CTA, then select its outline row.

The button is deliberately inactive in the editor preview. If it does nothing there, check the published customer page. If customers reach the wrong page, review Button link. This CTA links to the supplied destination; choosing it does not create a size-chart popup. Shared Design → Background remains available for the section background, separately from the image layout.

Ingredient Spotlight — ingredient pins and positions

Choose Online Store → Landing Page Editor → Add section → Library → Room inspiration → Ingredient Spotlight, then select its outline row. Open Content → Content details → Ingredient pins.

Fill a new pin row and select Add. Use Move up, Move down, and Remove to maintain the order. Changing one position coordinate preserves the other coordinate. Shared Design → Background also remains available.

Customers see the ingredient names and descriptions from these pins when the detailed ingredient list is empty. If the section already has detailed ingredients, those names and descriptions take priority; the pin positions still apply to the detailed entries in matching order. Keep the pin order aligned with the detailed list. If a name edit seems ignored, check which list supplies the displayed content before changing it again.

Founder Story — show a founder title

Choose Online Store → Landing Page Editor → Add section → Library → Brand story split → Founder Story, then select its outline row. Open Content → Founder, turn on Show founder title, and enter Founder title, such as Founder and designer. These controls are already part of Founder Story.

The title input is hidden while Show founder title is off. In the founder-name presentation, customers see the title when the toggle is on and the title contains text. If it is missing, check the toggle and the text, save the draft, and publish the updated page.

Headline Collision — overlapping image and image description

Choose Online Store → Landing Page Editor → Add section → Library → Hero banner → Headline Collision, then select its outline row.

If no Overlapping image is set, customers see the headline only; the size, position and stacking controls have nothing to act on. If the image is missing on the published page, confirm the headline is filled and the image was chosen, then publish again. If it hides too much of the headline, move it with the position fields or switch Image stacking to Behind headline.

Media sections — how-to for the latest polish

Each subsection starts from Online Store → Store Editor → Landing, then select the section.

Slideshow — slide copy, scrim and arrows

Open Content position (under Layout). It offers Over image and Below image; an untouched section behaves as Over image, so each slide's Heading, Body, and Button text with Button link now always show on the photo (earlier, a section whose position had never been saved dropped the copy).

• Over image — copy sits at the bottom of the slide on a smooth dark fade that stays strong behind the text and clears toward the top, with a soft text shadow. A slide with no photo has no dark fade; its copy uses your page text colour on the light background.
• Below image — the photo is clean and the copy appears centred under it, with the button in your accent colour.
• Show arrows (under Transition & navigation) draws 48px round arrows on a darker, blurred backing so they stay visible on bright photos.

Why can't I read my slide text? Add a photo to the slide or switch Content position to Below image; very pale photos can still reduce contrast, so pick a darker crop.

Hero Split — button width

The Button text button now hugs its label instead of stretching across the whole text column. Nothing to set: shorten or lengthen Button text and the button follows. A full-width button on an older page means the page was not republished.

Split Hero Scrub — height, image pane and progress ticks

Open the section's Frames and Layout groups.

• These are minimum heights, never a maximum, so the pane grows with its content. On a phone the image pane is at least 60% of the screen height or 32rem, whichever is smaller (68% or 34rem with a Media look). From 768px wide up, the text and image sit side by side and the section and image pane are at least one full screen height or 44rem, whichever is smaller.
• With two or more Frames, small progress ticks sit at the bottom-left of the image pane; the current frame's tick is longer. They are decorative and are hidden from screen readers.
• A frame with no image shows a faintly tinted pane in your text colour rather than a grey slab.
• Text side (Left or Right) decides which side the image takes; the headline wraps in balanced lines and the subheading is kept to a readable width.

Why isn't the image or the progress ticks showing? A frame with no image shows only the tinted pane, and the ticks need two or more Frames; add an image to each frame under Frames. If the text is on the wrong side, change Text side under Layout.

Video Section — play button and header position

Open Video source (MP4, YouTube, or Vimeo), Playback, and Overlay content.

Why is there no play button? Show player controls is off, Autoplay is on, the source is a YouTube/Vimeo link, or the video has not yet scrolled into view.

Video Hero Overlay — captions and poster

Open Captions. Captions show by default: type the line in Caption text, and turn Show captions off to hide it. The caption appears as a small pill over the video only when Caption text has something in it; with the text empty, nothing is drawn. This is the on-screen text for people watching without sound, not a subtitle file. The Poster image you set under Video is also given to the video itself, so it shows before playback starts.

Why isn't my caption showing? Caption text is empty (only spaces counts as empty), Show captions has been turned off, a Content position (the nine-point grid) is set on the section, which hides the caption pill, or the page was not republished after you typed it. A poster that does not appear means Poster image is empty under Video.

Hero Video — captions file

Captions (VTT) URL (in the Video group) attaches a subtitle track. Leave it empty and no track is added at all — nothing is broken and the browser console stays clean. Add a VTT link to give viewers a captions option in the player.

Why don't viewers see a captions button? Captions (VTT) URL is empty, the link does not open a valid VTT file, or the video is a YouTube or Vimeo link. The field works for uploaded (native) video only; YouTube and Vimeo embeds get no captions track, so use their own caption settings.

Parallax Band and Mid-Page Banner — empty banners

A Parallax Band or Mid-Page Banner with no image and no copy (no eyebrow, heading, subheading, or button that has both label and link) is not published: customers see no grey slab. In the Store Editor the empty banner stays visible so you can still select and fill it. A Parallax Band with copy but no image shows its text on the muted fallback, with the text colour corrected automatically if it would be hard to read.

Why did my banner disappear? Add an image or at least a heading to it and republish.

Image description on banners

Parallax Band and Mid-Page Banner (Image banner midpage) each have an Image description field under Online Store → Landing Page Editor → select the section → All settings → Content → Content details. It is the image's alt text, read by screen readers and used by search engines. Describe what the picture shows; keep it short. When you replace the picture through the Image field, the description you already entered is kept, so update it only if the new picture shows something different.

Choose a countdown look

In Online Store → Store Editor → Landing, select a section that has a countdown, open Design → Countdown look, and choose a tile. The four campaign treatments are:

• Campaign badge pairs the deadline with the section's existing campaign or collector badge.
• Coupon ticket places an existing redeemable coupon beside the deadline; its copy action still uses the configured coupon, not a sample code.
• Availability rail pairs the deadline with actual stock or delivery progress.
• Product window places the section's configured product image beside the deadline.

A look changes appearance, not campaign content. Set the end time, coupon, product image or progress using that section's existing controls. If a section does not supply the content a treatment needs, the storefront shows its timer instead; choosing a tile does not invent a badge, coupon, stock count or product image. For example, Free Shipping Banner supplies coupon and delivery-progress treatments, but does not supply a product image for Product window.

On Announcement Bar and Free Shipping Banner, the four campaign tiles remain visible but cannot be selected in a short bar. Each shows Needs an 80px+ bar. Increase Announcement Bar's Bar height (px) to at least 80, or set Free Shipping Banner's Height to Tall, then return to Countdown look. The original and simpler timer treatments remain usable in short bars.

Choose Reset look to return to the original timer appearance. This does not clear your deadline, coupon or other campaign content. Click Save, reopen the same section and check the selected tile before publishing. Saving a draft does not publish it. If the timer is missing, check that countdown display is enabled, that an end time is set and that the campaign has not expired; changing its appearance does not restart it.

Countdown date picker and draft troubleshooting

End time uses the store timezone printed beside the picker and saves an absolute UTC time. While the timezone loads, the date input is disabled. If it cannot load, the picker becomes available after 5 seconds with a message such as Store time could not be loaded. Using Asia/Kolkata; check the time before saving. Check the displayed timezone and intended deadline before saving. A later valid settings response can update the displayed timezone without changing the saved deadline.

If customers still see old content after Save, check whether you published that draft and whether you are viewing the intended page. For the broader save and publish workflow, see the Landing Page Editor guide.

Linking buttons and CTAs

View All destinations and product-card actions

In the Store Editor, open a supported section, then open View all link → View all link. Turn on Show view all link; this reveals Link URL and Link text. The switch is off by default, so a section using the new shared control adds no View All link until you opt in. Set Link URL when you need an explicit destination and Link text when the button needs custom wording, then save and publish.

When a supported section can derive a destination and Link URL is empty, one category uses /products?category= followed by that category's ID, a collection uses /collections/ followed by its slug, review sections use /reviews, offers use /offers, and general product feeds use /products.

On product cards, add-to-cart is immediate only for simple products; a product with variants opens its product page. Category and collection cards navigate to their browse destination, and testimonial cards never receive product cart actions.

Any field that points somewhere else — a button, a "shop now" link, a card's click target — opens the same link picker instead of a raw URL box. Choose one of four link types:

• External URL — any full web address, validated as you type.
• Collection / Category — search and pick one of your store's categories.
• Product — search and pick a specific product.
• Page anchor — jump to another section further down the same page, picked from a list of the page's current sections.

Dynamic text variables

Use a dynamic text variable when a section should show current store, date, or customer information instead of fixed copy.

• Store name — {{store.name}} shows your company name, or your store name if no company name is set. If neither is available, it shows Your Store.
• Support email — {{store.email}} shows the public support email from your store's contact details. If none is available, it shows support@store.com.
• Today's date — {{date.today}} shows the current date, formatted for the storefront language. It does not depend on a saved field.
• Current year — {{date.year}} shows the current four-digit year. It does not depend on a saved field.
• First name — {{customer.firstName}} shows the signed-in customer's first name. When no name is available, it shows there.
• Email — {{customer.email}} shows the signed-in customer's email address. When no email is available, the token becomes empty text.

Signed-out visitors get the fallback for both customer variables: there for First name and empty text for Email. The editor preview shows a realistic fallback value so you can see roughly how the text will read.

A mistyped or unsupported token is not removed. The storefront shows it to visitors exactly as you typed it, including its braces, so you can find and correct it.

The Footer editor's Copyright text uses its own separate copyright mechanism; these landing-section variables do not change how that field works.

Why do visitors see a token instead of a value?

The token is unsupported or mistyped. Reopen the field, remove it, then use Insert variable to choose one of the six supported menu items above.

Why does the greeting say "there"?

The First name variable falls back to there when the visitor is signed out or their account has no first name. This lets copy such as "Hello, {{customer.firstName}}" remain readable without showing a blank name.

Recurring controls: Eyebrow, Motion, Badge & Image Style

Several small control groups appear across a wide range of sections — rather than repeat the same explanation on every section above, here's what each one does and roughly which sections have it.

Eyebrow — a short label line shown above a section's heading (e.g. "NEW COLLECTION"). It comes in two variants, matched to what that section's renderer actually reads — you can't switch a section between them, so a section only ever shows the fields for its own variant:

• Plain text — a single Eyebrow Text field, nothing else. Sections: FAQ, Collection Showcase, Mega Category Grid, Shop by Concern, Dynamic Showcase, New Arrivals, Product Bundles, Trending Now, Certifications, Customer Reviews, Guarantee Banner, Influencer Picks, Instagram Feed, UGC Gallery, and Size Guide CTA.

• Text + style + color — an Eyebrow Text field, an Eyebrow Style picker (Caps, Dash, Numbered, Theme), and an Eyebrow Color swatch. Sections: Back in Stock, Free Shipping Banner, Gift Finder, Limited Edition, Low Stock Alert, Referral Program, Subscription CTA, and Wishlist Reminder.

• Text + style — an Eyebrow (optional) text field and an Eyebrow style switch with Caps, Dash, Numbered and Theme. Sections: Deal of the Day, Setup Guide and Meal Planner. Caps is the default; Theme also renders caps. A plain-text eyebrow saved earlier stays visible and is upgraded the first time you edit it. Deal of the Day also has a separate Eyebrow text field that is used first; the style group there is labelled Eyebrow (fallback) and is used when that field is blank.

Motion — an entrance-animation setting for the section as it scrolls into view: a Motion Preset picker (Fade, Slide Up, Zoom, Stagger, Text Reveal, or None to turn the animation off), an Easing picker (Standard, Emphasized, Spring), and a Duration (ms) field. Sections: Back in Stock, Deal of the Day, Limited Edition, Low Stock Alert, and Shop By Room.

Badge — a small pill-shaped label (e.g. "NEW", "BESTSELLER") with a Badge Text field (leave it blank to hide the badge entirely), a Badge Style picker (Pill, Square, Minimal), and Badge Background Color / Badge Text Color swatches. Sections: Shade Finder, How It Works, Sustainability Story, Timeline, Setup Guide, Seasonal Edit, Meal Planner, Nutrition Highlights, Recipe Cards, Room Inspiration, and Image Collage.

This is a different, newer control from the Hero Banner's Badge Text (Eyebrow) field and the Hero Carousel's per-slide badge described under Hero & banner sections above — those use their own, older field shapes and aren't affected by anything in this section.

Image corner radius — an Image corner radius dropdown (labeled exactly that in the field itself) sits in the Design tab's Image treatment group on every section built around a photo or product image — around a hundred sections across the library, from hero and category imagery down to review-photo tiles. Choose None (square corners), Small, Medium, Large, Extra large, or Pill (fully rounded); leave it on Default (theme) and the image keeps whatever corner rounding your active theme already applies. A section you built before this control shipped renders exactly as it did — Default (theme) resolves to your theme's existing radius, not a fresh square or round default, so nothing changes until you deliberately pick a value.

Image Shape and How images fill the shape are separate from corner radius. Collection Showcase offers both controls; see Collection Showcase image shape and fill. Hero Video has a fixed video frame with a fill control; see Hero Video — video image treatment.

Image treatment — corner radius, aspect ratio and fit (Store Editor v3)

Many image-led sections share one Image treatment group. Open Online Store → Landing Page Editor → select the section → Design → Image treatment. It has up to three controls:

• Corner radius — None, S, M, L, XL or Pill. Rounds the corners of the section's images.
• Image aspect ratio — Original, Square, 4:5, 3:4, 4:3, 3:2 or 16:9. Original keeps each image at its own shape. Leave it unset for the section's default crop.
• How images fill the shape — Fill shape crops the image to the frame; Fit inside keeps the whole image visible.

Every control starts unset. An untouched section renders exactly as it did before, so existing pages do not change until you choose a value. Choosing an aspect ratio or fit also records that the crop was set on purpose; clearing the control returns the section to its own default.

Which controls a section shows:

Two sections name the group differently. Hero Product Showcase offers Image Shape (aspect ratio) and How images fill the shape, and only when a background image is shown (turn on Show background image first). Split Hero Scrub offers radius only, as Frame image corner radius.

Where aspect ratio and fit take effect. Corner radius is applied by every section in the table. Aspect ratio and fit reach the published image on the sections that offer them, including:

• Featured Collection and Tabbed Products (the classic product card), Flash Sale, and every Best Selling layout. In Best Selling a saved Image aspect ratio takes priority over the item style's own aspect ratio.
• Complete the Look, Product Tabs, Shade Finder (main image; swatch thumbnails keep their own crop), Deal of the Day, Gift Finder, Hero Split, Slideshow (split), Video Hero Overlay, Collection List, Category Circles, Promo Tiles, Lookbook, Customer Photo Wall, Video Section, Video Spotlight Carousel, Image Banner, Sticky Add to Cart, Timeline, Blog Posts and Blog Preview.
• Featured Product (fit applies to the main image and thumbnails) and Influencer Picks (the grid picks and the Instagram frames).
• Comparison Carousel: fit applies to the slider, button, split and fade comparisons. The Grid layout comparison still crops to fill.

Shop by Price offers corner radius and fit only; the editor no longer offers an aspect ratio control there. A section with no saved image treatment looks the same as before.

Image treatment on editorial sections (Store Editor v3)

The same Design → Image treatment group is on these sections, with these specifics:

• Blog Posts, Blog Preview and Timeline: corner radius, aspect ratio and fit. In Blog Preview, Design → Image treatment → Card shape → Post image aspect ratio (Square, Portrait 3:4, Landscape 4:3, Widescreen 16:9) sets the post image crop; it is hidden once Image aspect ratio above is set, because that one takes precedence. Leave both unset for the default 4:3 crop (16:9 on the featured card).
• Customer Reviews: corner radius sits in the Testimonial images fieldset. The radius there does not reach the Standard and Product-focused cards. Review card shape → Card aspect ratio (Square or Wide) applies to the Standard and Product-focused review cards only.
• Comparison Carousel: corner radius and fit.
• Recipe Cards and Sustainability Story: corner radius.
• Newsletter CTA: corner radius, for the Split layout (variant C) only. Variants A and B ignore it.
• How It Works: corner radius, for step photos only. Steps whose media type is not Photo (icon or video) ignore it.

Hero family — extra layout and image controls (Store Editor v3)

These controls sit in the section's Design tab. For each, select the section first: Online Store → Landing Page Editor → select the section.

• Parallax Band — Image parallax strength. Design → Layout → Image parallax strength is a slider from 0 to 1 in steps of 0.1; it shows 0.4 until you change it. Higher moves the image more as visitors scroll; 0 keeps the image still. Visitors whose device asks for reduced motion always get a still image. This is separate from the section background Parallax setting. The band's copy also follows Design → Typography scale → Font family now; leave it unset to keep the band's own font.
• Referral Program — Background image opacity. After you add a Background image (Design → Layout), Background image opacity appears: 0 to 100 in steps of 5, showing 100. 100 is full strength; lower values fade the image into the section colour. Until a background image is set the control is hidden ("Add a background image first.").
• Image + Text Slideshow — Text position. Design → Layout → Text position is Beside the image (the default), Over the image, centred or Over the image, bottom.
• Hero Carousel — Slide style (all slides). Design → Slide style (all slides) sets defaults for every slide; a slide can still override its own aspect ratio and text case.
  • Slide image aspect ratio — Inherit, Square 1:1, Portrait 3:4, Landscape 4:3 or Wide 16:9. A slide with its own aspect ratio wins.
  • Colour wash over slides — tints every slide image at 35% strength.
  • Text-side scrim — 0 to 100 in steps of 5. It is an edge gradient behind the text. 0 switches the scrim off and also removes the automatic one; unset keeps the automatic scrim.
  • Scrim direction (Side to side or Top to bottom), Scrim start colour and Scrim end colour appear only once the scrim is above 0 ("Set the text-side scrim above 0 first.").
  • Slide text color, Slide text font size, Slide text font weight (Inherit, or 300 to 900) and Slide text transform.

Nutrition Highlights — build the panel (Store Editor v3)

Choose Online Store → Landing Page Editor → Add section → Library → Nutrition Highlights, then select its outline row.

Trust Badges — Card style (Card grid variant)

Open Online Store → Landing Page Editor → select the Trust Badges section → Content → Card style. The group appears only for the Card grid variant (Variant B); other variants hide it.

Controls: Card background, Border color, Border width (0 to 8 px, starts at 1), Corner radius (0 to 40 px in steps of 2, starts at 8), Shadow (None, Soft, Medium, Bold) and Hover effect (None, Lift, Zoom, Brighten, Glow).

Your first edit fills the other card values with the defaults the section was already using, so changing one control does not unexpectedly restyle the rest. Once a card style exists, it replaces the built-in card look as a whole.

Alternating Columns — rows, image shape and side

Open Online Store → Landing Page Editor → select the Alternating Columns section → Content.

• Image & text rows: Rows, where each row has Image (with Alt text), Eyebrow, Heading, Body, Button text and Button link, and Image shape, which is set per row: Square (1:1), Landscape (4:3) (the default), Portrait (3:4), Wide (16:9) or Photo (3:2).
• Layout & motion: Image side (Alternate left and right (the default), Always left or Always right), Text alignment (vertical: Top, Center (the default) or Bottom), Space between rows and Section padding (each None, Small, Medium or Large), and Entrance motion (Reveal (the default) or None).

Card, spacing and heading controls on product sections (Store Editor v3)

• Flash Sale — Card look. Design → Card look: Card shape (Default (rounded), Rounded, Square, Pill, Circle), Card shadow (Default (none), None, Subtle, Medium, Strong), Card background, Card border color and Card border width (0 to 8 px). These apply only to the Legacy card system and are hidden when Card system is Universal.
• FAQ — Item card. Design → Question & Answer Style → Item card: Item card background, Item corner radius (0 to 48) and Item border width (0 to 8).
• Last row alignment. In Featured Collection, Complete the Look and Tabbed Products: Content → Layout → Last row → Last row alignment is Start, Center or End and places an incomplete final row of products. In Featured Collection it shows only for grid layouts, not carousel or scrollable ones.
• Section padding. Featured Collection and Dynamic Showcase: Content → Layout → Section padding is None, S, M or L.
• Complete the Look — Grid gap. Content → Layout → Grid gap: None, Tight, Default or Airy.
• Hero Product Showcase — heading and subheading text. Design → Heading typography and Subheading typography: colour, font size and font weight for each. The font family comes from Design → Typography scale → Font family.
• Shop by Concern — Heading typography. Design → Heading typography: Heading style, Heading decoration, Heading transform and Heading alignment. Alignment is hidden once a component look controls it.

Card size, View all and button looks on product sections

• Card size. In Design → Layout, Card size (S, M, L, XL or Custom, with Custom card width (px)) fits as many cards of that width as each row allows. Once set it wins over the Columns setting in Collection Tabs (grid layout) and Seasonal Edit (grid). Unset, the column count decides as before.
• View all in a grid. Collection Tabs in its grid layout now shows the View all link you configured for the section (its label and link). The carousel layout keeps its own link.
• Call to action look. In Collection Tabs and Dynamic Showcase, a look chosen under All settings → Design → Call to action look styles the Add to cart button. It needs Show add to cart buttons (Product actions) turned on. With no look chosen, the button is unchanged.
• Composite carousel. Its View all link goes to the section's configured View all link, falling back to the all-products page. Turning wishlist off for an item hides its heart.
• Custom HTML. Design → Typography scale → Font family now applies to the section's content; unset, nothing changes.
• Influencer Picks. The featured portrait keeps the Corner radius saved under Design → Image treatment.

Presentation — Classic or Refined (Store Editor v3)

Every section whose contract supports it has a Presentation control with two choices: Classic and Refined. Classic is the original look. Refined is the premium treatment, with more even spacing and a tidier layout. The control's own hint reads "Refined adds the premium card treatment. Classic keeps the original look."

Sections with the control: Why Us, Influencer Picks, Trust Badges, Skin Quiz CTA, Seasonal Edit, Dynamic Showcase, Gift Finder and Compatibility Checker.

Eleven more sections have it too: Multicolumn Alternating, Slideshow (non-hero), Promo Popup, Newsletter Popup, Image Banner (mid-page), Parallax Band, Video Section, Tabbed Products, Collection Tabs, Blog Posts and Blog Preview. Their hint reads "Refined adds the premium treatment. Classic keeps the original look." (The Newsletter Popup, Parallax Band and Collection Tabs hint says "premium card treatment".)

The remaining sections carry the same two-button switch. The single sections include: AR Preview CTA, Back in Stock, Best Selling, Book an Appointment, Calculator, Cascading Lookup, Collection List, Collection Showcase, Comparison Carousel, Content Slider, Customer Photo Wall, Divider, FAQ, Flash Sale, Founder Story, Free Shipping Banner, Gift Card Band, Hero Countdown, Hero Split, Lookbook, Low Stock Alert, Multicolumn, New Arrivals, Promo Banner, Recently Viewed, Recipe Cards, Referral Program, Room Inspiration, Shop by Room, Split Hero Scrub, Stats Counter, Sticky Add-to-Cart, Store Locator, Subscription CTA, Sustainability Story, Timeline and Trending Now. Six are the composite sections: Carousel, Grid, Marquee, Split, Stack and Tabs. On the composites the switch is a drop-down labelled Presentation under Design → Appearance; its two options are Classic and Refined. On the other single sections, the switch sits in its own Presentation group on the Design tab (Design → Presentation), the only control in that group.

Which one will a section use?

• A section added from the library starts as Refined. Every section type listed above seeds the Refined value when you add it, so a freshly inserted section already has the premium treatment on; check the switch if it looks different.
• Every section already on a page keeps the Classic look. Classic is stored by leaving the setting empty, and an empty setting always renders the original markup, so a platform update does not restyle pages you already built.
• Applying a preset from a composite section's preset grid (Design tab) keeps the section's Refined look; it no longer drops back to Classic.
• Refined is opt-in. A section you already have stays on Classic until you choose Refined; new sections you add start on Refined.
• You can switch either way at any time. Switching to Classic removes the setting from the saved section; switching to Refined saves it again. Your content (text, images, items) is not touched.

Hide section when empty (Blog Posts, Blog Preview, Tabbed Products, Collection Tabs)

Blog Posts, Blog Preview and Tabbed Products have a Hide section when empty switch in the same Design → Layout group as Presentation. Collection Tabs has the same switch on the Content tab in its Product actions group, next to Show add to cart buttons. Blog Posts also repeats the switch on the Content tab under Posts, and Tabbed Products under Category tabs; both places edit the same setting.

With it on, the live store drops the section while it has nothing to show: Blog Posts when it has no posts, Tabbed Products when no category tab has a product. The editor keeps showing the section so you can fill it. Sections added from the library after this change start with the switch on. Sections already on a page keep their saved value; if it was never set, the section renders as before.

Custom HTML — Refined copy layout

Custom HTML has two extra controls in its Custom HTML group on the Content tab.

Controls moved from Content to Design (Store Editor v3)

In Store Editor v3 a set of shared look controls live on the Design tab, grouped by purpose, whichever section you are editing:

If you look for one on the Content tab, a pill there reads for example "Card look: Moved to Design → Card look" (or "Heading look: Moved to Design → Heading look") and jumps you to the new place. The inspector search box also finds a moved control by its old name, for example type "Columns" and the control appears with its Design group shown. Values you saved earlier are unchanged; only where you edit them moved.

Smaller Store Editor v3 controls

Story Mode — Look. Choose Story Mode → Design → Layout → Look and pick Classic or Refined. Its hint reads "Refined adds the premium chapter treatment. Classic keeps the original look." Classic is stored by leaving the setting empty, so Story Mode sections already on a page keep their original look until you click Refined. Your chapters are not touched.

Not seeing it? Look is on the Design tab, not Content, and only in Store Editor v3. If the page still looks the same after you pick Refined, publish the page; the editor preview and the live store update separately.

Meal Planner — Text alignment. Choose Meal Planner → Design → Layout → Text alignment and pick Left, Center or Right. It is saved as the section's layout alignment, which the storefront reads first; an older saved alignment still shows in the control until you change it. An unset value renders centred.

Not seeing it? Text alignment is on the Design tab in the Layout group, not on Content. Its hint says it applies when a component look is selected; with no look selected it will not change the storefront.

Recently Viewed — card controls. Under Design → Layout: Card preset (Default, Editorial, Minimal, Bold), Premium card geometry (Standard cards or Contained editorial grid, which only affects the Grid layout) and Card system (Legacy or Universal). Under Design → Card look: Card background (colour) and Product title style with Title colour and Title size (8 to 48 px). Leave them untouched and existing cards render as before. Why do my cards look unchanged? Card system is on Legacy and Card preset on Default.

FAQ — Answer color. In FAQ → Design → Question & Answer Style the Answer color swatch colours the answer text. The group also holds Item background, Active item background, Question color and Icon color.

Not seeing it? The group is on the Design tab, not Content. An older editor shows the same colours as Answer Color and so on, on the Style tab.

Hero Banner — button colours. Under Hero Banner → Content → Buttons, Primary button appearance edits the primary button's colours and corner radius, and Secondary button appearance edits its background, text and border colour. Unset values follow the active theme. Which primary options appear depends on the layout: a text-link button shows only text colour, and a few layouts show colour and corner radius without text colour.

Not seeing it? Primary button appearance is hidden when the hero is an absorbed variant of another section and when the layout is the offer strip with a text link, which uses a fixed colour. Secondary button appearance appears only after you type Secondary button text. Both are on the Content tab under Buttons.

View all and button links. A View all link whose address is unsafe (starting with javascript:, vbscript: or data:) is not used on the storefront; the section falls back to its default safe destination instead. If a link goes somewhere you did not type, check it for one of those prefixes.

Decorative shapes

Every section's Design tab has a Decorative shapes group — it's a shared group every section has, not a per-section add-on. Click + Add Shape and a row appears with a Shape picker (Circle, Blob, Square, Ring, Triangle, Dots), a Position picker (top-left, top-right, bottom-left, bottom-right, center-left, center-right), a Color field, a Size (px) field, and an Opacity field (0–1). Add as many shapes as you want; each gets its own remove button.

Typography enum axes — for Hero Banner, Hero Split, Hero Video, and Featured Product in the current Store Editor, use Rich heading and subheading typography in the current Store Editor above. Other section panels whose Design tab has a Heading typography, Subheading Typography, or Description Typography accordion (next to that accordion's existing Color, font weight, and font size fields), four more controls now sit inside it: a Text align button row (Left/Center/Right/Justify), a Style toggle (Normal/Italic), a Decoration toggle (None/Underline/Strikethrough), and — heading, subheading, and description accordions all get it — a Text transform dropdown (Default/None/Uppercase/Lowercase/Capitalize). None of these accordions write anything on their own just by being open; an existing section keeps rendering unchanged until you actually change one of these fields. Sections with at least one of these accordions: Hero Product Showcase, Hero Countdown, Flash Sale, Founder Story, Shop by Category, Mega Category Grid, Why Choose Us, Pricing, Customer Reviews, and FAQ — not every listed section has all three accordions (Hero Countdown, for example, has Heading and Subheading Typography but not Description Typography).

Why Choose Us and Pricing each also got a narrower, standalone Heading Style control — just a Decoration toggle (None/Underline/Strikethrough) for the section's own heading text, on top of whatever the Heading Typography accordion above already sets. On Why Choose Us and Pricing it's the Design tab's Heading typography group. Neither section's renderer reads anything else off this field yet — only Decoration has a visible effect here, and it's a separate field from the Heading Typography accordion's own Decoration toggle, so setting one doesn't change the other.

Theme presets

Themes aren't applied from inside the section library itself — your page's colours, typography, and spacing come from your store's active theme pack, set once in the Theme Hub and inherited by every section on every page. Click the Brand icon on the Landing Page Editor's left rail to open the Styles panel in a drawer on the right; it shows which pack is currently active and links straight to the Theme Hub to change it. Any colour tweak you make in the Styles panel applies only on top of that pack, only for this page.

If you want a look the Theme Hub's ready-made packs don't cover, the Styles panel also lets you create your own custom theme: pick one of five base families (Surface Depth, Anti-Aesthetic, Retro Futurist, Atmospheric, Editorial Craft), then set your own primary/secondary/surface colours, a typography pairing, and a spacing rhythm (Compact, Balanced, Spacious, or Airy).

For typography, the Styles panel's Typography section has two tabs: Google Fonts, where you search and pick a Body Font and a Heading Font from a large searchable catalogue, and Custom Font, where you can upload your own .woff2 font file (up to 5MB) and give it a family name — it's then served from your store's CDN and available anywhere a font can be chosen.

Beyond that page-wide pair, any individual section has its own Font family picker. In the v3 Store Editor, select the section, open Design, and expand Typography scale. Pick a font from the picker to override the theme font for that one section. Leave it empty and the section keeps using your page's Body/Heading fonts above. To remove an override you set, choose Default (inherit) in the picker: it removes the saved value entirely rather than saving an empty one, so the section falls back to the theme font cleanly. In the legacy editor the same picker sits under the section's Style tab as Font Family (this section).

Theme Customization

Further down the Styles panel, between Border Radius and Additional CSS, the Theme Customization group lets you fine-tune typography, spacing, motion, and individual sections' colours for this one page only. Every field starts blank — blank means "inherit whatever your store theme already sets" — so adding this group to an existing page changes nothing until you actually pick a value.

Brand Kit

At the top of the Styles panel's Colors section, a Use Brand Kit switch links this specific page's colours and fonts to your store's actual branding, instead of leaving you to copy them by hand. It's an opt-in — turning it on doesn't touch any other page, and every page you haven't opted in keeps rendering exactly as it does today.

Turning Use Brand Kit on for the first time on any page also turns on a store-wide setting behind the scenes, so once you've linked one page, later changes to your brand colours or fonts in Store Branding take effect on every page that has the switch on, without reopening each one. Turning the switch off on a single page only unlinks that page — it doesn't undo the store-wide setting, since another page may still depend on it.

While Brand Kit is on for a page, its Primary Color, Secondary Color, and Accent Color fields below the switch go disabled — you're now looking at values controlled elsewhere, not ones you can hand-edit here. Turn the switch back off if you want to set a one-off colour just for this page again. The Body Font and Heading Font pickers, by contrast, are never disabled: if you pick a font here that's different from this page's own previous default, that specific choice keeps winning over Brand Kit's font, even while the switch stays on — the same "your explicit choice on this page wins" rule that already protects a colour you'd customized before ever turning the switch on.

Next steps