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 the example below, the Slideshow section has been highlighted. The Slideshow contains two blocks - each representing a new slide.

Sections - Inspector.png

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.

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

 


What sections are included?

Accordion/FAQ

A collapsible content area for FAQs or detailed information, improving navigation and user experience by saving space.

Animated text

Adds visually engaging, moving text to highlight promotions or key messages, capturing customer attention effectively.

Blog posts

Displays recent blog entries to engage visitors with news, stories, or educational content, enhancing SEO and site relevance.

Collage builder

Allows the creation of custom collage layouts for images, video and text, creating a dynamic and visually appealing showcase of products or content.

Collection list

Presents a curated selection of product collections, helping customers navigate through different categories.

Contact form

Provides a simple way for customers to reach out, fostering communication and customer service directly from the site.
Countdown timer Introduces urgency by counting down to special events or sales deadlines, encouraging quicker customer actions.
Custom HTML Offers the flexibility to embed custom HTML code, allowing for unique customizations or third-party integrations.
Custom liquid Enables advanced customizations with Shopify’s Liquid code, for creating personalized templates or features not available out-of-the-box.

Events calendar

Displays upcoming events or promotions in a calendar format, keeping customers informed and engaged with future activities.

Featured collection

Highlights a specific product collection, directing attention to new arrivals, bestsellers, or seasonal picks.

Featured menu

Showcases a navigational menu spotlighting preferred collections or pages, guiding customers to highlights or important information.

Featured product

Focuses on a single product to spotlight, offering detailed descriptions or promoting a special offer.

Gallery

Provides a visual showcase of images or photos, perfect for highlighting product ranges, portfolios, or brand imagery.

Hero

A large, impactful image with secondary images and information to showcase your content in a unique way.

Image with text

Combines imagery with text to tell a story or detail product features, balancing visual appeal with informative content.

Image with text overlay

Features text overlaid on an image, ideal for concise messaging on banners or to highlight calls to action.

Info columns

Organizes information into columns, suitable for displaying services, features, or product categories in an organized manner.

Logo list

Displays a series of logos, useful for showcasing partner brands, press mentions, or payment options to build trust.

Map

Integrates a location map, essential for physical stores, to assist customers in finding store locations or event venues.

Newsletter

Captures email sign-ups through a form, facilitating direct marketing efforts and customer relationship building.

Rich text

Offers a flexible text area for detailed content creation, supporting storytelling or instructions.

Scrolling banner

Features a horizontally scrolling banner, ideal for highlighting unique selling propositions, images and more.

Shop the look

Enables customers to purchase multiple items from a curated set or ensemble showcased in an image, simplifying the process of buying complete outfits or collections.

Testimonials

Showcases customer reviews or testimonials, enhancing credibility and trust in the brand or products.

Text advert

Displays advertising text, effectively used for promotions, special offers, or important announcements.

Video

Embeds a video to convey complex messages or demonstrate products in action, enhancing engagement and understanding.

Video hero

A large, engaging video banner, setting an immersive mood or showcasing a product/story vividly.

Visual navigation banner

Offers a visually-driven navigation option, guiding customers through imagery linked to key site areas or collections.

Recommended products

Suggests products based on customer behavior or preferences, personalizing the shopping experience.

Recently viewed products

Displays products a customer has recently looked at, making it easier to return to products of interest.

 


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.

Language Selector - Translate Store.png

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.

 
Screen_Shot_2022-05-09_at_6.57.51_AM.png

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.


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?