What are theme sections?

Sections are modular, customizable elements of a page, which can have specific functions. Introduced at Unite 2016, sections can be statically included in a theme's templates (like the header and footer), or they can be dynamically added to the theme's homepage from the Theme Editor.

Creating a static section in your Shopify theme

A static section sounds just like its name — it’s a fixed component which can be customized through the Theme Editor. The position of this section on the page is locked, based on where it has been assigned within a page template. In a way it’s like a snippet, but with superpowers! Now sections are added into Liquid templates with the variable {% section 'header' %} instead of {% include 'my-snippet-file' %}.

In a way it’s like a snippet, but with superpowers!

For example, you might want to create a section which allows clients to add custom text to their cart page. Very often merchants need to add shipping information to the cart page, and having an option here could be very useful for anyone whose shipping times change seasonally.

Creating a section that allows clients to add custom text to their cart page could be very useful for anyone whose shipping times change seasonally.

When you create a new section from the theme file editor, a scaffold is automatically created with schema, CSS, and Javascript tags. Within the schema tags we would add JSON, which would define how the Theme Editor “reads” our content. The CSS and Javascript tags can be used to add styling or functions specific to this section, but by default the section will pull its styles from the main stylesheet of the theme.

To add content to a section, you’ll want to add HTML and Liquid tags to the very top of the file. Your Liquid tags can then be defined within the schema, so the section can be customized in the Theme Editor. You can see the different values that can be added to the schema settings in our documentation.

In the sample above, I’ve created a section called text.liquid, which has a custom heading as well as a custom rich text box. You can see that the Liquid tags in the HTML correspond with the settings in the schema section. In this example, I’ve created a plain text box and a richtext box, but you can add a wide range of output types, depending on your client requirements. Other valid input types include image_picker, radio, video_url, and font.

Within the settings of schema, idrefers to the Liquid tag being defined, type is assigning the kind of output we are creating, label is defining a name for this output, and default is assigning a placeholder.

I want this text box section to appear on the cart page, so I will need to add {% section 'text' %} to the cart.liquidtemplate file. This works similar to how you would add a snippet to a page template.

Now, when we move to the Theme Editor and go to the cart page, we can see this section appearing below the main content of the cart page, and above the footer. This is what the output looks like:

The gist above is the whole code for this section, and I would encourage you to experiment with different styling and section types to see what works best for your client’s stores.

Creating a dynamic section

Unlike static sections, dynamic sections can be moved into different positions on the homepage. This drag and drop functionality means that when you build custom dynamic sections, a wide range of options for personalizing stores will be unlocked. You could create movable sections for video, products, or image galleries.

To make a dynamic section, we just need to add presets to the section file. Presets will define how the section appears in the Theme Editor, and the presets must have a name and a category.

Once these presets are added, the sections will automatically be available to be added to the index page. Presets are not included in the base file when you click Add new section, but adding them manually is straightforward.

For example, I’ve created a section for a call to action button with Liquid tags to define a name(header), url, and button text within the schema section.

What is different here are the presets at the end of the schema file. Shopify now automatically recognizes this is a dynamic section, which can be added to the index page. This means that when we go to the Theme Editor and add a section to the homepage, this is what we see:

This section can now be moved around the page into different positions.

Now you can create other dynamic sections, which can be moved around the index page using different output types, and your clients will have free reign over how their homepage appears.

Empowering creativity

Now that you’ve seen how easy it is to add sections to your themes, you can add endless options to your client’s stores. Using the presets means sections are freed up from being stuck to one position on a homepage, which will allow merchants to build their store exactly how they would like — with some direction from you.

Have you experimented with static and dynamic sections to develop themes? We would love to hear about your experiences in the comments below.

Email address

Password

Your store name

Let’s grow your freelance or agency business.

Get design inspiration, practical takeaways and free resources to help you find and delight clients.

Email Address

Thanks for subscribing

You’ll start receiving free tips and resources soon. In the meantime, find out how Shopify’s Partner Program can help you grow your business.

About the Author

Liam is a Partner Education and Front End Developer Advocate at Shopify. He's passionate about promoting community engagement and developing learner resources. Whenever he’s not reading about code you can catch Liam making friends with cats and collecting records.