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.
Screen: Online Store → Pages → [your page] → + Add Section.
What's in the library
- 90+ section types across seven categories, 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).
Hero & banner sections
The first thing a visitor sees. Options include a multi-slide carousel, 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.
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.
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.
Social-proof sections
Trust-building blocks: a customer-reviews carousel, video testimonials, a UGC photo gallery, an Instagram feed embed, press mentions ("As Seen In" logos), influencer picks, a stats counter ("10,000 orders shipped"), certifications, and guarantee banners.
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 comparison, blog-post previews, a founder-story block, a brand timeline, and a split brand-story layout with image and text.
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.
Industry-specific sections
A set of sections built for particular product categories, including a lookbook and seasonal-edit layout for fashion, recipe cards and a meal planner for food brands, a skin quiz and shade finder for beauty, a specs-comparison and compatibility checker for electronics, and room-inspiration and shop-by-room layouts for home goods.
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.
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. The Styles panel in the Landing Page Editor 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.
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.