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 → Pages → [your page] → + Add Section.

What's in the library

Over a hundred section types across eight categories in + Add Section (Hero, Products, Navigation, Content, Social Proof, Conversion, Style, and Lifestyle), from hero banners to FAQ accordions.
Every section is theme-aware — it inherits your store's colours, fonts, and spacing from the Theme Hub.
Sections are searchable by name — type "countdown" or "review" and matching cards appear instantly.
Every section has a Content tab (headline, text, images, product/category data) and a Style tab (colours, layout variant).

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.

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.

Card previews are illustrative, not your real page

Every card and the larger hover preview render a hand-built mock of that section type, not a live render of your actual store's content or theme — useful for judging the general shape and layout, but not a preview of exactly how it'll look with your products, copy, and brand colours once added. Most section types share one mock regardless of which variant you pick; only a handful of families (Marquee, Hero Banner's Split layout, and Product Comparison's Comparison Carousel) currently have a distinct mock per variant, so hovering a variant chip on any other family's card may not visibly change the preview even though the variant itself does look different once added to your page.

I can't find a section I used to see in the library — where did it go?

A batch of section types no longer have their own card in + Add Section, because each one was folded into a broader section that now covers the same ground: Instagram Feed, UGC Gallery → Customer Photo Wall; Certifications, Guarantee Banner → Trust Badges; FAQ (Rich), Collapsible Content → FAQ; Collage Mosaic, Image Collage → Image Gallery; Customer Reviews, Video Testimonials → Testimonial Rich Carousel; Before / After Slider, Before & After → Comparison Carousel; Secondary Announcement Bar → Announcement Bar; Shoppable Image → Room Inspiration; Routine Builder → How It Works; and Instagram Feed (Auto-Sync), which was retired outright (its backend connection was never switched on). None of this affects a page you already built — an existing section of any of these types keeps rendering and keeps opening in its own editor, unchanged; only adding a new one from the library has moved. Each callout under the relevant category below spells out exactly which control on the new primary section reproduces the old look.

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 sections round 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.

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 Style tab — 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.
On the Style tab, Heading Color and Subheading Color pickers sit alongside the existing Highlight Color control. 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 (Style tab → Motion accordion): Hover Lift toggle (reveals a Hover Lift Amount field, in pixels, once switched on), a Parallax Intensity slider (0-100%), and a Tilt Angle slider (3°-20°) that 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.

Why does my hero video show a static image instead of playing on my phone?

