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 the example below, the Slideshow section has been highlighted. The Slideshow contains two blocks - each representing a new slide.
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.
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.
Undoing/Redoing changes
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.
Accordion/FAQ
The Accordion/FAQ 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!
Animated text
The Animated text section enables you to craft a stylish banner with changing text, promoting multiple selling points of products or collections in one area. The animated text is sandwiched between two fixed lines of text, allowing you to play around with the narrative to benefit your store as you see fit.
Alternatively, just utilize the animated text block.
Create engaging animation by simply separating your dynamic text with commas (for example: amazing, fantastic, bestselling, jaw-dropping). Then, adjust the timing to ensure they display at the right pace.
This is a fantastic opportunity to have some fun, show off your personality, and impress your customers by adding a dash of polish to your storefront!
Announcement bar
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.
Blog posts
The Blog posts section retrieves blog posts from your Blog and highlights them on your storefront. You have the flexibility to choose the featured blog and determine the number of posts displayed (between 1-4).
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).
Collage builder
The Collage builder section offers a unique and modern way to showcase a variety of elements in one space. You have the creative freedom to build a digital collage containing up to six features.
Utilize this section as a fresh approach to highlight products, collections, countdown timers, promotions, events, videos, images, rich text, or custom HTML. Let your creativity flow!
Collection list
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.
Contact form
A customizable Contact form section can be added to any page to capture inquiries. This can be used for various purposes, such as enabling customers to ask general questions, provide feedback, or follow up on orders.
Each block within the form acts as a new form field. You can name each field and order them into your preferred layout by dragging and dropping them. The field width is flexible to provide an organized and user-friendly experience, and the option to specify when a field is required ensures you receive essential information for efficient responses.
Countdown timer
The Countdown timer section enables you to feature a dynamic countdown timer, creating anticipation for launches, sales, limited product runs, and other time-sensitive events.
This section is particularly effective when combined with imagery and text to generate excitement for the upcoming event. You have full control over the text displayed during the countdown and after it reaches zero.
Custom HTML
A Custom HTML section is a versatile and powerful tool for further personalizing your theme and increasing the possibilities of your storefront’s layout and content.
Simply enter your HTML into a content block and then move the content blocks around to arrange them how you wish.
Custom Liquid
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.
Events calendar
The Events calendar section is designed to promote your upcoming events. This can be placed anywhere on your storefront and displays up to 12 events in either a grid or a list view.
Each block functions as a new calendar event that can be customized to include an image, name, date, time, location, and price, if applicable. If required, you can add a button to direct customers to a new page to find more information.
Featured collection
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. Up to six products per row can be displayed on desktop - and each can be accompanied by a Quick shop button (View options / Add to cart) to facilitate faster customer purchases.
This section is available on all templates with the exception of Collections.
Featured menu
The Featured menu section is a valuable tool for enhancing navigation within your store. In addition to your header menu, you can use this to guide customers to specific pages across your site. It's an effective way to drive traffic to collections that deserve a bit more attention!
Each block functions as a new menu item. Simply assign a link to each block and include an image for extra engagement. The image displayed in this section will change when the mouse hovers over a new menu item.
Featured product
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!
Customize it to include the product description, variants (swatches or dropdown menu), gift wrapping, quantity selector, add to cart button, and dynamic checkout button.
Footer main & Footer bottom
The Footer appears at the very bottom of every page on your storefront. It's broken into two sections: the Main footer and the Footer bottom. Both offer unique blocks.
You can enhance your Main footer by incorporating up to four content blocks - including text, a menu, a newsletter sign-up field, social media icons, a Follow on Shop app button, or an image. You can also add language and currency selectors to the bottom.
Many visitors to your store will also instinctively check this area for additional business information like terms and conditions, return policies, contact details, and accepted payment methods.
Gallery
The Gallery section allows you to exhibit up to four images of your choice, with the option to incorporate text, buttons, and links to other pages.
You have the flexibility to display your text on mouse hover, in an overlay, below the image, or choose to hide it entirely from view. Important: The Content position is set to Hide by default.
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!
Header
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.
If you have a multi-layered menu then you can create a mega menu. Mega menus are useful for showcasing additional pages, products, or collections within an organized space - as well as interactive promotional images!
Hero
The Hero section displays a large image or video, complemented by menu items that guide customers to different sections of your store. For best results, consider placing it near the top of your page to provide an impactful introduction to your storefront.
This section can be customized by overlaying a header, description, and button onto your selected image. When featuring a video, you can opt to loop playback and decide whether to mute it by default.
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.
Info columns
The Info columns section is one of the most engaging tools for displaying information on your storefront. You have the freedom to select whether you want to add rich text, text and image, or text and video columns on a block-by-block basis.
Each block can include a link and a button. Fewer columns per row will result in bigger imagery, and vice versa. With this in mind, use the size setting to be strategic about how you want to get your information across.
If you prefer not to direct your customers elsewhere, simply don't add links or buttons to your columns. This can be a powerful section for connecting with your audience without the explicit aim of selling anything. For instance, share insights about the brand, the origin of your products, or partnerships you're engaged in.
If you're up for a challenge, try and tell a story with your columns for maximum engagement. As customers scroll through, each column should consciously build on the information communicated from the previous one. By the end, they won't even realize they've absorbed a substantial amount of information!
Logo list
Your Logo list is a designated space to showcase logos representing accolades or any standards your products adhere to that your customers may care about.
Whether it's the compliance of your products with specific dietary requirements, ethical sourcing, awards and achievements, partnerships, or media features where your products have appeared on TV or radio. This section is perfect for capturing attention.
Map
The Map section is designed to display a physical location using the Google Map platform. You may wish to add the location of your physical store, a pop-up market, or an event related to your business.
Take full advantage by including some text in the overlay. Provide additional context for the map, including more information on opening times, or whether local pickup is available.
Note: To display a map location, you need to register a Google Maps API key. When registered, simply paste the API key into the Map section's settings. Click here to find out more.
Newsletter
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.
Product recommendations
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!
Featured products in this section come with a Quick Shop button (View options / Add to cart), facilitating a faster journey to the checkout for customers. To learn more about Product recommendations and how the algorithm selects products, click here.
Recently viewed
The Recently viewed section displays products that the customer has previously clicked on. The products featured in this section are unique to each customer and include a Quick shop button (View options / Add to cart) that allows convenient navigation to the checkout.
This section has proven to be an effective method for keeping desired products at the forefront of customers' minds, ensuring easy navigation back to previous items.
Rich text
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
Slideshow
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.
Testimonials
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 adverts
The Text adverts section offers an efficient way to subtly convey important and enticing information about your store and services without occupying much space. It allows you to showcase up to three text-based adverts that can link customers to other pages.
This section is commonly used for promoting delivery offers, product sales, and encouraging newsletter sign-ups.
Video
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.
Video hero
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.
Visual navigation banner
The Visual navigation banner is, on its surface, a versatile and compact menu. Its polished circle imagery stands out, naturally drawing attention. You can add up to six blocks (six menu items), assigning each one a page link, image, and accompanying text.
However, if you prefer not to use it for navigation, simply omit the links. This opens up the section for other purposes, such as highlighting crucial information like order delivery times, return policy, or product compliances. Its imagery is also the ideal size and shape for headshots - in case you want to show off your team members!
Section FAQs
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 add a menu to my header or footer?
In your Header section, the Main menu is the primary navigation option for your product collections and is essential for all storefronts. You also have the option to add a secondary Navigation block to your Main footer.
To add a menu to your theme, you first need to create it within your Shopify admin settings:
Step 1: Within your Shopify admin, go to Sales Channels > Online Store.
Step 2: Go to Navigation.
Step 3: Select Add menu and build your menu.
Step 4: Save your menu.
Step 5: Return to the Header or Main footer section and select the menu via the designated setting.
How do I display the Country/region selector on my header or footer so customers can select different currencies?
You can enable the Country/region selector option through your theme's Header and/or Footer. However, you must first set up Shopify Markets and add the different countries and regions you want to sell to. Then, enable local currencies for those markets. Your theme will display these currencies in the Country/region selector.
Step 1: Set up Markets within your Shopify admin settings.
Step 2: Turn on Use local currencies.
Step 3 (optional): Add rounding rules and international pricing.
Step 4: Go to the Theme Editor, select your Header or Main footer section, then enable the Country/region selector.
See our How to set up multiple currencies guide for detailed instructions.
How do I display the Language selector on my header or footer?
You can enable the Language selector option through your theme's Header and/or Footer to allow customers to view the store in different languages.
In order for your Language selector to display, you must have multiple languages set up for your store:
Step 1: Within your Shopify admin Settings, go to Languages.
Step 2: Add the languages to your store.
Step 3: Translate via a Shopify app and Publish them.
Step 4: Go to the Theme Editor, select your Header or Main footer section, then enable the Language selector.
See our How to translate your store guide for detailed instructions.
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.