Add and arrange storefront sections
Choose the right content block, change its settings, reorder it, duplicate it, or remove it from a page.
Add a section
- Open a page in Website Builder.
- Select Add section.
- Choose a section type.
- Enter its content and choose its layout and design settings.
- Wait for autosave, then preview the result.
Available section types
You can add a hero, hero carousel, featured products, shop by category, promotional banner, tile grid, media with text, gallery, testimonials, video, newsletter form, USP bar, ticker, FAQ accordion, collapsible content, comparison table, multi-column, image marquee, image with hotspots, before and after, product spotlight, logo strip, countdown, latest blogs, rich text, or custom code.
Some sections are built from blocks you add one at a time: slides, tiles, items, stories, rows or hotspots. Each block has its own settings under the section, and you can reorder or remove a block without touching the others. Media with text can carry extra stories, which alternate the image side down the page. Collapsible content holds rows a shopper opens as needed, such as shipping, care or sizing, and a row can show a picture. A comparison table puts two to four products, sizes or plans side by side, feature by feature, as a table or as cards. An image with hotspots is one picture with dots that open a note and a link to what is in it. A product spotlight shows one product large, with its photo, name and price from your catalogue beside your own words. A countdown counts to the moment you set and shows your message once it passes. A tile grid can be arranged as a collage, where a tile may cover two cells across or down.
A hero or hero carousel slide can also set a height, from Small to Full screen. After you add its image, click the subject in the Focal point preview so desktop and phone crops keep it in view, and add an optional Phone image composed for tall screens; phones download only that one. When the text sits on the image, Overlay darkens or lightens it behind the words and Text position moves them to the top, middle or bottom. Each control has a default that keeps the section exactly as it was. Shoppers on phones can swipe between carousel slides, and slides do not move on their own for anyone who has turned on reduced motion.
Arrange the page
Drag sections into a new order. Duplicate a section when you want the same structure with different content. Delete a section only after checking that its content is not needed; Undo can restore a recent change while the editing session is open.
To set a section apart, select it, open the Style tab and choose a Colour scheme: Soft, Tinted, Brand or Dark. A scheme changes the section's background, text, cards and buttons together, in your theme's colours, so the words stay readable. Each swatch shows the colours you will get, and a note appears if a scheme is hard to read with your current brand colours. Choose Page to return to your page's own colours. Carousels and promotional banners sit on their own photo and have no scheme. The Tinted and Contrast presets apply the Soft and Dark schemes.
Check selected content
Product, category, and blog sections depend on published records. If a selected item is later unpublished or deleted, return to the builder and choose a replacement.
Was this article helpful?