That's expected, not a bug: below a 768px viewport width, and whenever a visitor's device has Reduce Motion turned on, the section never mounts the video element at all — it renders the Mobile Fallback Image (or the Poster Image if you haven't set one) instead, so the video file itself is never downloaded on a narrow screen or for a visitor who's asked their OS not to animate content. Set Mobile Fallback Image explicitly if you want a specific frame or crop there, rather than relying on the poster.

Note

Turning Muted off while Autoplay stays on doesn't guarantee the video plays with sound — most browsers still block autoplay-with-sound until the visitor interacts with the page first, regardless of this setting. Leave Muted on (the default) for autoplay to reliably work.

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.

Why don't my hero photo hotspots show up?

Two separate things have to be true: Display Layout must be set to Pinned Photo (Hotspots) (hotspots placed while a different layout is selected are saved but not shown until you switch back), and a Background Image must be set — with no photo, the hotspot area renders an empty placeholder in the editor and nothing at all on the live storefront. A pin with neither a Product ID nor a Link URL still shows on the photo but its popover only displays the Label text, with no "Shop Now" or "Learn more" link.

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.

A field you expect isn't showing up

Most of the fields above are gated to one specific Display Style variant — if Eyebrow, Image Caption, Marquee Text, Deck Layers, Numbered Items, or the Hero Split Tilt Angle slider seem to be missing, check which layout is selected first; switching to the matching variant reveals the field rather than leaving it visible-but-inert.

Separately, the full-width background-video hero (Hero Video)'s Style tab Section Background control 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 Carousel — image-only slides

Each slide in the Hero Carousel section has its own Image-only slide toggle, in a bordered box at the top of that slide's Content tab (open the slide, then Content).

Turn it on for a slide whose artwork is already finished creative — a product photo with its own baked-in badge, price, or promo text already composed into the image, the kind of hero photography a brand like Vilvah or Fendi runs — so BillionBiz's own heading, subheading, badge, and button chrome doesn't get drawn on top of it and compete with the art.

Turn on Image-only slide

Switch on Image-only slide (art is final — no text overlay). The storefront now renders that slide's Desktop/Mobile Image edge-to-edge with nothing drawn on top of it — no heading, subheading, badge, or button.

Set the Primary Button link if you want the slide clickable

Under Call To Action → Primary Button, the Link field stays fully active — it's the one field in this group that doesn't dim. Set it and the entire slide becomes a single click target leading there. Leave it blank and the slide is inert artwork with nothing to click, which is fine for a purely decorative slide.

Keep the Headline filled in

The storefront never paints the Headline text once Image-only is on, but leave it filled in anyway — it becomes the slide's accessible name (the screen-reader label for the whole-slide link, or "View slide" if left blank). Don't clear it out just because it's no longer visible on screen.

Fields dim, they don't disappear

Turning on Image-only slide visually dims (not hides) the Headline, Subheadline, Badge, Overlay Color, and Secondary Button fields — they stay fully editable and their values are preserved, just de-emphasized since the storefront no longer draws them. Switch Image-only back off and you get the exact same heading/subheading/badge back, nothing is lost in the meantime.

Why don't customers see my heading text on this slide?

That's expected once Image-only slide is on for it — the whole point of the toggle is to suppress every text/badge/CTA overlay so your finished artwork shows edge-to-edge. If you want the heading back, switch Image-only off for that slide; other slides in the same carousel are unaffected either way.

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.

Variant B — Split Layout dimensions

Switch Visual Style to Variant B and a Split Layout group appears with three fields: Image Position (Image Right default or Image Left), Column Ratio (media / content) — a preset picker: 50/50 (default), 60/40, 40/60, 70/30, or 30/70 — and Content Panel Style (Plain default, Tinted, or Frosted), which styles the panel the heading/CTA sit on top of.

Variant B — per-slide Media Aspect Ratio override

Still on Variant B, open an individual slide's Content editor and a Media Aspect Ratio (this slide) field appears — it only renders for Variant B, since it's the one style whose media sits in its own column (line up with Art Focal Point above, which is likewise gated to a single variant). It defaults to Inherit from Slide Style, which leaves this slide's ratio unset and lets the section-level Slide Style aspect ratio keep controlling it. Pick 1:1, 3:4, 4:3, or 16:9 to override just this one slide — every other slide in the carousel is unaffected. Switching back to Inherit removes the override and the slide falls back to whatever the Slide Style group is set to.

Variant D — Editorial Asymmetric controls

Switch Visual Style to Variant D and an Editorial Layout group appears instead, with four controls:

Type Overlap — Behind art (default): the headline paints behind/below the photo, a deliberate editorial restraint (the same treatment Toteme/Fendi-style hero photography uses, keeping the headline mostly over the image's clean negative space). In front of art: the headline paints above the photo, fully legible everywhere. No overlap: headline and art sit in two separate, non-overlapping columns instead of sharing space.
Art Column Width — Narrow, Normal (default), or Wide, controlling how much of the desktop layout the photo occupies (roughly 38% / 48% / 58%).
CTA Style — Text link (default for this variant) or Filled button.
Show Slide Number Rubric toggle — adds a small serif slide number (01, 02, …) in the top-left corner of the art, in the same numbered-index style used elsewhere in the editorial family.

Why don't I see the Split Layout or Editorial Layout controls?

Both groups are scoped to one Visual Style each — Split Layout only shows for Variant B, and Editorial Layout only shows for Variant D — because their fields are no-ops on the other variants. Switch Visual Style to the matching variant and the group appears with whatever values you last set.

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: 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); and Video Spotlight Carousel is a carousel of native, vertical product videos with a pinned mini product card.

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

Screen: Online Store → Pages → [your page] → + Add Section, search "bulk" for Bulk Order Table — a wholesale/bulk ordering grid with a quantity stepper and per-row subtotal, one row per product.

Pick a product source (Content tab → Products group)

Two ways to populate the table, checked in this order: Product IDs (comma-separated) — an explicit list, takes priority whenever it's non-empty — or Collection ID (fallback source) — matched against each product's category/collection, used only when Product IDs is blank. Max Rows (1–24, default 10) caps how many rows render even if the source resolves more than that.

Add quantity tier hints (optional)

Open Quantity Tier Hints and click Add Tier Hint to add a Min Qty + Label pair (e.g. "Buy 10+, save 10%"). Each row shows whichever tier's Min Qty is the highest one at or below that row's current quantity — the hint is copy only, it doesn't apply a real discount to the price shown.

Cart & display controls (Layout tab)

Add-to-Cart Button Text (default "Add to Cart") and Show running order subtotal (on by default; sums price × quantity across every row) are the only Layout-tab controls.

Why is my Bulk Order Table showing nothing but the heading?

If neither Product IDs nor Collection ID resolves any real products, the live storefront renders only the eyebrow, heading, and subheading — no table, no rows, and no visible error or empty-state message to the shopper. The editor canvas never looks this way, because it fills an unconfigured table with placeholder rows so you can see the layout while you work; that placeholder never appears to real visitors. If a table looks broken on your live page, check Product IDs and Collection ID first.

Product Comparison — per-item overrides

Every product row in the Products to Compare list (Content tab → Products to Compare group) expands in place — click the row or its chevron to open an inline edit form for that one product, without leaving the section editor:

Display Name Override — leave blank to keep showing the catalog product's real name.
Price Override — leave blank to keep showing the catalog price.
Image Override — replaces just this row's photo; leave blank to keep the catalog image.
One text field per row you've added under Comparison Attributes (e.g. "Battery," "Waterproof") — this is where you type this specific product's value for that spec row ("10h," "IPX4," and so on). These per-product value fields only appear once you've added at least one attribute label in the Comparison Attributes group below.

Add the attribute label first

Comparison Attributes only defines the row LABELS ("Battery," "Waterproof"). The actual VALUES for each product live on that product's own expanded row above — if a spec column looks empty for one product, expand that product's row and fill in the value there, not in Comparison Attributes.

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 → Style tab → Layout & Style accordion → Default Card Appearance.

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.

Per-product Card Styling wins over this default

Back on the Content tab, each product you've added under the section's product picker has its own optional Card Styling (Optional) group — the same Shape/Shadow/Background/Border fields, set per product. Any field a merchant fills in there overrides this section-level Default Card Appearance for that one product's card; leaving a product's Card Styling blank falls back to whatever's set here. If a product's card looks different from the rest of the grid, check that product's own Card Styling group first before assuming the section-level default is broken.

This is separate from the Universal Card sold-progress bar

Default Card Appearance only affects Flash Sale's own classic card rendering. If you've opted this section into the newer shared card design, see Universal Card (preview) on six sections below — the sold-progress bar behaves the same either way, but the shape/shadow/border fields described here don't apply once Universal Card is switched on for the section.

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).

