How to Create Your First Shopify Theme Section

How to Create Your First Shopify Theme Section

Shopify theme sectionGiving your clients creative control is key, especially when they want the ability to customize their store, and Shopify’s section options are powerful tools for personalizing a site.

Customers expect a user-friendly and intuitive experience, meaning the right section in the right place can have a huge impact on conversion.

If you’re building a Shopify theme from scratch or tweaking a theme for a client, you’ll need to build a few different types of sections, which will vary depending on context.

In this post, we’ll look at how to get started with creating different types of theme sections, so that you can help empower your clients to customize their store.

You might also like: The Beginner’s Guide to Building Shopify Themes with Sections.

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.

Shopify theme section: Custom text section
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:

Shopify theme section: Text box

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.

You might also like: Introducing Sections for Shopify Themes.

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.

Shopify theme section: Dynamic section

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:

Shopify theme section: Add section

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

Shopify theme section: Changing section order

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.

You might also like: Introducing Slate: A Shopify Theme Scaffold and Command Line Tool.

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.

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.

Grow your business with the Shopify Partner Program

Learn more