How to Add Sections to Themes on Shopify - Step-by-Step Tutorial

Table of Contents:

1. Introduction to Shopify Themes and Sections
2. Understanding Shopify Theme Architecture
3. Step 1: Setting Up a Development Environment
4. Step 2: Identifying the Right Theme for Section Editing
5. Step 3: Creating a Custom Section
6. Step 4: Adding Custom Section to Theme Files
7. Step 5: Modifying Section Settings and Schemas
8. Step 6: Adding Content Blocks to Your Section
9. Step 7: Testing and Debugging Custom Sections
10. Step 8: Tips for Enhancing Section Design and Performance
11. Latest Advancements in Shopify Theme Customization
12. Conclusion

Introduction to Shopify Themes and Sections

Shopify is one of the most popular platforms for building eCommerce websites, and its themes define how your online store looks and feels. Each theme comes with sections—pre-built, customizable content blocks that allow you to add, move, and rearrange various elements such as images, text, and videos. Adding sections to Shopify themes provides store owners with the ability to customize their pages easily without needing in-depth coding knowledge. This blog will take you through a detailed tutorial on how to add sections to Shopify themes, with code examples and tips that will help you gain a better understanding of how Shopify theme customization works.

Understanding Shopify Theme Architecture

Before diving into adding sections, it’s essential to have a solid understanding of Shopify’s theme architecture. Shopify themes are built using a combination of Liquid (Shopify's templating language), HTML, CSS, and JavaScript. Here’s a quick breakdown of the key files that make up a Shopify theme:

• Layout Files: These files control the general structure of your store. The most common layout file is theme.liquid, which wraps all the pages in your store.
• Templates: Template files dictate the structure of individual pages like product, collection, or blog pages.
• Sections: Sections are modular, reusable elements within Shopify themes that can be customized directly from the Shopify Admin panel. They typically contain pieces of code that render specific page elements, such as a product grid, slideshow, or banner.
• Assets: This folder contains all the static files like images, CSS, and JavaScript that your store needs to function properly.

Understanding how these files work together will help you when adding new sections to a theme. Each theme on Shopify follows this structure, so whether you're working on a custom theme or using a Shopify marketplace theme, these principles apply.

Step 1: Setting Up a Development Environment

Before you begin adding sections to your Shopify theme, you need to set up a development environment. This allows you to work safely on your store's theme without affecting the live site.

1.1 Create a Backup of Your Theme

It’s important to create a backup of your theme before making any changes. You can duplicate your theme by going to Online Store > Themes in your Shopify admin. Click on Actions > Duplicate next to the theme you want to modify.

1.2 Set Up Shopify CLI

The Shopify CLI (Command-Line Interface) is an essential tool that allows developers to work on themes locally. It simplifies the process of editing and previewing theme files. To install Shopify CLI, follow these steps:

1. Install Node.js and npm if you don’t have them already.

2. Install the Shopify CLI via your terminal using the command:

   npm install -g @shopify/cli
   

3. Authenticate your store by running:

   shopify login --store your-store-name.myshopify.com
   

This will allow you to preview and edit your theme locally and sync your changes with the live store when you’re ready.

Step 2: Identifying the Right Theme for Section Editing

Now that your development environment is ready, the next step is to identify the right theme where you want to add new sections.

2.1 Choose the Correct Theme

If you’re working on a live store, you can create a duplicate theme as mentioned in Step 1. This lets you experiment without affecting the current version of your store.

2.2 Open Theme Files in Shopify Admin

You can access your theme files from the Shopify Admin under Online Store > Themes > Actions > Edit Code. Here, you’ll find the various theme files categorized under Layout, Templates, Sections, Snippets, and Assets. The Sections folder is where we’ll focus our work.

Step 3: Creating a Custom Section

Once you’ve selected the theme, it's time to create a custom section. Sections are stored in the sections folder of your theme, and they are coded in Liquid. We’ll now create a basic section that can later be customized further.

3.1 Create a New Section File

1. Navigate to the sections folder.

2. Click Add a new section, and give your section a name like custom-banner.

3. Shopify will automatically generate a basic section structure. For example:

   {% schema %}
   {
     "name": "Custom Banner",
     "settings": []
   }
   {% endschema %}
   

   This is the schema part of the section, where you define the settings (like text fields, images, etc.) that users can customize via the Shopify Admin.

3.2 Add Content to Your Section

Now you can start adding content inside the section. Let’s say you want to add an image banner. Add the following Liquid and HTML code:

<div class="custom-banner">
  <img src="{{ section.settings.banner_image }}" alt="Banner Image" />
</div>

You can also add settings to make this banner customizable in the admin panel:

{% schema %}
{
  "name": "Custom Banner",
  "settings": [
    {
      "type": "image_picker",
      "id": "banner_image",
      "label": "Banner Image"
    }
  ]
}
{% endschema %}

This simple section now includes a customizable image picker that allows users to select an image for the banner from the Shopify admin panel.

Step 4: Adding Custom Section to Theme Files

After creating the custom section, it’s time to add it to your theme's layout or templates.

4.1 Add Section to the Homepage

For example, to add your new custom-banner section to the homepage, open the index.liquid file under the Templates folder, and include the section by adding this code:

{% section 'custom-banner' %}

This tells Shopify to render your custom-banner section on the homepage.

4.2 Add to Other Pages

You can also add sections to other pages, such as product or collection templates, by including the section in the corresponding template file.

Step 5: Modifying Section Settings and Schemas

Now that you have a custom section, you’ll want to fine-tune its settings to make it even more customizable for store admins.

5.1 Adding More Settings

You can add various types of settings such as text fields, select dropdowns, and checkboxes. For example, to add a customizable heading to your banner, modify the schema as follows:

{% schema %}
{
  "name": "Custom Banner",
  "settings": [
    {
      "type": "image_picker",
      "id": "banner_image",
      "label": "Banner Image"
    },
    {
      "type": "text",
      "id": "banner_heading",
      "label": "Banner Heading",
      "default": "Welcome to Our Store"
    }
  ]
}
{% endschema %}

Now, you’ll be able to edit both the image and the heading from the Shopify admin panel.

Step 6: Adding Content Blocks to Your Section

Blocks allow users to add dynamic content to sections, enabling them to add multiple instances of content, like multiple images or text fields, to a section.

6.1 Add Dynamic Blocks

To add blocks to your custom section, modify the schema tag. For instance, if you want to allow multiple banners, you can add the following block code:

{% schema %}
{
  "name": "Custom Banner",
  "settings": [],
  "blocks": [
    {
      "type": "image_picker",
      "id": "banner_image",
      "label": "Banner Image"
    },
    {
      "type": "text",
      "id": "banner_heading",
      "label": "Banner Heading",
      "default": "Welcome"
    }
  ],
  "presets": [{
    "name": "Custom Banner"
  }]
}
{% endschema %}

This lets users add as many images and headings as they like, making the section more flexible.

Step 7: Testing and Debugging Custom Sections

It’s important to test

your newly added sections to ensure they work as expected. Shopify provides tools to preview changes and catch errors.

7.1 Previewing Your Theme

Shopify allows you to preview theme changes by clicking Actions > Preview in your Shopify Admin. This gives you a live preview of how your custom sections appear.

7.2 Debugging Tips

If your section isn’t working as expected, use the browser’s developer tools to check for any JavaScript or CSS errors. Additionally, ensure your Liquid code doesn’t have syntax errors that might prevent it from rendering correctly.

Step 8: Tips for Enhancing Section Design and Performance

While creating custom sections is essential, optimizing them for both design and performance is equally important.

8.1 Use Lazy Loading for Images

Large images can slow down your website, so use lazy loading to only load images when they’re in view. In your custom section, you can implement lazy loading by adding a loading="lazy" attribute to image tags:

<img src="{{ section.settings.banner_image }}" alt="Banner" loading="lazy" />

8.2 Optimize for Mobile

Ensure that your section designs are responsive and look great on mobile devices. Use media queries in your CSS to adjust layouts for smaller screens.

Latest Advancements in Shopify Theme Customization

As Shopify evolves, new features are constantly being added to improve theme customization. Shopify’s Online Store 2.0 is one of the most recent updates that brings powerful features, including:

• Flexible Sections Everywhere: Previously, sections could only be added to the homepage. Now, with Shopify 2.0, sections can be added to any page.
• Improved Theme Editor: The theme editor now offers a more intuitive interface, making it easier for merchants to customize their stores without coding knowledge.
• App Block Integration: Shopify now allows apps to integrate with your theme more seamlessly, making customization even more dynamic.

Conclusion

Adding sections to Shopify themes is a powerful way to customize your store and provide a unique shopping experience for your customers. By following the steps outlined in this tutorial, you can create new sections, modify settings, and ensure that your customizations are optimized for both design and performance. Keep in mind that Shopify is constantly evolving, and staying updated with the latest features will allow you to unlock even more customization possibilities.

Interested in learning more? Contact us today.