Sections overview

Sections are the building blocks of a page. In the theme editor, choose Add section to browse them by purpose. This guide provides the same list with a short description of when to use each section. Sections with a dedicated guide are linked.

Banners

Pictures and video across the page, with your words over them.

• Slideshow — several pictures or videos in turn, with arrows, dots or a progress line.
• Video banner — one moving picture with your message over it. Silent loop or tap to play with sound.
• Split banner — two pictures side by side with one message across them.
• Banner columns — a row of banner tiles, each with its own picture and words.
• Parallax banner — a still picture that moves with the page as the shopper scrolls.
• Flexible grid — tiles of different sizes arranged in a grid you draw yourself.
• Text orbit — a ring of words turning around a picture, with your message beside it.

Collections

• Featured collection — products from one collection in a grid or a slider.
• Collection tabs — several collections behind tabs, in one section.
• Collection list — a set of collections as tiles, each linking to its page.
• Collection spotlight — each collection fills the frame in turn as the shopper points at its name.
• Brands — every brand your products carry, listed automatically, with optional logos.

Products

• Featured product — one product with its picture, price and add-to-cart button, anywhere on the site.
• Product tabs — several sets of products behind tabs.
• Product recommendations — products related to the one being viewed. Lives on the product page.

Hotspots

Pictures with small markers the shopper taps to see a product or a note.

• Product hotspots — mark the products in a lifestyle photo.
• Bundle hotspots — mark several products and let the shopper add them together.
• Banner hotspots — mark points on a picture with a note each.

Storytelling

• Image with text — a picture beside a block of words.
• Multicolumn — a row of columns, each with a picture or icon and words.
• Key features — a short list of what matters, with a picture that changes as the shopper scrolls.
• Before and after — two pictures the shopper compares by dragging a handle.
• Text mask — a picture seen through large letters.
• Events — a list of dates with times and places.
• Store location — an address, opening hours and a map.
• Shoppable gallery — a grid of photos or short videos, each linked to the products in it.

FAQs

• FAQs — questions that open to show their answers.
• FAQs with media — the same, with a picture or video that changes with the open answer.

Sliders and marquees

• Scrolling text — a line of words that moves across the screen without stopping.
• Brand logo slider — logos in a row that slide by.

Store messages and information

• Announcement bar — a line at the top of every page for shipping news or a promotion.
• Contact form — a form that sends a message to your store email.
• Coupons — discount codes shown as cards the shopper can copy.
• Sign-up popup — a newsletter form that opens over the page.
• Age check — asks the shopper to confirm their age before entering.

Cart

The cart is two sections that share their settings: the cart drawer that slides in when something is added, and the cart page at /cart. Both are set up under Theme settings → Cart, and each has a few settings of its own.

Advanced

• Spacer — empty room between two sections, with its own height for phones and an optional thin line across it. A negative height pulls the next section up.
• Custom Liquid — for code a developer gives you. Paste it and it renders where the section sits.
• Generated blocks — an empty holder for blocks from apps or from Shopify’s own block tools, with no design of its own.

Note

Some sections only live on one kind of page and do not appear under Add section elsewhere: the 404 page, the collection banner, product details and product recommendations on the product page, the gift card page, and the password page’s content. Blog posts and recently viewed products can go on any page, though not in the header or footer.

A few names you may see in the code, such as Predictive search, Pickup availability and Cart recommendations, are not sections you add. They are parts the theme fetches on its own for the search tray, the product page and the cart, and they are set up from the sections that use them.

Blocks from apps

Apps that offer theme blocks appear in the block picker under Apps. Instant accepts them in the product section, product details, the quick shop, the collection and search pages, the cart page, articles, the footer, the password page, and inside the content groups of banners, FAQs, image with text, text orbit, multicolumn and the flexible grid. If an app block is not offered where you expected, the app has limited it to certain pages, so check the app’s own settings.