Sections

Theme sections overview

In modern Shopify themes, sections are the core building blocks of a page layout. Sections allow you to customize the look and feel of your store without needing to dive into code. They enable you to create visually engaging, dynamic, and interactive experiences for your customers. Sections in Shopify themes are designed to be flexible and can be added, customized, and rearranged based on your store’s needs.

Each theme typically comes with a set of default sections, but many themes, including the one you're using, allow you to create custom sections tailored specifically to your store’s style and functionality.

Types of sections in your theme

1. Image with Text Section

   1. Purpose: This section is perfect for combining large visuals with accompanying text to highlight important messages, such as promotions, key product categories, or brand stories.

   2. Key Features

      1. Option to add an image and align text beside it.

      2. Customizable heading and subheading for context.

      3. Call-to-action buttons for navigation.

2. Shop the Look Section

   1. Purpose: This section is used to showcase curated product collections. It highlights a set of products within a specific style or look, typically represented through a main image that links to the products within the collection.

   2. Key Features

      1. Customizable image and text.

      2. Ability to add up to four products and link them to their product pages.

      3. Dots or hotspots that allow customers to interact with specific products.

3. Featured Blog Section

   1. Purpose: This section allows you to showcase your latest or featured blog posts, creating a seamless connection between your blog and your products.

   2. Key Features

      1. Ability to feature recent or specific blog posts.

      2. Each post can include an image, title, and short description, making it easy for customers to explore your content.

      3. Customizable number of blog posts to display.

4. Multi-Column Section

   1. Purpose: This section helps you display multiple blocks in a row, such as product collections, images, or promotional content, creating a flexible and organized layout.

   2. Key Features

      1. Choose how many columns to display (e.g., two, three, or four).

      2. Each column can be a block containing images, text, or other elements.

      3. Ability to adjust spacing, padding, and alignment to create a balanced look.

5. Video Section

   1. Purpose: This section allows you to embed videos directly into your page, whether for product demonstrations, behind-the-scenes content, or promotional videos.

   2. Key Features

      1. Ability to add a YouTube, Vimeo, or self-hosted video.

      2. Customizable play button and thumbnail image.

      3. Text options for a heading, subheading, and description.

6. Custom Liquid Section

   1. Purpose: This section lets you add custom Liquid code to your theme, offering flexibility to create unique features and interactions. It’s especially useful for advanced customization and specialized functionality.

   2. Key Features

      1. Insert custom HTML, CSS, and JavaScript.

      2. Display dynamic content based on specific criteria (like customer data or product availability).

      3. Advanced layout and functionality customization.

7. Page Section

   1. Purpose: The Page Section is designed to display content from a specific page or template, which can be reused across different parts of your store.

   2. Key Features

      1. Link to any page or custom content block within your store.

      2. Ability to display a title, description, and custom image to create visual interest.

8. Newsletter Section

   1. Purpose: This section allows you to place a newsletter signup form anywhere on your page, helping you collect customer emails for marketing purposes.

   2. Key Features

      1. Simple and clean design for easy integration.

      2. Customizable text and call-to-action button.

      3. Email capture functionality.

      4. Display text and images for each testimonial.

      5. Customize layout and style to match your store's branding.

How to Add a Section to Your Theme

Adding a section to your theme is straightforward and doesn’t require coding. Here’s how you can add sections in the Theme Customizer:

1. Access the Theme Customizer

   1. From your Shopify admin, go to Online Store > Themes.

   2. Find the theme you're working on, and click on Customize to open the Theme Customizer.

2. Select the Page or Template

   1. In the left-hand panel, select the page or template where you want to add the section. This could be the home page, a product page, or any custom page.

3. Add a Section

   1. Once you're on the correct page, click Add Section at the bottom of the left panel.

   2. A list of available sections will appear. Scroll through and select the section you want to add (e.g., Shop the Look, Video Section, Multi-Column, etc.).

   3. Click on the section to add it to the page.

4. Customize the Section

   1. Once added, you’ll see options to customize the section. For example, you can:

      1. Upload images for image-based sections.

      2. Add text for headings, subheadings, and descriptions.

      3. Configure settings for blocks or products to display.

   2. Use the panel to adjust settings like color, alignment, and layout.

5. Rearrange Sections

   1. You can reorder sections by dragging them within the left-hand panel. This allows you to control the placement of your sections on the page.

6. Preview and Save

   1. After customization, preview the changes on the page. If satisfied with the layout and settings, click Save to apply the changes.