How to add a Shopify section to other pages on your site

This article refers to sites built on the older version of Shopify (1.0). If you have a fairly new site that was created after July 2022, this article is most probably irrelevant for you.

If you do have a site on Shopify 2.0 and need to duplicate a section to another page (while keeping the same settings), then follow our tutorial.

Your Shopify site's homepage has a variety of different content blocks (“Sections”) that you can choose from in order to display what’s on your site and to help lead your visitors to the different parts of it. You can add hero banners, product carousels, featured product blocks, latest blog articles, specific collections, testimonials, and more. But with the theme that you installed on your Shopify 1.0 site, you're limited to using these sections only on the homepage.

Wouldn’t it be great if you could add these sections elsewhere on your e-commerce store? Say you have a basic about page, but you’d like to add a hero slideshow or your featured blog posts?

Below, we’ll guide you on how to do just that!

Let’s get started

For this tutorial, we’ll work via the Theme Editor and Code Editor that are built-in to the Shopify Admin. There are more advanced ways, using Theme Kit or CLI as well, but let’s assume that if you have Theme Kit / CLI installed, you’ll already have a good grasp of what needs to be done.

In this example, let’s say you want to add a blog post section to your “About Us” page.

Duplicate your live theme

In order not to mess anything up on your live site, we recommend that you duplicate the theme that’s currently set to “live”. That way, if you make any mistakes, nothing will happen to your site online.

To do this, go navigate to Shopify->Online Store in your Shopify Admin
At the top of the page, you’ll see the live theme and two options: “Actions” and “Customize”. Click on “Actions” and then “Duplicate”
You’ll see the newly duplicated theme appear below.

The theme files

On your duplicated theme, open your code editor by clicking on “Actions” and then “Edit code”. This will open all of your site files.
Once open, on the left side, scroll to the folder titled “Sections” and search for the name (it should be pretty descriptive) of the section.
The code should appear on the right side once you click on it.
Select all of the contents by hitting the Ctrl-A (PC) or Command/⌘-A (Mac) on your keyboard and then copy it by hitting Ctrl-C (PC) or Command/⌘-C (Mac).
Create a new section by clicking on “Add a new section” directly below the folder title on the left side panel.
Give this new section a descriptive name (i.e. “about-blog”)
Erase the existing default code that appears in the right panel
Paste the code you copied in step 4 by hitting Ctrl-V (PC) or Command/⌘-V (Mac).
Save the file by clicking on the dark green “Save” button on the far right.

Done! You’ve successfully duplicated the section. Now we need to assign it to your page template.

Have you seen our pre-built sections?

You can easily add them to your store!
Check out the sections

Assign the section to your page template

This is where it gets a little tricky. You can either create a new page template and then assign that template to a page or just add the section to an existing page.

Creating a new page template may be essential if you’re planning to add this same section on multiple pages. Otherwise, if you don’t assign a different template to the page, anywhere you place this section will have identical content.

This may not be a problem if you want to show “latest blog posts” since the content will be the same, but if you want to show different images on a slideshow or a different featured product on different pages with that section, you will need to duplicate the template.

Add the section to an existing page template

Under the “Templates” folder on the left hand side panel, find the template that you’d like to add the section to. In our example, we’ll add it to “page.liquid” but in other cases, you may have a different template for the About Us page called “page.about.liquid”.

* To know which template your page is using, navigate to “Online Store”->”Pages” in your Shopify Admin and then click into the page. On the bottom left side, you’ll see which template that page is using.

Once you have selected the correct template, you’ll see the code appear on the right panel.
Now for the hard part. If you want the section to appear at the very bottom of the page, locate the code {{ page.content }}. It will most probably be “wrapped” in a “div” and look something like this:
Immediately after the </div> add the code: {% section about-blog' %} where ‘about-blog’ is the name you gave that newly created section file.
Go ahead and save the file by clicking on the green “Save” button on the right.

* If you’d like the section to appear elsewhere on the page, you’ll need to know a little HTML code to correctly identify the correct place to add that snippet.

To create a new template

Under the “Templates” folder on the left hand side panel, click on “Add a new template”.
Select the type of page template in the first dropdown. In this example, we’re basically creating a new “page” template. But if you wanted to add this section to a specific product, then you would choose “product”.
Since you are still running a Shopify 1.0 site, select “liquid” as the template type.
Replace the word “alternate” with a descriptive name. (i.e. “about”).
Once created, you can add the reference code for the section by adding {% section about-blog' %} where ‘about-blog’ is the name you gave that newly created section file. Add this snippet in the HTML wherever you want to have the section appear on the page as described in the previous section.
Go ahead and save the file by clicking on the green “Save” button on the right.
Go to Online Store->Pages and then select (or create) the page.
Assign the newly created template to that page. You’ll see the name of that template you assigned to the file appear in the dropdown menu.

* If you don’t see the name appear in the dropdown list, it’s because you added that file to a duplicated theme and Shopify only looks for templates on the live theme. To solve this, open the code editor on your live theme and create the template file (no need to add the section file as well). Once that’s done, then you’ll see the new template appear in the list.
Save the page.