Pill Anchor Nav — in-page jump links

Screen: Online Store → Pages → [your page] → + Add Section, 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).

Add links (Content tab → Links group)

Click Add link for each jump target. Every link needs a Pill Label (the text on the pill) and a Target Section Anchor ID — the anchor id of the section you want it to scroll to. Getting the id right matters: the field's own helper text warns that a mistyped id makes the pill a silent no-op, not a broken link — clicking it simply does nothing rather than showing an error.

Set alignment and behavior (Layout tab → Display group)

Alignment (Left/Center/Right, default Center); Highlight the pill for the section in view (on by default) highlights whichever linked section is currently nearest the top of the viewport as the visitor scrolls; Stick to top of viewport on scroll (off by default) pins the nav bar in place — once it's on, a Sticky Offset (px) field appears so the pinned bar can sit below a fixed header instead of overlapping it.

Why don't my anchor pills scroll anywhere?

A pill only works if its Target Section Anchor ID exactly matches the id of a section actually on the page — there's no lookup or validation in the editor, so a typo just makes the click a no-op. With zero links added, the section shows a placeholder in the editor ("No links added yet.") but renders nothing at all on the live storefront — it doesn't appear as an empty bar.

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.

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.

Customer Reviews and Video Testimonials are now looks of Testimonial Rich Carousel

Both have been retired from + Add Section and folded into Testimonial Rich Carousel. If a page you built before has a Customer Reviews or Video Testimonials section, it's untouched — it still renders and still opens in its own editor exactly as before; you just can't add a new one from the library. For a new page, add Testimonial Rich Carousel instead:

For the old Customer Reviews card look, set its Card Style (Content tab) to Standard Clean, Bubble, Minimal Quotes, Product Focused, or Magazine Editorial — these five values were ported directly from Customer Reviews' own variant picker.
For the old Video Testimonials tap-to-play video grid, set Layout to Video Grid.

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.

Side-by-side heading (optional, works with any Layout)

Turn on Side-by-side heading (heading in a left column, content to the right) to move the section's heading into its own left-hand column, with the testimonials to the right, instead of sitting above them. This switch is independent of the Layout dropdown — it's available whether Layout is set to Carousel, Grid, or any of the five premium archetypes (Numbered Index, Editorial Overlap, Kinetic Marquee, Full Bleed Collage, Stacked Deck). Leave it off for the default stacked heading (heading above the testimonials, every existing store's current look).

Carousel layout group (only when Layout = Carousel)

With Layout set to Carousel (the default), a Carousel layout group appears below Autoplay / Pause on Hover / Auto-advance interval with four controls:

Card display — Whole cards (default) shows each testimonial card in full; Peek (partial cards at the edges) lets the neighbouring cards bleed in from both edges, hinting there's more to scroll through.
Peek amount — only shown once Card display is set to Peek. Choose Small, Medium (default), or Large for how much of the neighbouring cards shows at each edge.
Show arrows — on by default; toggles the left/right navigation arrows.
Show dots — on by default; toggles the pagination dots below the carousel.

Why don't I see the Peek amount / Card display controls?

The Carousel layout group (Card display, Peek amount, Show arrows, Show dots) only renders when Layout is set to Carousel — it's hidden, not just disabled, for Grid and the five premium archetype layouts (Numbered Index, Editorial Overlap, Kinetic Marquee, Full Bleed Collage, Stacked Deck), since peek/arrows/dots have no meaning for those non-carousel layouts. Switch Layout back to Carousel to bring the group back with whatever values you last set.

Instagram Feed and UGC Gallery — retired from + Add Section, still fully editable

Both have been folded into Customer Photo Wall for new sections (see the callout below), but if your page already has an Instagram Feed or UGC Gallery section, none of that changes for it — it keeps rendering, and the field-level controls described in this subsection and the next still apply whenever you open that existing section to edit it.

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 & Instagram Feed — Card Appearance

Both sections now have a Card Appearance accordion on the Style tab — 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.

Instagram Feed — Border is an on/off switch, not the full control set

On Instagram Feed, Card Appearance's Background and Hover controls render exactly as set. Border shows only a Show border toggle with helper text underneath, instead of the width/color/radius fields Press Mentions and other sections get — turning it on renders a border, but its actual width, color, and radius still come from Instagram Feed's own pre-existing Tile Style / Image Corner Radius controls (Content tab), not from anything in Card Appearance. There's no Shadow control in this accordion at all on Instagram Feed — tile shadow is driven solely by the existing Image Shadow toggle (Content tab). To change how your Instagram tiles' border or shadow actually look, use those Content-tab fields; the Card Appearance accordion here only controls background, whether a border shows, and hover.

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 (Style tab) has an Image aspect ratio field under its Review Card group, alongside Star color, Layout variant, and the rest of the shared card controls. 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.

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.

Certifications and Guarantee Banner are now looks of Trust Badges

Both have been retired from + Add Section and folded into Trust Badges above. If a page you built before has a Certifications or Guarantee Banner section, it's untouched. For a new page, add Trust Badges instead and set its Display Style (Content tab) to Ticker (Scrolling) for the old Certifications look, or Guarantee (Single Featured Badge) for the old Guarantee Banner look.

Instagram Feed and UGC Gallery are now looks of Customer Photo Wall

Both have been retired from + Add Section and folded into Customer Photo Wall above. If a page you built before has an Instagram Feed or UGC Gallery section, it's untouched — see the tip earlier in this section for its own field docs. For a new page, add Customer Photo Wall instead and set its Source (Content tab) to Instagram Account for the old Instagram Feed behaviour, or Hashtag for the old UGC Gallery behaviour; Customer Photo Wall's own Layout picker (Grid, Masonry, Filmstrip, Editorial, Spotlight) then controls the tile arrangement.

Logo Marquee and Image Marquee are now looks of Marquee / Ticker

+ Add Section shows one Marquee / Ticker card for this family, not three separate cards. Click it and it adds the plain ticker look, same as before. To get the logo-strip or image-strip look instead, look for the small variant chips under the card — Logo Scroll and Image Scroll — and click one of those; each inserts a Marquee section already set to that look, so you don't have to switch it by hand afterward. Searching "logo marquee" or "image marquee" still finds this card (with the matching chip called out), so nothing you used to search for stopped working. Any page that already has a Logo Marquee or Image Marquee section from before keeps rendering exactly as it did — this only changes how you add a NEW one.

Instagram Feed (Auto-Sync) — retired from + Add Section

A second Instagram section type, Instagram Feed (Auto-Sync), layered grid/masonry/filmstrip layouts and a lightbox on top of the plain Instagram Feed above, but its storefront side was never switched on — it rendered nothing for real visitors, since the Instagram API connection it needed was never wired up on the backend. It's been retired from + Add Section for that reason (no store had one in use). Use the plain Instagram Feed look inside Customer Photo Wall — see the callout above — if you want something visitors can actually see today.

Marquee — Text Ticker, Logo bar & Image strip looks

Screen: Online Store → Pages → [your page] → + Add Section, 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).

