Table of Contents:
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.
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:
theme.liquid
, which wraps all the pages in your store.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.
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.
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.
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:
Install Node.js and npm if you don’t have them already.
Install the Shopify CLI via your terminal using the command:
npm install -g @shopify/cli
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.
Now that your development environment is ready, the next step is to identify the right theme where you want to add new sections.
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.
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.
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.
Navigate to the sections
folder.
Click Add a new section, and give your section a name like custom-banner
.
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.
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.
After creating the custom section, it’s time to add it to your theme's layout or templates.
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.
You can also add sections to other pages, such as product or collection templates, by including the section in the corresponding template file.
Now that you have a custom section, you’ll want to fine-tune its settings to make it even more customizable for store admins.
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.
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.
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.
It’s important to test
your newly added sections to ensure they work as expected. Shopify provides tools to preview changes and catch errors.
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.
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.
While creating custom sections is essential, optimizing them for both design and performance is equally important.
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" />
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.
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:
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.
Prateeksha Web Design is a company providing expert assistance in customizing Shopify themes by adding sections to them. They offer a detailed, step-by-step tutorial to guide clients through the process, ensuring a more personalized and efficient online store.
Interested in learning more? Contact us today.