Sections

This page explains how to work with sections and blocks in the theme editor, then describes every section you can add to a page: what it is for, what it needs and how it behaves. The full list of settings for each section is in the section reference.

Add, reorder, hide and remove sections

1. Go to Online Store > Themes > Customize.
2. Use the template picker at the top of the editor to open the kind of page you want to change.
3. In the sidebar, select Add section where the section should go, then choose it from the list.
4. To move a section, drag it up or down in the sidebar.
5. To hide a section without losing its content, select the eye icon next to its name.
6. To delete it, select the section, then Remove section at the bottom of its settings.

A section belongs to a template, so it shows on every page that uses that template. The main section of a page, such as Product information on the product page, can be configured but not removed. Sections in the header and the footer are covered in Header and footer.

Blocks and theme blocks

Most sections hold blocks. Select Add block under a section to add one, drag blocks to reorder them, and use the eye icon or Remove block to hide or delete one.

Sections use blocks in one of two ways:

• Their own block. A Slideshow holds Slide blocks, a Logo list holds Logo blocks, and so on. These sections have a maximum number of blocks, given in each entry below.
• Theme blocks. These are reusable pieces that work in several sections: Heading, Text, Button, Chip, Image, Video, Icon with text, Product card, Collection card, Menu, Email signup, Divider, Spacer, Group and Custom Liquid. Their settings are in the block reference.

The sections that accept any theme block, and app blocks, are Image banner, Video hero, Countdown, Image with text, Rich text, Before and after, Map and Featured product, as well as Product information on the product page and Blog post on the blog post page. Some other sections take a Custom Liquid block beside their own blocks, for an app snippet or your own code: the Header, the Footer, Newsletter, the Product grid on collection pages and the Cart section on the cart page.

A few things to know about theme blocks:

• A Group block holds other blocks in a row or a column. Use it to put two buttons side by side.
• A Button with no link shows as inactive until you set its Link.
• In a Heading, Size changes how large the text looks. Level only tells search engines and screen readers how the page is organized.
• Words that you set in italics in a heading take the accent font from theme settings.
• A new Video block starts with Shopify's sample YouTube video, so you can see it play. Replace it with your own.

Color scheme and spacing

Almost every section has the same two settings at the end of its list.

Color scheme picks one of the schemes you define in Theme settings > Colors. It sets the section's background, text, buttons and cards together. See Theme settings. Countdown and Newsletter also have a Card color scheme for the card inside the section.

Section spacing sets the space above and below the section:

• Regular uses Space between sections on desktop from Theme settings > Layout. The space shrinks on smaller screens.
• Compact uses half of that.
• None removes the space, for sections that should touch.

When two sections in a row use the same color scheme, the second one drops its top space, so the gap between them is not doubled. Sections with different schemes keep both spaces, which makes each one read as its own band of color. If a gap looks too large or too small, compare the two color schemes.

Hero and banners

Slideshow

A large frame of up to 8 slides for the top of a page. Each Slide block has an image, an optional Mobile image for screens under 750 px, a chip, a heading, text and one button; Open link in new tab opens the button's link in a new tab. With more than one slide, progress bars at the top of the frame let customers jump to a slide. Auto-rotate slides adds a pause button; rotation also pauses while a customer points at the slideshow, and it never runs in the theme editor or for customers who prefer reduced motion. Keep the slideshow first or second on the page: only there does its first slide load ahead of the page's other images. The text is white on a darkened photo, so this section has no color scheme. If text is hard to read, raise Image overlay strength in Theme settings > Shape and surfaces. All Slideshow settings.

Image banner

One photo with content on top. It needs an Image, and takes an optional Mobile image, which is cropped around its own focal point, as on a slide. The content is made of theme blocks; a new banner starts with a chip, a heading, text and a button. Content position puts it at the start or in the center. On a photo, use the Glass chip style and the Light button style so they stay readable. As the first section of a page, the banner can sit under a transparent header. All Image banner settings.

Video hero

A frame with a cover image and a play button. Use a Video uploaded to Shopify, or a Video URL from YouTube or Vimeo. Nothing loads from those services until the customer presses play. An uploaded video supplies its own cover; with a YouTube or Vimeo link, add a Cover image, because the theme does not fetch one. Play uploaded video in the background plays the video muted on a loop with a pause button instead of a play button. It works for uploaded videos only. Content is made of theme blocks. A new Video hero starts with Shopify's sample YouTube video in Video URL; replace it with your own. All Video hero settings.

Countdown

A card that counts down to a date you set, with theme blocks for the message beside the clock. Enter End date as YYYY-MM-DD and End time as HH:MM in 24-hour format; both use your store's time zone. The date also shows as text under your message. When the time is reached, When the time is up either hides the section or replaces the clock with your End message. A hidden countdown stays visible in the theme editor so you can still edit it. Without a date, the clock shows dashes. All Countdown settings.

Products and collections

Product cards in these sections follow Theme settings > Product cards and Theme settings > Badges. See Product page for cards and quick add.

Featured collection

The first 2 to 12 products of one Collection, in a Carousel or a Grid. Products show in the collection's own sort order, so change that order in the Shopify admin to change which ones come first. Show link to the collection adds a "View all" link beside the heading. Until you choose a collection, the section shows placeholder cards. All Featured collection settings.

Featured product

One Product with its media gallery and the same blocks as the product page (title, price, variant picker, buy buttons and others), so customers can buy it from any page. Choosing a variant updates the section without leaving the page. Show link to product page adds a link to the full page. The Title block starts with Heading level set to Heading 2; keep it, because the page already has a main heading. The blocks are described in Product page. All Featured product settings.

Product tabs