Items (Content tab → Items group)

Add, reorder, and remove the strip's items here regardless of style. Each item is either Text or Image — switch between the two with the toggle in the item's expanded row. Image items get their own Size (Small/Medium/Large/Custom, with a Custom Height (px) field when set to Custom) and Shadow (None/Subtle/Medium/Strong) controls, plus an optional Link. At least one item is required — the list won't let you remove the last one.

Marquee Style (Content tab → Marquee Style group)

The Style dropdown picks the look:

Text Ticker — the original continuously-scrolling text/logo strip (the default when the field has never been set).
Logo bar — the former Logo Marquee look, with logo-specific controls (below).
Image strip — the former Image Marquee look, with image-strip-specific controls (below).

Switching Style on an existing section only changes which of the two style-specific control groups below appears and which renderer draws the strip — your Items list is not touched.

Logo bar controls (Style = Logo bar)

Logo Height (px) — 16 to 160, defaults to 40.
Greyscale Logos (colour on hover) — off by default; when on, logos render in greyscale and regain full colour on hover.
Frosted Glass Background — off by default; applies a blur behind the strip.
Edge Fade — on by default; fades the strip's left/right edges instead of a hard cut.
Edge Fade Width (%) — 0 to 40, defaults to 10; only meaningful while Edge Fade is on.
Heading — an optional label shown above the strip (shared with Image strip; hidden entirely when Style is Text Ticker).

Image strip controls (Style = Image strip)

Image Height (px) — 40 to 400, defaults to 120.
Show Captions — off by default; shows each image's caption underneath it when the item has one.
Duplicate Images for Seamless Loop — on by default; renders the item list twice back-to-back so the scroll never shows a visible seam. Turn it off only if you have enough items that the loop already looks continuous.
Section Padding — None/Small/Medium/Large, defaults to Small.
Reduced-Motion Fallback — Show as a static grid (default) or Hide the section. See the troubleshooting note below for what each does.
Heading — same shared field as Logo bar, above.

Settings (Content tab → Settings group, applies to all three styles)

Marquee Height (px) (container height; preset image sizes scale relative to it), Text Size (px) (font size for text items), Gap Between Items (px), Direction (Left/Right), Speed (seconds), Pause on Hover, Edge Fade Effect (the Text Ticker's own edge-fade toggle — a separate field from Logo bar's Edge Fade above, since the two styles render through different code paths), and Separator Between Items (None/Dot/Pipe/Star/Dash — visible on Text Ticker items).

Colors (Content tab → Colors group)

Background Color (defaults to black) and Text Color (defaults to white) — shared across all three styles.

Why don't I see Logo Marquee in the library anymore?

It's not missing — add a Marquee section instead and set Marquee Style to Logo bar (Content tab → Marquee Style group) to get the same scrolling logo strip, with the same Logo Height, Greyscale, Frosted Glass, and Edge Fade controls described below. Any page that already had a Logo Marquee or Image Marquee section keeps rendering and working exactly as before — those existing sections just open in the Marquee editor now instead of a dedicated one, with their items, colors, and settings carried over unchanged.

