Eight Themes Support Documentation

Introduction to sections

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.

Note: The information presented in this document is accurate for the latest version. In case you are unable to locate a specific section, we recommend updating your theme to ensure access to all sections covered in 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.

Sections - Add Section.png

To add a new block, when available, go to the bottom of a section and click Add [block name].

Sections - Add Block.png

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.

Sections - Editor.png

Moving a section/block

To move a section or block, simply drag-and-drop it into a new position in its respective menu.

Sections - Drag and Drop.gif

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.

Sections - Remove.png

Hiding a section

If you wish to temporarily hide a section or block from your storefront, click the eye icon to toggle its visibility.

Sections - Hiding.png

 

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.

Sections - Undo Redo.png

Now that you're familiar with how sections work, let's take a look at what each section can do.


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.

Screen_Shot_2022-05-02_at_4.04.44_PM.png

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.

Screen_Shot_2022-05-02_at_4.05.53_PM.png

The Footer is a permanent section that appears at the very bottom of every page on your storefront.

By adding content blocks containing text, a menu, a newsletter sign-up, social media icons, 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.

Screen_Shot_2022-05-02_at_4.06.38_PM.png

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.

Screen_Shot_2022-05-03_at_7.04.06_AM.png


Blog

The Blog 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.

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).

Screen_Shot_2022-05-03_at_7.12.30_AM.png

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.

Screen_Shot_2022-05-03_at_7.14.34_AM.png

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.


Features

A Features section is a customizable grid of content blocks that you can drag and drop into position, allowing you to display a collage of content about your brand or products in bite-sized amounts.

Screen_Shot_2022-05-03_at_7.19.28_AM.png

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.

Screen_Shot_2022-05-03_at_7.23.43_AM.png

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.


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.

Screen_Shot_2022-05-06_at_4.54.34_PM.png


A Navigation list allows you to display a navigation menu of your choice horizontally across your storefront - this can be a great way to display collections, or to simply break up the homepage.

Screen_Shot_2022-05-03_at_9.26.04_AM.png

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!


Shop the Look

Shop the Look is a section that you can add to your homepage in order to advertise multiple products as shown in one photograph.


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.

Screen_Shot_2022-05-03_at_7.24.54_AM.png

Promotional grid

A Promotional grid section is where you can add images with a text overlay into content blocks, and then link the images to the collections or products that they relate to.


Scrolling text

A Scrolling text section is where you can add text to scroll from right to left across your store - this is a great way to advertise promotions and break up the sections in your homepage.

By adding extra content blocks, you can alternate the text that appears within the scroll.

Screen_Shot_2022-05-03_at_7.25.35_AM.png


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!

Screen_Shot_2022-05-06_at_4.40.41_PM.png

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.

Screen_Shot_2022-05-03_at_7.26.30_AM.png

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 with text overlay

The Video with text overlay 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.


Section FAQs

Which video formats can I upload to a Video or Video with text overlay 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 with text overlay 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 Features section?

The overlay will be added automatically once text or buttons have been applied to the image - a colored overlay will not appear if no buttons or text have been added over the image.

 

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, footer, or navigation list?

In your header, the Main menu is the main navigation option for your product collections and is essential for all storefronts. You also have the option to add menus to your footer and navigation menu by selecting them within the section editor.

In order to add a menu to your theme, this menu first needs to exist 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.

 

How do I enable the currency selector on my header or footer?

In order for your currency selector to function, you must first add markets for the different countries and regions to your store for the currencies you want to accept: 

Step 1: Set up Markets within Shopify admin.

Step 2: Turn on Use local currencies.

Step 3: Add rounding rules and international pricing.

Step 4: Enable the Country/region selector.

See our How to set up multiple currencies guide for detailed instructions.

 

Read: To learn more about Markets, Local currencies and Payments, read Shopify's Markets help pages.

 

How do I enable the language selector on my header or footer?

If you wish to allow customers to view the store in different languages, select the Language selector checkbox in the header and/or footer.

Screen_Shot_2022-05-09_at_10.14.33_AM.png

In order for your language selector to function, your languages must be set up on your store:

Step 1: Within your Shopify admin, go to under Settings.

Step 2: Select Store languages.

You will be required to download one of the many translation apps from the Shopify app store.

Read: Shopify's guide on Selling in multiple languages.

 

 

How do I set up social media links?

Under Content, you can add a Social media content block to link your networks through their corresponding icons. In order for these to be displayed in your announcement bar or footer, your social settings must be set up within your Theme settings:

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?

If you wish to display the payment methods your store accepts, select the Payment icons checkbox in the footer.

Screen_Shot_2022-05-09_at_6.58.32_AM.png

These payment options cannot be edited through your theme, but rather through your Shopify admin:

Step 1: Within your Shopify admin, go to Settings.

Step 2: Select Payments.

Step 3: Under Payment providers, add your desired payment methods.

Read: Shopify's help pages on Choose which payment icons to display.

Thanks for reading! If you haven't checked out these guides yet, we highly recommend doing so to help you get the most out of your theme:

Was this article helpful?