Builder sections and blocks

38 articles

Sections and blocks: how do I add and reorder them, and which sections can each page have? Sections versus blocks in the storefront builder, how to add and reorder them, which sections each page offers, which sections are required, and how many of each type a page can have.
How do I set up the header, footer, and announcement bar (global sections)? Overview of the sections that usually appear on every page: header, footer, and announcement bar, plus social media icons, newsletter, and back to top. How each page keeps its own copy and how to copy one to all pages.
How do I set up my store header (logo, menu, search, cart, sticky and transparent header)? Set up the Header section: logo size and position, menu type (mega, dropdown, drawer) and the mobile navigation bar, search icon, cart drawer or dropdown, country selector with flags, sticky header on scroll, and a transparent header over a hero.
How do I add an announcement bar with rotating or scrolling messages? Add an announcement bar for promotions, free delivery, or notices: add up to 7 messages, pick Slider (one message at a time) or Ticker (a scrolling line), and set the time between messages, separator, direction, font size, width, colors, and padding.
How do I set up my store footer (about us, menu, social icons, payment icons, policy links, copyright)? Set up the Footer section and its blocks: about us with logo and contact info, footer menu, social media icons, payment icons, privacy and policy links, copyright with Powered by, text, divider, and groups to build columns.
What home page sections can I add (hero, featured products, slideshow, indicator, collections)? An overview of the home page sections in the builder: Hero banner, Slideshow, Featured products, Collections, Indicator (animated numbers), and Benefits, plus the product and collection cards, with a link to the full guide for each.
How do I set up the Hero banner on my home page? Set up the Hero banner on your home page: one or two images or videos, height (small, fullscreen, image, custom), text and buttons on top, position and alignment, color overlay for readable text, and why a hero video may not play.
How do I add a slideshow with several slides to my home page? Add a Slideshow (carousel, image slider) to your home page: add up to 7 slides with images or videos, text and buttons on each slide, Frame, Inset, or Layer mode, media height, auto-rotate speed, arrows, dots, counter, and pause button.
How do I show featured products (best sellers, newest, on sale) on my home page? Show a grid or carousel of products on your home page with the Featured products section: newest, oldest, best selling, discounted (on sale), or top rated products, limit it to one collection, set the number of products, columns, show more button, and carousel on mobile.
How do I show my collections on the home page or the collections page? Show your collections (categories) as cards with the Collections section on the home page or the all collections page: custom order, newest, best selling, top rated, or alphabetical, grid, carousel, or bento layout, collections count, and sub collection links.
How do I show sub collections on a collection page? Show the child collections (sub collections, subcategories) of the collection being viewed with the Sub collections section on the collection page: order, collections count, grid, carousel, or bento layout, cards, and why the section does not show on some collections.
How do I add benefit cards like free delivery or secure payment? Add the Benefits section to your home page: trust cards with an icon or your own image, a heading and a short text, for promises like free delivery, cash on delivery, secure payment, or easy returns. Columns, card, plain, or divider style, icon size, accent line, and hover effect.
How do I show animated numbers and stats (Indicator section)? Show key numbers like happy customers, orders delivered, or years in business with the Indicator section: numbers that count up when shoppers scroll to them, prefix and suffix (+, %, K), labels above or below, items per row, font size, bold, and dividers.
How do I add an FAQ section with questions and answers? Add an FAQ (frequently asked questions) section to your pages: questions that open when clicked, accordion or independent mode, opened by default, divider, card, or plain style, a title beside or above the questions, and FAQ data for search engines.
How do I add a before and after image slider? Add the Before and after section (image comparison slider) to your pages: pick the before image and after image, labels, side by side or top and bottom, ratio, divider position, a hint when it comes into view, follow the mouse on desktop, and a title beside or above it.
What sections are on the product and landing pages (product info, reviews, related products)? An overview of the product page and landing page sections: Product info (gallery, title, description, order form, sticky button), Landing info, the order form, Reviews, Related products, and the extra product page blocks, with links to each detailed guide.
How do I set up the Product info section on my product page (images, title, description, sticky button)? Set up the Product info section of your product page: the image and video gallery (grid or carousel, thumbnails, zoom, sticky gallery), the product title and description blocks, dividers, equal columns, and the sticky buy button or bar.
How do I set up the Landing info section and the order form (buttons, countdown, WhatsApp)? Set up the Landing info section of your landing page and the order form used on product and landing pages: inline or pop up form, the {{form}} placeholder, savings badge, countdown, gift text, order summary, add to cart and buy now buttons, and the WhatsApp order button.
How do I add collapsible tabs, delivery dates, a size guide, badges, or before and after images to my product page? Product page blocks in the builder: collapsible tabs (accordion) for shipping and returns info, an estimated delivery date timeline with cutoff time, a size guide popup chart, trust badges, and a before and after image slider.
How do I show customer reviews on my product page (Reviews section)? Set up the Reviews section on product and landing pages: the rating summary and star distribution, the Write review button and form, the review card with image zoom, grid or carousel, reviews per page, sorting, and what shows when there are no reviews.
How do I show related products on my product page? Add a Related products section to product and landing pages: choose the source (newest, best selling, discounted, top rated, same collection, or products you pick for each product), set the count, grid or carousel, columns, and the product card.
How do I change how product cards and collection cards look? Change the product card (image ratio, title, price and savings badge, star rating, buy button: add to cart, buy now, or view product, variant swatches) and the collection card (standard or overlay style, image, title, product count, button) used in product and collection grids.
What sections can I add to any page, and what's on the cart, checkout, and contact pages? An overview of the sections you can add to any page (text, image, divider, social media icons, newsletter, custom code) and the main section of the collection, search, cart, checkout, thanks, contact, policy, and 404 pages, with links to each detailed guide.
How do I customize the cart page and the checkout page? Customize the Cart section of the cart page (image ratio, image size, density, free shipping bar, empty cart) and the Checkout section of the checkout page (order form, shipping and payment choices, order summary), and learn when shoppers see each page.
How do I customize the thanks page (order confirmation) after an order? Customize the thanks page customers see after they order: the Order confirmation section, order summary, order info (order ID or number, date, payment and shipping method), customer info, your own thank-you message with {{first_name}} and other variables, buttons, and images.
How do I set up the contact page and its contact form? Set up the Contact section of your contact page: the email that receives messages, the contact form fields (name, email, subject, message), the success message, captcha against spam, button text and style, layout, and why messages may not arrive.
How do I customize the search results page? Customize the search page that shows results when shoppers search your store: the Search products section, columns, mobile columns, the product card, text above the results, how products are matched, and the show more button.
How do I customize the collection page product grid (Collection products)? Customize the collection page: the Collection products grid, columns, mobile columns, gap, the product card, a heading with {{collection_name}}, {{collection_description}} and {{products_count}}, sub collections, product order, and the show more button.
How do I change the look of my policy pages (Policy section)? Style the policy page that shows your privacy policy, terms of service, refund, shipping, and cookie policies: the Policy section, the reading time, width, colors, padding, custom CSS, and where to edit the policy text.
How do I customize my 404 (page not found) page? Customize the 404 page shoppers see when a link does not exist: the 404 section, its text, buttons, dividers and groups, the default Return to Homepage button, width, colors, and padding.
How do I add social media icons to my store (Instagram, TikTok, Facebook, WhatsApp)? Add the Social media icons section: link Facebook, Instagram, Threads, X, TikTok, Snapchat, YouTube, LinkedIn, Pinterest, Tumblr, WhatsApp, and Telegram, choose icons or app look, inline or fixed to the screen edge, shape, size, colors, and hover effect.
How do I add a newsletter signup form to my store? Add the Newsletter section to collect email subscribers: inline form or fixed corner popup, heading, success message, email input with label, placeholder and privacy phrase, arrow or text button, integrated button, groups, colors, and where signups go.
How do I use the Text, Image, and Divider sections and blocks? Settings for the Text, Image, and Divider sections and blocks: text editor, preset headings, size, line height, letter spacing, width and alignment, image width, ratio, fit, corner radius and link, divider thickness, length and alignment, colors, and padding.
Group, Text, Button, and Divider blocks: how do the layout component settings work? Overview of the Group, Text, Button, and Divider blocks used across the builder, with full Button settings: label, link type (URL, email, phone, anchor), style, and desktop and mobile width. Links to the Group and Text, image, divider guides.
How do I use Group blocks to place content side by side or in columns? How the Group block works: put blocks side by side or stacked, nest groups, direction, stack vertically on mobile, position and alignment, space between, width fill, fit or custom, gap, color scheme, border, corner radius, background overlay, and padding.
How do I add before and after images, animated waves, particles, or a back to top button? Overview of the extra sections for your pages: a before and after image comparison slider, animated wave bands, floating particles (snow, bubbles, stars), and a back to top button, with links to the full guide for each.
How do I add animated waves or floating particles (snow, bubbles, stars) to my store? Add the Animated waves and Animated particles sections: wave style, height, layers, speed, direction, flip, overlap and merge with header, and particle shape (dot, bubble, star, snow), count, size, speed, direction, opacity, and colors.
How do I add a back to top button to my store? Add the Back to top section: a round arrow button in a bottom corner that appears after scrolling and takes shoppers back to the top. Set its corner, size, scroll progress ring, and color scheme, and show it on every page.