Empty logo bar / reduced-motion behavior

A Logo bar section with no logo items shows a dashed placeholder ("Add logos to display marquee") while you're editing, and renders nothing at all for storefront visitors until you add at least one logo. For Image strip, if a visitor's device has Reduce Motion turned on, the strip never animates: with Reduced-Motion Fallback set to Show as a static grid (the default) it lays the images out in a static wrapped grid instead of scrolling them; set to Hide the section, it renders nothing at all for that visitor.

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 Heading Style — only Color actually changes the page

Of the Heading Style group's controls, the FAQ section currently only applies the Color swatch to the rendered heading. Font Weight, Size, and alignment are shown and save correctly, but the FAQ renderer doesn't read them yet — changing them won't visibly change anything on your storefront.

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.

FAQ (Rich) and Collapsible Content are no longer their own cards

Both have been folded into the plain FAQ section above. If a page you built before has a FAQ (Rich) or Collapsible Content section, it's untouched — it still renders and still opens in its own editor exactly as before; you just can't add a new one from the library. For a new page, add FAQ instead: its Layout dropdown (Content tab) now includes Two Column and Split, which reproduce FAQ (Rich)'s categorized, richer look; the default Accordion layout covers the same general expand/collapse behaviour Collapsible Content provided, though there's no dedicated "Collapsible Content" preset inside FAQ yet.

Collage Mosaic and Image Collage are now looks of Image Gallery

+ Add Section shows one Image Gallery card for this family, not three separate cards. Click it to add the plain lightbox gallery, or use the Collage Mosaic / Image Collage variant chips under the card to insert an Image Gallery section already set to that asymmetric layout — the same pattern as Marquee / Ticker's Logo Scroll and Image Scroll chips described under Social-proof sections below. Any page that already has a Collage Mosaic or Image Collage section from before keeps rendering exactly as it did; this only changes how you add a new one.

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 → Pages → [your page] → + Add Section, 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.

Blank divider looks invisible in the editor too — that's intentional

With Divider Style set to Blank, the editor shows a small "Spacer — px" label so you can still find and select it while building the page — that label is editor-only and never appears on the live storefront, where a blank divider is genuinely invisible, just the spacing.

Story Mode — chapters, motion, and pinned scroll

Screen: Online Store → Pages → [your page] → + Add Section, 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.

Add chapters (Content tab → Chapters group)

Click Add Chapter for each beat of the story. Every chapter has its own Heading, Body, Image, per-chapter Layout (Image Left, Image Right, Image Above, or Text Only), and an optional CTA Label + CTA URL pair — the CTA link only renders on the storefront once BOTH fields are filled in; filling in only one leaves both saved but neither shown.

Choose Presentation (Layout tab → Narrative Settings group)

Presentation picks how chapters play out: Stacked (default) shows each chapter as its own full block, one after another down the page, same as scrolling through any other section. Pinned Scroll (scrollytelling) pins the chapter's image in place while its text scrolls past — the image only advances to the next chapter's image once the visitor scrolls past that chapter's text. Pinning only activates at 768px viewport width and above; on narrower screens, Pinned Scroll falls back to the same normal, non-sticky flow as Stacked.

Set typography, motion, and spacing (Layout tab → Narrative Settings group)

Heading Style — Display (serif), Serif, or Sans-serif. Motion — None, Reveal Fade Up (default), Reveal Slide Left, or Reveal Stagger — controls how each chapter animates into view as the visitor scrolls to it. Section Padding — None, Small, Medium, or Large (default). Image corner radius — Default (theme), None (square), Small, Medium, Large, Extra large, or Pill.

Progress and snap toggles (Layout tab → Narrative Settings group)

Show Progress Indicator (on by default) shows a row of progress dots once you have more than one chapter — it's hidden automatically with zero or one chapter, since there's nothing to indicate progress through. Snap on Scroll makes the page scroll snap to each chapter boundary instead of scrolling freely.

Snap on Scroll shows OFF on a brand-new section, even though it snaps until you touch it

A Story Mode section you've never opened the Layout tab on behaves as if Snap on Scroll is ON — that's the section's real saved default. But the moment you open the editor, the Snap on Scroll switch itself displays OFF. Flipping it and flipping it back doesn't restore the original unset state — it explicitly saves false. If you want scroll-snapping and the switch looks off, turn it on and save; don't assume the displayed state matches what's live until you've saved at least once.

Pinned Scroll and reduced motion

Whenever a visitor's device has Reduce Motion turned on at the OS level, or Motion is set to None, Pinned Scroll never activates its sticky/pinned behavior — it renders as a static, normally-flowing layout instead (each chapter's image sits directly above its text, no scroll-tracking). The same reduced-motion check also strips the Motion setting's reveal animation in Stacked presentation, so a visitor with Reduce Motion sees every chapter appear instantly rather than fading or sliding in.

Chapters not showing up

With zero chapters added, Story Mode renders an empty section — no error, no placeholder text, just blank space where the chapters would be. Add at least one chapter for anything to appear.

Blog Preview — Card Appearance (Grid & List layouts only)

Screen: Blog Preview section → Style tab → Card Appearance accordion.

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.

