Add Sections to Templates in Shopify: Step-by-step Guide

Adding sections to templates is the core of modern theme customization. Sections provide modular components that store owners can modify directly in the theme customizer without writing code. Our team provides professional Shopify theme development services to engineer flexible sections that look sharp and render quickly.

In this guide, we show you how developers build Liquid sections and attach them to JSON templates step by step.

What are Shopify Sections?

Sections are modular components that contain configurable schema settings for the visual theme editor. While adding snippets in Shopify is ideal for static micro-code fragments, sections allow non-technical store managers to update copy, images, and layout blocks visually.

Sections are stored in a theme’s sections folder and can be added to any template, such as the homepage, product pages, or custom pages. Their flexibility makes them a key feature for creating responsive and interactive store designs.

Types of Sections in Shopify:

1. Main Page Sections: These sections form the core of certain pages, like product or collection pages. They typically contain key components such as product information, pricing, and images.
2. Modular Sections: These flexible components can be placed across any page, including testimonials, featured collections, and newsletter blocks. Leveraging creative eCommerce website design services ensures your modular sections follow strict visual hierarchy and brand typography.

How to Add Sections to Templates in Shopify

If you want to add a custom section to your Shopify store, such as a banner or special announcement, you can easily do this by creating a new section file.

Creating a Section File

Start by creating a section file.

Navigate to the Shopify Admin:

• Go to Online Store > Themes
• Click on Actions > Edit Code

Add a new section:

• In the left-hand menu, locate the Sections folder.
• Click Add a new section.
• Provide a name for your section (e.g., custom-banner)

This creates a new file named custom-banner.liquid in the sections folder.

Defining the Section Content

Open the newly created custom-banner.liquid file and add the following:

{% schema %}
{
 "name": "Custom Banner",
 "settings": [
   {
     "type": "text",
     "id": "heading",
     "label": "Banner Heading",
     "default": "Welcome to Our Store!"
   },
   {
     "type": "image_picker",
     "id": "background_image",
     "label": "Background Image"
   },
   {
     "type": "text",
     "id": "subheading",
     "label": "Subheading Text",
     "default": "Shop the latest trends"
   }
 ]
}
{% endschema %}

<div class="custom-banner" style="background-image: url('{{ section.settings.background_image | file_url }}');">
 <h1>{{ section.settings.heading }}</h1>
 <h3>{{ section.settings.subheading }}</h3>
</div>
<style>
 .custom-banner {
   text-align: center;
   padding: 50px;
   color: white;
   background-size: cover;
   background-position: center;
 }
</style>

Now that you’ve defined the section, the next step is to add the section to a JSON template.

Adding the Section to a JSON Template

Online Store 2.0 defines page hierarchies using JSON template arrays. When setting up a Shopify store without a template, you structure these JSON files to declare exactly which sections render and in what order across your pages.

Locate the relevant JSON template:

• Go to the Templates folder.
• Open the desired JSON file, such as index.json for the home page.

Insert the section in the sections array:

{
     "type": "custom-banner",
     "settings": {
       "heading": "Welcome to Our Store!",
       "background_image": "",
       "subheading": "Shop the latest trends"
     }
}

Example JSON structure:

{
   "sections": {
       "custom-banner": {
           "type": "custom-banner",
           "settings": {
                "heading": "Welcome to Our Store!",
                "background_image": "",
                "subheading": "Shop the latest trends"
           }
        }
    },
    "order": [
       "custom-banner"
     ]
}

Customizing the Section in the Shopify Admin

Follow these steps to customize the section:

1. Go to Online Store > Themes
2. Click Customize on your active theme
3. Navigate to the page where the section is added
4. Use the sidebar to adjust the section settings (e.g., text, image)

Testing Your Section

After adding and customizing the section:

• Preview the changes in the Shopify editor.
• Test on multiple devices to ensure responsiveness.
• Check for potential styling conflicts.

By using this step-by-step guide, you can quickly add and customize sections in your Shopify templates, making the shopping experience more personalized and engaging for your customers.

Get your Shopify store developed by experts. Work with our professional Shopify development company.

Advanced Tips For Adding Sections to Templates in Shopify

If you want to expand section capabilities with conditional settings, nested blocks, and dynamic metafield bindings, you can hire dedicated Shopify developers from our team. Our engineers build maintainable schema architectures that simplify merchant management.

• Use conditional logic in the section schema to show or hide settings based on user input.
• Incorporate dynamic sources to fetch product or collection data.
• Use Liquid loops and filters for more advanced customization.

Example:

<ul>
 {% for product in collections.frontpage.products %}
   <li>{{ product.title }}</li>
 {% endfor %}
</ul>

By using these advanced techniques, you can unlock even more possibilities for customizing your Shopify store. 

Wrap It Up

Adding sections to templates in Shopify helps streamline the design and customization process, empowering merchants to take full control over their store’s appearance. Creating reusable, dynamic sections tailored to meet your needs or enhance your own store’s functionality can be a great option. 

With the right customization, you can create an appealing Shopify store. Don’t forget to test your changes so that your visitors don’t face any issues accessing your store. For a wider range of customizations, use conditional logic and dynamic data.

If you need expert assistance on your Shopify store, contact us today.

FAQs on Adding Sections to Templates in Shopify

1. How do I add a custom section to my Shopify store?

To add a custom section, go to Online Store > Themes > Edit Code, create a new section file, and define its content using Liquid code. Then, add it to your template.

2. Can I customize the section content in Shopify?

Yes, you can customize the section’s content, such as text, images, and links, directly through the Shopify Admin by using the theme customization options.

3. How can I make sections display only under certain conditions?

You can use conditional logic in the section schema to show or hide settings based on user input or specific conditions, like if a product exists or a collection is selected.