How To Add Shopify Sections to Any Theme [Guide]

In 2016 Shopify added “sections,” which are modular, customizable elements that can be added statically or dynamically to a theme’s homepage Theme Editor.

Older themes, however, do not come with theme sections. We struggled to find an article on how to add Shopify sections to a theme that does not have sections included. So, we decided to write this straightforward, simple article.

Add Sections to Your Home Page

1. Go to your themes, select the “Actions” drop-down and select “Edit Code”

2. Find your index.liquid file and add the code “{{ content_for_index }}”

3. Go to your sections folder and select “Add a new section” then name your section.

4. Add in your section content to create your first section. Need a custom section developed? Contact us.

5. Save your code, then go to the customize section of your theme. You’ll now see the “Sections” tab and a block to “Add section”.

6. Select “Add section” and your new section will appear for you to add it to your home page.

 

Creating Custom Shopify Sections

Now that you’ve enabled sections in your theme, you’ll likely want to create custom sections to get the design and features you’re looking to have on your home page.

To create a custom section, the easiest thing to do is start with a template section from the Debut Theme from Shopify. Once you’ve got access to the Debut Theme:

1. Go to Online Store > Themes > Actions > Edit code
2. Once in the editor go the the “Sections” folder.
3. Find a section you’d like to start with and make a copy and rename it.
   Copies can be made by selecting the link, “Add a new section” and then copying the entire content of a current section into your new section. To select the section you’d like to customize, go to Online Store > Themes > Customize > Add section to find one to start with.
4. Once you’ve created a new section, you’ll want to rename it the name, class, and id in the schema at the bottom. This way you’ll be able to find it easier when you are building your section in Customize.
5. From this point, you’ll need to make a lot of HTML & CSS changes to your section to match whatever theme your store is using. This is going to include editing any classes for columns and styling. 
6. You can also add custom “Options” to your section at the bottom with the schema. These options allow you to control the styles of your sections. For example, if you have a button in your section and it currently does not allow you to edit the color in Customize, you can add this functionality.

Additional Shopify Content

If you would like more helpful Shopify content— we have your back. Check out how to set up a new Shopify store, or read why Shopify is best for e-commerce.  

Do you have any Shopify Sections Questions?

Leave them in the comments or feel free to contact us.