Card Appearance has no effect on the Carousel layout

This accordion only applies when the section's Display Style is Grid or List. Switch Display Style to Carousel and the accordion shows an explanatory note instead of the style controls ("Card Appearance applies only to the Grid and List display styles and does not affect the Carousel layout") — the Carousel layout's post cards render through a different, plainer markup path that doesn't read these fields at all. If you've set a background color or border here and it isn't showing up, check the section's Display Style first.

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.

Add announcement items

Click + Add in the Multi-Announcement Rotation group's item list. Each item gets its own Message, an optional Icon (emoji, shown to the left of the text), a Link (external URL, or a product/collection picked from your catalogue), and its own Background Color Override / Text Color Override — set these to make one announcement stand out from the bar's default colors (set below, in Bar Style).

Choose how they rotate

The Transition dropdown and Rotation Interval (ms) field only appear once you have two or more items in the list. Choose Static (no auto-rotate) to just show the first item with no timer, or Fade / Slide / Slide to auto-advance through every item on the interval you set (500–30,000ms, default 4000ms). Advancing wraps back to the first item after the last one, and the customer-facing bar also shows a row of pagination dots they can click to jump to any item directly.

The single-message field isn't gone — it's the fallback

Leaving the rotation list empty doesn't remove the bar — it keeps rendering the classic single-message field (Announcement Message, Call to Action link) exactly as before. The bar only switches to the rotating carousel once the list has one or more items in it, and it only activates the actual auto-rotate timer once there are two or more — a single rotation item shows that one message with no transition and no pagination dots, same as leaving the list empty. This is also why adding rotation items never breaks an existing bar: it's an additive, opt-in field.

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.in) — 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.

Before / After Slider and Before & After are now looks of Comparison Carousel

Both have been folded into Comparison Carousel (see Product Comparison — per-item overrides above, under Product sections). If a page you built before has a Before / After Slider or Before & After section, it's untouched — it still renders and still opens in its own editor exactly as before; you just can't add a new one from the library. For a new page, add Comparison Carousel instead and set its Layout tab Toggle Style to Slider Handle — combined with the Slider Behavior accordion's Show Divider Handle and Initial Position controls, that reproduces the draggable-divider comparison both older sections provided.

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.

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 → Pages → [your page] → + Add Section, search "gift card" for Gift Card Band — a promotional strip for selling gift cards, with a row of denomination pills and a CTA.

Set the copy (Content tab)

Eyebrow, Heading (defaults to "Give the Gift of Choice" if left blank), and Subheading.

Configure denominations (Content tab → Denominations group)

Each denomination has an Amount, an optional Label (optional override) to show custom copy instead of the formatted price, and a Mark as popular toggle that gives that one pill an accent border and background — purely visual, it doesn't change what the pill does. A new section starts with four denominations (500 / 1,000 / 2,000 marked popular / 5,000, in your store's currency formatting); add or remove pills with Add Denomination and the ✕ on each card.

Set the CTA (Content tab → Call to Action group)

CTA Text (defaults to "Buy a Gift Card") and CTA Target — a link picker that accepts a product, a collection, or an external URL.

Background & layout (Layout tab)

Layout: Split (default — text on one side, denominations on the other) or Centered. Background Image URL is optional; once set, a Scrim Opacity slider (0–100%, default 45%) appears to darken the photo behind the text for readability.

Empty denominations list

Remove every denomination and the pill row simply disappears — heading, subheading, and CTA still render, just with a gap where the pills would be. There's no placeholder or empty-state message, so an accidentally-emptied list can look like a half-finished section rather than an error.

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.

Secondary Announcement Bar is now part of Announcement Bar

Secondary Announcement Bar has been retired from + Add Section and folded into the plain Announcement Bar (Content & brand-story sections above). If a page you built before has a Secondary Announcement Bar section, it's untouched. For a new page, add Announcement Bar and open its Multi-Announcement Rotation group — see Announcement Bar — rotating through multiple messages above — to get the same second, rotating message strip Secondary Announcement Bar used to provide.

Promo Grid is now a look of Promo Tiles

+ Add Section shows one Promo Tiles card, not a separate Promo Grid card. Click the card to add the standard tile grid, or use the Promo Grid variant chip under it to add the tighter bento-style layout the old Promo Grid section used — searching "promo grid" still finds it. An existing Promo Grid section on a page you built before keeps rendering exactly as it did; this only changes how you add a new one.

Promo Popup — announcement only, for now

Promo Popup is a modal for sale announcements or newsletter sign-up, triggered by exit-intent, scroll depth, a time delay, or immediately on load. Use it for announcements today: if you add an email field, the visitor sees a success message on submit, but that address doesn't reach a subscriber list yet — email capture on this section isn't wired to a backend. Use Newsletter Popup above if you need working email capture in a modal.

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.

Note

An older Specs Comparison section type has been retired from + Add Section — its electronics-only spec table was folded into the general-purpose Product Comparison section (under Product sections above), which any store can use regardless of industry. If your page already has a Specs Comparison section from before, it keeps working; you just can't add a new one.

Routine Builder and Shoppable Image are no longer their own cards

Routine Builder (beauty step-by-step routine builder) and Shoppable Image (a lifestyle photo with tap-to-shop product pins) have both been retired from + Add Section — their look and functionality were folded into sections that already existed. If a page you built before has one of these sections, it's untouched: it still renders and still opens in its own editor exactly as before. For a new page:

