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.

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.

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

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

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.

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

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.

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.

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.

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

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.

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.

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

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 → Pages → [your page] → 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 → 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).

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.

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 — 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 & 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.

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.

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' Style tab has a Card Appearance accordion with a Hover group at the bottom: a Hover effect dropdown (None, Zoom, Lift, Brighten, Glow) and, once you pick anything but None, a Transition (ms) field controlling how fast the effect plays.

This accordion 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 Card Appearance accordion shows a note that it applies only to Card Grid and doesn't affect your section's current style, and the Hover group inside it won't change anything on the storefront.

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

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 (Style tab)

Open the FAQ section's Style tab (below the shared Decorative Shapes accordion — see Decorative shapes further down this page) for three accordions that shape how each question-and-answer row looks, separate from the Content tab's Heading Style group above.

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.

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.

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.

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

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

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.

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.

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 → Pages → [your page] → 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 — 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.

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

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

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

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

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

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.

Decorative shapes

Every section's Style tab has a Decorative Shapes accordion, above any section-specific style controls — it's part of the shared Style tab every section shares, 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 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 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 it's a Style-tab accordion (Style tab → Heading Style); on Pricing the same control sits on the Content tab instead (Content tab → Heading Style, right below the heading/subheading fields). 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'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.

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