Organizing the Theme Editor with Section Groups

1. The "Why": From Disorganization to Structure

From your full-stack background, you know that a well-structured application is easier to navigate and use. The same principle applies to a Shopify theme's customization interface. Section groups serve two primary purposes that address fundamental architectural needs:

1. Organization: They allow you to group related sections, decluttering the theme editor and guiding the merchant to add the right content in the right place. Instead of one long list, a merchant might see categories like "Header sections," "Footer sections," or "Promotional content."
2. Scope and Persistence: They create distinct, global content areas (like headers and footers) that persist across multiple pages. This is different from sections added directly to a page template (like the homepage), which are specific to that template only.

This ability to structure the theme editor and create global content areas is a key feature of modern Shopify theme development.

2. The Anatomy of a Section Group

A section group is simply a JSON file that lives in the sections directory of your theme, right alongside the .liquid section files you've already been creating. While a .liquid file contains markup and logic, the group's .json file is pure data—it defines a list of sections and their order.

Let's break down the essential schema for a section group.

As you saw in the documentation, every section group JSON file must contain an object with four key properties:

• name: A string that becomes the title for this group in the theme editor (e.g., "Header", "Footer", "Promotions").
• type: This is critical for organizing and controlling sections. It can be a standard type (header, footer, aside) or a custom type you define, which must follow the format custom.<your-type-name> (e.g., custom.promo-banners).
• sections: An object that will hold the data for any sections added to this group by the merchant. You can define "hard-coded" sections here, but it often starts empty to let the merchant customize it.
• order: An array of section IDs, defining the rendering order. This also typically starts empty.

3. Creating and Rendering a Custom Section Group

Let's walk through the process of creating a new, custom area in our theme where a merchant can add promotional sections.

The process involves two steps:

1. Define the group: Create a new JSON file in the /sections directory.
2. Render the group: Use a Liquid tag to output the group in a layout file.

This video provides a clear, practical demonstration of these steps.

To recap the video's steps:

1. Create the file: In your theme's sections folder, create a new file named promo-group.json.

2. Add the schema: Populate it with the basic structure.

   // sections/promo-group.json
   {
     "name": "Promo Banners",
     "type": "custom.promo",
     "sections": {},
     "order": []
   }
   

3. Render in the layout: Open your layout/theme.liquid file. Find a suitable place (e.g., above the main content) and add the Liquid tag.

   // layout/theme.liquid
   ...
   {% sections 'header-group' %}
   
   <main id="MainContent" class="content-for-layout" role="main" tabindex="-1">
     {% sections 'promo-group' %}
     {{ content_for_layout }}
   </main>
   
   {% sections 'footer-group' %}
   ...
   

After saving these files, you will see a new "Promo Banners" area in your theme editor, ready for sections to be added. But which sections?

4. Controlling Section Availability for a Better UX

Right now, any section with a preset can be added to our new "Promo Banners" group. This isn't ideal. A "Featured Product" section probably doesn't belong there. This is where we deliver on the promise of a better merchant experience.

We can control where a section can be added by modifying the section's .liquid file schema with two powerful properties: enabled_on and disabled_on.

Let's see this in action. Imagine we have a section file, promotional-banner.liquid. To ensure it can only be added to our new custom.promo group, we would add an enabled_on property to its schema:

// in sections/promotional-banner.liquid
{% schema %}
{
  "name": "Promotional Banner",
  "settings": [ ... ],
  "enabled_on": {
    "groups": ["custom.promo"]
  },
  "presets": [
    {
      "name": "Promotional Banner"
    }
  ]
}
{% endschema %}

Conversely, if we wanted to prevent our "Featured Collection" section from ever appearing in the header or footer, we would use disabled_on:

// in sections/featured-collection.liquid
{% schema %}
{
  "name": "Featured Collection",
  "settings": [ ... ],
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "presets": [ ... ]
}
{% endschema %}

This next video clip demonstrates this exact technique.

"enabled_on": {
  "groups": ["footer"]
}

Conclusion

You've now learned how to impose structure and logic onto the theme customization experience. By moving beyond a flat list of sections and creating curated groups, you are building a more robust, professional, and user-friendly product for your clients.

Key Takeaways:

• Section groups are JSON files in the /sections directory that define named, typed containers for sections.
• They are rendered in layout files (like theme.liquid) using the {% sections 'group-name' %} tag, making their content appear globally across pages using that layout.
• The primary way to organize the theme editor is by using the enabled_on and disabled_on properties within a section's schema.
• By specifying groups within these properties, you gain fine-grained control over which sections a merchant can add to which group, dramatically improving the user experience.

In this lesson, we controlled where sections can be placed. In our next lesson, we'll shift our focus to controlling the content inside a section. We will learn how to render section content conditionally based on user-configured settings, allowing us to build even more dynamic and flexible components.