Use How It Works (Content & brand-story sections, above) instead of Routine Builder — it now carries Routine Builder's step fields, but there's no dedicated "Routine Builder" preset inside it yet, so match the look by hand with its own Layout and card controls.
Use Room Inspiration instead of Shoppable Image — set its Display Mode to Flat Image (single shoppable image, no room tabs) to get the same single-photo, tap-to-shop-pin layout Shoppable Image used to provide, without the multi-room tabs Room Inspiration normally shows.

Recipe Cards — Card Appearance

Screen: Recipe Cards section → Style tab → Card Appearance accordion.

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.

Only takes effect when Universal Card is off

Both sections carry their own Use Universal Card toggle right below Card Style in the Content tab — a separate opt-in from the Universal Card (preview) on six sections group below, which covers a different set of sections (Best Selling Products, New Arrivals, Flash Sale, Trending Now, Shop by Category, and Category Circles). Switching Featured Collection's or Tabbed Products' own Use Universal Card on replaces the section's cards with the newer consolidated card design, and Card Style's Classic/Premium choice stops having any visible effect for as long as it stays on — Card Style only drives this section's original card markup.

Universal Card (preview) on six sections

Opt-in preview, not a new default

This is a per-section switch you turn on yourself. It is not the default look for any section — every existing Best Selling Products, New Arrivals, Flash Sale, Trending Now, Shop by Category, and Category Circles section keeps rendering its current card exactly as before until you opt it in.

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:

Turn on Use Universal Card

This is the opt-in switch. Off (the default) keeps the section's original card. On swaps every item in that section to the new card.

Pick a Card Layout

Six layouts: Image only, Image + text underneath, Image + text beside (left), **Image

text beside (right)**, Text overlaid on image, and Text-forward.

Set Show Wishlist Button

On by default. Only has an effect on the four product sections — see the category exception below.

Choose hover behaviour

Seven independent toggles: Image swap (crossfades to a second photo, only if one is set), Overlay text, Zoom, Reveal actions on hover (rather than always showing them), Colour wash, Caption slide-up, and Badge reveal on hover. Each is on or off by default per the section's own starting point, and each only does something when the underlying data supports it — a hover image-swap with no second image set simply doesn't swap.

Category cards never show cart or wishlist actions — by design

Shop by Category and Category Circles are category content, not products — they carry no price or rating. The Show Wishlist Button toggle and the add-to-cart action stay honestly hidden on these two sections' cards regardless of how you set them; a control that can't apply to category data is never shown as a dead/disabled button. What you get instead on a category card: the category image, name, and (if your category has one) an item count — plus whichever hover effects you've turned on.

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'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.

Linking buttons and CTAs

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

Text fields across the editor (headlines, body copy, and similar) have a small icon at the end of the field — click it to insert a variable instead of typing fixed text. Variables are replaced with a real value when the page renders: Store name, Support email, Today's date, Current year, a customer's First name, and a customer's Email. The editor preview shows a realistic fallback value so you can see roughly how the text will read.

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, Inherit), 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.

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.

Note

This is the first entrance-animation control any of these five sections has had — previously whatever motion they had, if any, was fixed and couldn't be turned off. Pick None to disable it.

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.

Badge Style — Square currently looks the same as unset

On the sections listed above, only Pill (fully rounded corners) and Minimal (sharp corners) currently render differently from each other — picking Square renders the same as leaving the style unset. It's a safe choice, just not visually distinct yet.

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 inside the Style tab, or the Content tab's own image group on sections whose editor didn't already have a Style tab, 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.

Some sections apply this to a card, not just the raw image

On a handful of sections — Store Events is one — this control's radius is applied to the image's own rounded container inside a card layout, rather than to a single standalone photo. If a section's images sit inside cards, expect the radius to shape that image slot specifically, not the whole card's outer corners.

Typography enum axes — on sections whose Style 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 Video, Hero Split, Hero Product Showcase, Hero Countdown, Hero Banner, Flash Sale, Founder Story, Shop by Category, Mega Category Grid, Why Choose Us, Pricing, Customer Reviews, and FAQ — not every one of the thirteen has all three accordions (Hero Countdown and Hero Banner, for example, have Heading and Subheading Typography but not Description Typography).

FAQ has a second, separate heading typography control

FAQ's own Heading Style group, described under Content & brand-story sections above, is a different, older control living in FAQ's own Content tab — it already exposed these same four axes before this update. The Style-tab Heading Typography accordion described here is a second, independent control on the same section; 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's own Style tab also has a Font Family (this section) picker under its Typography Scale group — the same searchable Google Fonts catalogue, scoped to just that one section. Leave it on its default, Inherit theme, and the section keeps using your page's Body/Heading fonts above; pick a font here and it overrides the theme for that section alone. Clearing it back to Inherit theme removes the override entirely rather than saving an empty value, so the section falls back to the theme font cleanly.

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.

Override the typography (optional)

Under Typography:

Type Pairing — a font-pairing family: Geometric, Humanist, Transitional, Slab, Monospace, or Display. Leave it on Template default to keep using your theme's fonts.
Heading Weight — 300 to 900, in the usual steps (300, 400, 500, 600, 700, 800, 900). Leave it on Default weight to inherit.
Heading Transform — None, Uppercase, or Capitalize, applied to every heading on the page. Leave it on Default transform to inherit.

