Sections are the building blocks of your store. Each page template within your theme comes preloaded with a diverse set of sections to demonstrate what can be achieved and to offer inspiration. Feel free to use them or remove them from your templates. It's entirely up to you!
These sections are comprised of blocks. Many blocks can be customized, allowing you to tailor sections to perfectly meet your store's requirements. Using your Theme Editor, you can easily add, reorder, and remove sections or blocks on your page.
In this guide, we'll walk you through each of our theme sections, offering insights as we progress on how to maximize their capabilities. Just in case you have any questions, we've included the answers to several common queries in our Section FAQs - located at the end of this document.
How to edit sections
Before we begin, let's go over the basics. Sections are easy to manipulate. In addition to customizing your sections, you have the flexibility to add, move, remove, and hide them from your page templates.
Please note, that the images and GIFs displayed below are for demonstration purposes only.
Adding a section/block
To add a new section, go to the left-side menu and scroll down until you see Add section. Clicking this text will open a list of sections to choose from.
To add a new block, when available, go to the bottom of a section and click Add [block name].
Editing a section/block
Clicking directly on a section or block will open its settings. Each section or block will have its own unique customization options.
Moving a section/block
To move a section or block, simply drag-and-drop it into a new position in its respective menu.
Removing a section/block
To remove a section or block, click the trashcan icon that appears next to its name when you hover the mouse over it.
Hiding a section
If you wish to temporarily hide a section or block from your storefront, click the eye icon to toggle its visibility.
If you wish to undo or redo any changes that you make to your sections, including content edits, use the arrows at the top of the page.
Now that you're familiar with how sections work, let's take a look at what each section can do.
The Announcement bar is an optional section that appears at the top of every page on your storefront. With its prominent position, it's an ideal space to display essential information and incentives for your customers. For example, covering announcements, sales, and promotions.
You can add multiple messages that automatically change at set intervals. Be sure to include links to quickly guide your customers to the highlighted products or offers you want to emphasize.
The Header section is a permanent fixture on your storefront. (Although, it is possible to hide it.)
This section is visible on every page of your store and can display several features, including your brand's logo or name, menu navigation, account, search bar, language and currency selectors, and shopping cart. You can change the position of your logo to be left, above, or central to your menu items.
The Footer is a permanent section that appears at the very bottom of every page on your storefront.
By adding content blocks containing your logo, text, a menu, a newsletter sign-up, or an image, your footer is a great place to put essential information such as terms and conditions, returns policies, contact information, and accepted payment methods.
The Accordion section is a space-efficient way to present a large amount of text content without overwhelming your audience. Each block displays a unique header and description, creating an accordion-style interface that users can easily open and close. This allows customers to interact with the content relevant to their needs.
Due to its compact style, it's the perfect tool for displaying frequently asked questions (FAQs) on your storefront!
This space offers an excellent opportunity for you to connect and engage with your customers. Share your brand story, articulate your company ethos, and build a rapport with your customers by encouraging comments on your posts.
Engaging readers is not only a great way for you to spread the word about your products, but it's also deeply beneficial for search engine optimization (SEO).
The Collection list section allows you to promote multiple collections directly from your homepage. Easily choose which collections you want to display by adding them to content blocks, then arrange them to your preference using the drag-and-drop technique.
You have the flexibility to choose the number of collections displayed per row which also impacts the size of the imagery and the layout.
This proves to be an effective method for upselling additional products or services that your customers may not be aware you offer.
The Collection slideshow section is a different way to display your collections meaning you can add a lot of collections without them taking up a lot of vertical space on your store.
Like Custom HTML, the Custom Liquid section can also be used to customize your theme's layout and content. Simply input your Liquid code into the content block and drag it into position to achieve your desired result.
Knowledge of Liquid code is essential. If you are unfamiliar, it may be worth reaching out to a Shopify Expert to find out if they can make your vision a reality.
The Featured collection section is designed to display products from one particular collection. This is a great tool for advertising best-sellers to maintain sales momentum and drive profits. Additional strategies for utilizing this section may include:
- Promoting new releases
- Showcasing seasonal items
- Highlighting hidden gems
- Upselling related products
To support your collection and provide more context, you can customize the section’s header and description.
Your Featured product section is designed to showcase a specific product - either on your home page or collection pages. With its prominent imagery, this section excels at shining a spotlight on new releases, best-sellers, or hidden gems. A must-have for boosting conversion!
Your Gallery is a place for you to display up to four images of your choice, onto which you can add text and links to other pages.
This highly adaptable section is an excellent platform to feature testimonials, team members, or photos of your product sources, to name a few. The possibilities are limitless!
Icons with text
An Icons with Text section is a great way to relay important and enticing information about your store and service in a distilled, compact manner.
Image with text
An Image with text section is designed to display a single feature image opposite a block of text. You decide the positioning of the image and text.
Alternatively, overlay the text directly onto the image. (If you wish to overlay text, be sure to check out the next section in this guide: Image with text overlay)
This simple yet eye-catching section is great for highlighting keywords related to your products, collections, and overall brand - with the ability to link customers to another page.
Image with text overlay
Similar to the Image with text section but with its own distinctive charm, the Image with text overlay section also showcases a feature image and text. However, this section provides greater control over layout size and positioning, resulting in a more seamless appearance for overlaying text.
With four heights to choose from, it can serve as an excellent standalone feature section or a creative solution for breaking your page up for enhanced visual appeal - all while pushing customers toward your store's offerings.
The Multi-collections section is designed to help your customer quickly switch between your featured collections products to see if they'd like to shop the collection further.
This could be used to separate men's and women's clothing, different product types such as tops, bottoms, accessories or simply just collections you'd like to promote to your customers.
The Newsletter section allows customers to submit an email address to stay informed about your latest company updates, product news, and exclusive offers.
Compact and non-intrusive, this section encourages quick sign-ups as customers browse your store. Customize the heading and description to entice submissions, for example, by offering a sign-up discount, early access to product launches, or regular promotional offers.
A Rich text section is a simple but essential addition to your storefront. Use this when you want to add an impactful piece of text or promote something.
The Slideshow section is one of the most versatile additions to any storefront. Utilizing a variety of custom slides, you can showcase a stream of essential information in a fast-paced and eye-catching manner.
We recommend displaying up-to-date content to keep your customers engaged and intrigued about what's coming up next. For example, a special deal, an exciting upcoming product launch, or a new collection. The possibilities are endless.
The Testimonials section is an invaluable tool for many stores, providing a platform to showcase real reviews, complete with star ratings. This helps build buyer confidence, credibility, and a sense of community among your customers.
Text columns with images
This highly versatile section is ideal to share imagery alongside text. Incredibly useful for breaking up content on informational pages, highlighting unique selling points, and introducing team members.
The Video section is an all-time classic way to engage your customers. Videos are essential for many stores as they provide customers with a better idea of what to expect, ultimately boosting conversion rates. Choose either a Shopify-hosted video (a file uploaded to your Shopify admin) or simply insert a link from an existing YouTube or Vimeo video.
This section serves as an ideal space for showcasing product trailers, video testimonials, staff interviews, or documentary insights into how your products are made.
The Video hero section features a muted, looping video for an engaging visual experience. Best results are achieved with a shorter video (10-30 seconds) containing striking imagery. Consider quick cuts to showcase a variety of products efficiently or a stylish slow-motion presentation for a more in-depth look at one specific product.
Take full advantage by adding some text and a link to a relevant page! This modern and stylish section adds a polished and professional touch to your storefront, making it an excellent choice for keeping your customers browsing for longer.
The Product recommendations section uses an algorithm to display products that are related to the product currently being viewed. Providing customers with insights into what others have purchased alongside the current item is an effective strategy for increasing the average order value. By adding this section to your Product template, your theme does all the hard work!
Products featured in this section display a swatch tool to browse color variants and a Quick Shop button (View options / Add to cart) to facilitate a faster journey to the checkout.
How does the recommendation algorithm work?
The algorithm that identifies recommended products is based on data about products that were purchased together and products with similar descriptions. It uses this data to provide a mix of those related products as recommendations for any given product.
In cases where purchase or product description data aren't available for a given product, products from a related collection are shown.
The algorithm uses the collection in the URL from which the request to the API endpoint originated, and pulls other products from that collection. If the product doesn't have a collection URL, then the recommendation algorithm finds collections that include the product and pulls other products from those instead (excluding collections with handles 'all' and 'frontpage').
Learn more: To find out more about displaying product recommendations, click here to read Shopify's developer help pages.
Want more control over your product recommendations?
Shopify’s Search & Discovery app will allow you to customise the products that are shown alongside your products. Any products added under the ‘Complementary products’ will be shown in the corresponding block on the product form. Any products added to ‘Related products’ will display in the ‘Recommended Products’ section
Which video formats can I upload to a Video or Video hero section?
For the video source, these sections only work with URLs from YouTube, Vimeo, and .mp4. For more information, read Shopify's help pages on Uploading and managing files.
Can I unmute my Video hero section?
No. This type of section is muted by design. To display videos with audio, please use the Video section instead.
Why isn't the overlay appearing on my section?
Depending on the section, the overlay will only be added to an image once text or buttons have been applied to the section.
Why isn't my button appearing on a section?
Depending on the section, buttons may not be display until you enter text into both the Button label and Button link fields.
How do I set up and display social media links?
Social media links are added through your Theme settings and can be displayed on your Announcement bar and Footer bottom sections.
Step 1: Within your Theme Editor, go to the left-hand menu to select Theme settings.
Step 2: Click Social media.
Step 3: Enter your social media URLs into the entry fields.
Step 4: Click on your Footer bottom section and add the Social icons block.
How do I display payment icons?
You can display your store's accepted payment options in your footer. To do this, just activate the Show payment icons checkbox in the Footer bottom section.
Please note that payment options cannot be edited through your theme. Payment options are managed through your Shopify admin:
Step 1: Within your Shopify admin, go to Settings.
Step 2: Select Payments.
Step 3: Through Shopify Payments, you can manage card providers and add other payment methods such as PayPal.
For more information, read Shopify's help pages on Setting up Shopify Payments.