A heading with up to 6 tabs, each showing products from one collection. Each Tab block needs a Collection; Tab label replaces the collection's title. Products per tab goes from 2 to 8. Every tab loads its products with the page, so a page stays lighter with fewer tabs and products. All Product tabs settings.

Collection list

Up to 12 collections that you choose, one per Collection block. Layout offers Tiles, a grid of photos with the collection name and product count, and Rings, one row of round photos that customers scroll sideways. Rings show only the heading: Text, Link label, Columns on desktop and Show product counts apply to tiles. A block's Image replaces the collection's image. Without one, the theme uses the collection's image, or the photo of its first product. All Collection list settings.

Promotion grid

Up to 8 photo tiles that link to collections, pages or offers. Each Tile block has an image, a chip, a heading, a link label and a Link; the whole tile is the link. Pattern arranges them: Large tile at start is designed for four tiles, Large tile at end for three, and Even grid for any number. Extra tiles continue in rows below. All Promotion grid settings.

Shoppable image

A photo with up to 8 plus buttons, each opening a small card for one product. The same products are listed beside the photo, so customers do not have to find the buttons. Each Hotspot block needs a Product, a Horizontal position and a Vertical position; 0 % is the start edge or the top of the image and 100 % is the end edge or the bottom. Select a hotspot block in the editor to open its card while you place it. A hotspot in the lower part of the image opens its card upward. All Shoppable image settings.

Recently viewed

The products a customer opened most recently, 2 to 8 of them. The list is kept in the customer's own browser and nothing is sent to an app. The section stays hidden until there is at least one product to show, and it leaves out the product being viewed. The theme records nothing for customers who decline preferences in your cookie banner. The theme editor shows placeholder cards. All Recently viewed settings.

Product recommendations

Related products from Shopify, on product pages only. The section loads as the customer scrolls toward it and stays hidden when Shopify has nothing to recommend. You can adjust recommendations with Shopify's Search & Discovery app. All Product recommendations settings.

Collection banner

The top of a collection page, on collection pages only. It always shows the collection's title; the breadcrumbs, the description, the collection image and the product count each have a setting. Menu adds a row of links under the banner, for example to sub-collections; links to collections show that collection's photo and product count. See Collection pages and search. All Collection banner settings.

Storytelling

Image with text

A photo beside a column of theme blocks; a new section starts with a chip, a heading, text and a button. Image position puts the photo at the start or the end on desktop. On phones the photo always comes first. Image ratio crops the photo to a set shape or keeps its own proportions. All Image with text settings.

Rich text

Theme blocks on a plain background, for a statement or an introduction. It starts with a heading, text and a button, aligned to the Center or the Start. All Rich text settings.

Columns

Up to 12 cards for services, values or steps, 2 to 5 per row on desktop. Each Column block has an icon, a heading, text and a link. An Image replaces the icon. The link shows only when both Link label and Link are filled in. All Columns settings.

Scrolling story

Up to 8 numbered steps, each with an image, a label, a heading and text. On desktop the image stays in view while the steps scroll past, and it changes to match the step being read. On phones and tablets each step shows its own image above its text. The numbers follow the order of the blocks. All Scrolling story settings.

Before and after

Two images under one frame, with a handle that customers drag, or move with the arrow keys, to reveal more of one or the other. It needs a Before image and an After image with the same proportions. Handle start position sets where the handle starts, and theme blocks hold the text beside the images. All Before and after settings.

Image gallery

Up to 24 photos, each an Image block with an optional Caption. Masonry keeps each photo's proportions and Grid crops every photo to a square. Enable image zoom adds a button that opens the photo enlarged. All Image gallery settings.

Blog posts

The latest 2 to 6 posts of one Blog, as cards with the image, the first tag, the title and an excerpt. Show link to the blog adds a "View all" link beside the heading. On a blog post page, the section uses that post's blog when you leave Blog empty, and it leaves out the post being read. All Blog posts settings.

Trust and social proof

Logo list

Up to 20 logos in soft pills, under a small heading. Each Logo block takes an Image, a Name and an optional Link. The name shows as text when there is no image and describes the image for screen readers. All Logo list settings.

Testimonials

Up to 12 customer quotes as cards, 2 to 4 per row on desktop. Each Testimonial block has a Quote, an Author, a Detail, an Author photo and a Star rating. Set the rating to 0 to hide the stars. The detail and the photo show only when you enter an author; without a photo, the card shows the author's initial. All Testimonials settings.

Forms and utility

Collapsible content

Up to 20 rows that open and close, for questions and answers. Layout puts the heading beside the rows or above them, and Open first row starts with the first answer visible. All Collapsible content settings.

Newsletter

An email signup in a card, with an optional Image beside it. It holds Email signup, Text, Custom Liquid and app blocks. A customer who signs up is added to your customers in Shopify as an email subscriber, with the tag newsletter. No app is needed. All Newsletter settings.

Contact form

A form with a name, an email address, a message and, with Show phone number field on, a phone number. Only the email address is required. Customers who are signed in find their details filled in. See Other pages. All Contact form settings.

Map

An image beside a card of theme blocks for your address and hours. The image is one you upload, a photo of your store or a picture of a map; the section does not load an interactive map. Show pin adds a pin near the middle of the image. The pin cannot be moved, so crop a map image to put your location there. For directions, add a Button block and link it to your address in a maps service. All Map settings.

Custom Liquid

A place for your own Liquid or HTML, or a snippet that an app asks you to paste. The code shows inside the page width, with the section's color scheme and spacing. All Custom Liquid settings.

Apps

A section that holds app blocks. With Make section margins the same as theme on, the apps stay inside the page width; turn it off to let an app use the full width of the screen. All Apps settings.