Introducing Sections for Shopify Themes

At Shopify, we’re always looking for ways to make the lives of our merchants and partners easier. Our development team is constantly revisiting the functionality of our platform to discover new ways we can enrich the experience of building an online store.

In our mission to make that a reality, we’re happy to introduce a new feature that will make Shopify Themes more customizable than ever before: sections.

Sections let you empower merchants by giving them greater flexibility when customizing their online store. This new feature allows them to easily add or move content on their homepage with just a few clicks.

We believe this addition will help streamline your development workflow and simplify the way you hand off stores to your clients.

Learn more about building Shopify themes with Shopify Theme Kit.

Enhanced theme customization with sections

Think of Shopify sections as individual, customizable components of a theme. Within each section, you or your client can easily add, reorder, and remove chunks of content such as products, slideshows, videos, or collections.

You can preview your changes in real-time in either desktop or mobile view, offering more options to test our updated layouts in Shopify Themes on the fly.

Here’s how easy it is to add new sections to a theme:

It’s just as simple to reorder existing sections:

We’ve also made editing content within sections a breeze:

Sections can be statically included in a theme's templates (like the header and footer), or they can be dynamically added and removed on the theme's homepage.

You can include a section in a template using the new section tag. This tag behaves like the familiar include tag for snippets — {% section 'header' %} will include the section located at sections/header.liquid.

For a more in-depth look into sections, take a look at our updated theme editor documentation.

What else is new with the sections update?

Our announcement of sections comes alongside several other Shopify theme development updates. We’re pretty excited about them all, and we’re pretty sure you will be too.

Here are a few functional updates you can begin using today.

Easy image uploading with image picker

Alongside sections, we’re introducing a new image_picker setting. This theme setting will now save visual assets in the Files section of your Shopify store, rather than in the Assets folder of a theme.

Image picker allows you to select the images/assets that have been uploaded to the Files section quickly, reducing the time it takes to switch themes since visual assets will not need to be re-uploaded.

When developing sectioned themes, it’s important to note that the image setting type is now deprecated and will be replaced by image_picker. You can learn more about using the image_picker setting and how it interacts with sections by reviewing our documentation.

Simplified resource referencing with url setting

We’re also enhancing the way you reference other areas in your Shopify stores with the addition of the url setting.

You can use url settings to reference a variety of shop resources including blogs, articles, pages, products, collections, and searches. The settings will update automatically if you or your client decide to change any of the referenced handles.

Find out more about how the new url setting interacts with sections by reading through our documentation.

Additional updates to the Shopify theme editor

We’ve also updated a few things in the theme editor to accommodate the addition of sections, including:

• A new UI for the theme editor, which includes two tabs: “Sections” and “General settings.”
• The “Sections” tab is where you can review the available sections for your theme, as well as add and move content. Changes made here will only impact the particular section being worked on.
• The “General settings” tab is where you’ll be able to make global changes to your store or sections, including text and background color changes, typography selection, and more.
• “Presets” have been renamed to “theme styles” and can be changed by clicking the “Change theme style” button found within the “General settings” tab.

The html/css editor has not changed, and can be accessed from within the theme editor by clicking the “Edit code” button at the bottom of the sidebar.

Start building sectioned themes today

As of today, all new Shopify stores come equipped with a new default theme called Debut that supports sections. We’re also working with existing theme developers to ensure all themes listed in the Shopify Theme Store include sections by the end of December 2016.

If you’ve built, or are building, a Shopify store that does not currently support sections, you don’t need to make any new customizations or changes to your theme. Your client’s store will look and function the same way it did before, without the addition of sections.

With the introduction of sectioned themes, you’ll now have greater power to simplify merchant handoffs and facilitate future store customizations. We’re excited to see what you and your clients will create.

You can read our updated documentation, or browse our sectioned collection in the Shopify Theme Store, if you’d like to learn more about using sections in any of your existing or upcoming Shopify builds. We’ve also created some additional documentation for theme developers to provide greater detail about building sectioned themes.