Each of these three has its own reset (circular arrow) icon that appears once you've picked a value — click it to clear that one field back to blank/inherit.

Set a Spacing Rhythm (optional)

Choose Compact, Standard, or Generous to tighten or loosen the vertical spacing between every section on the page at once. Standard is the default — picking Compact or Generous reveals a reset icon next to the dropdown to put it back.

Set a Motion style (optional)

Choose Standard, Cinematic, Snappy, Bouncy, or None to change how sections and elements animate in as visitors scroll. Standard is the default — the same reset-icon pattern applies once you pick anything else.

Per-Section Styling (optional)

Below Motion, every section currently on the page gets its own row with three colour pickers — Ink (text), Bg (background), and Accent — plus a per-field reset icon and, once you've changed anything in that row, a Reset section button that clears all three at once. A section with no override here simply inherits the page's theme like normal; you only need to touch a row for the one or two sections you want to visually break out from the rest.

No per-section theme packs here

Unlike the Pages Program's config picker (used for pages like Maintenance and other standalone templates), this Per-Section Styling group does not let you assign a whole different theme pack to one section — only the three colour fields above. If you're looking for a per-section theme-pack swap, that control lives in the Pages Program picker, not here.

Why don't my Theme Customization changes show on the storefront?

Two common causes:

You haven't published. Like every other Styles panel change, these are draft-only until you publish the page — see Publishing & the preview link.
A per-section override is winning where you expected the page-wide setting to apply. Per-Section Styling always overrides the page's Typography/Spacing/Motion settings for that one section — if a section still looks unchanged after a page-wide tweak, check whether that section has its own Ink/ Bg/Accent override set and use its Reset section button if you want it to inherit again.

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.

What Brand Kit links, and what it doesn't

Brand colour and Accent colour — pulled from Store Branding → Logo & Identity → Brand Colors (see Store Branding).
Heading font and Body font — pulled from the same screen's Typography section, as a pair.
Your store's logo (and dark-mode logo, if you've set one) is not part of this switch — it already shows in your storefront's header and footer everywhere, on every page, whether or not Brand Kit is turned on anywhere.
Everything else on the page — layout, spacing, border radius, section content — is untouched.

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.

Note

This is the same switch and the same underlying setting as the guided setup's brand step — see Guided first-time setup. Whichever screen you use it from, it's one setting per page.

Tip

If you're not sure which section to reach for, search the library by what you're trying to communicate ("trust," "urgency," "story") rather than by section name — the search matches descriptions too.

Next steps

The Landing Page Editor

Add, arrange, and publish sections on your page.

The Theme Hub

Set the colours, fonts, and spacing every section inherits.

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

Finding your way around the dialog

Hero & banner sections

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

Hero Carousel — image-only slides

Hero Carousel — Visual Style variants, framing & Variant D

Product sections

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

Product Comparison — per-item overrides

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

Category & navigation sections

Pill Anchor Nav — in-page jump links

Dynamic Showcase — Card Corner Radius

Testimonial Rich Carousel — heading placement & carousel layout controls

Press Mentions & Instagram Feed — Card Appearance

Customer Reviews — Image aspect ratio (existing sections)

Marquee — Text Ticker, Logo bar & Image strip looks

Content & brand-story sections

Divider — visible styles & the invisible spacer

Story Mode — chapters, motion, and pinned scroll

Blog Preview — Card Appearance (Grid & List layouts only)

Announcement Bar — rotating through multiple messages

Conversion sections

Gift Card Band — denominations & the CTA target

Industry-specific sections: Style & Lifestyle

Recipe Cards — Card Appearance

Featured Collection & Tabbed Products — Card Style

Universal Card (preview) on six sections

Flash Sale — sold-progress bar

Linking buttons and CTAs

Dynamic text variables

Recurring controls: Eyebrow, Motion, Badge & Image Style

Theme presets

Theme Customization

Brand Kit

Next steps

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

Finding your way around the dialog

Hero & banner sections

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

Hero Carousel — image-only slides

Hero Carousel — Visual Style variants, framing & Variant D

Product sections

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

Product Comparison — per-item overrides

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

Category & navigation sections

Pill Anchor Nav — in-page jump links

Dynamic Showcase — Card Corner Radius

Social-proof sections

Testimonial Rich Carousel — heading placement & carousel layout controls

Press Mentions & Instagram Feed — Card Appearance

Customer Reviews — Image aspect ratio (existing sections)

Marquee — Text Ticker, Logo bar & Image strip looks

Content & brand-story sections

Divider — visible styles & the invisible spacer

Story Mode — chapters, motion, and pinned scroll

Blog Preview — Card Appearance (Grid & List layouts only)

Announcement Bar — rotating through multiple messages

Conversion sections

Gift Card Band — denominations & the CTA target

Industry-specific sections: Style & Lifestyle

Recipe Cards — Card Appearance

Featured Collection & Tabbed Products — Card Style

Universal Card (preview) on six sections

Flash Sale — sold-progress bar

Trending Now — what doesn't carry over yet

Linking buttons and CTAs

Dynamic text variables

Recurring controls: Eyebrow, Motion, Badge & Image Style

Theme presets

Theme Customization

Brand Kit

Next steps