arrow-right cart chevron-down chevron-left chevron-right chevron-up close menu minus play plus search share user email pinterest facebook instagram snapchat tumblr twitter vimeo linkedin youtube subscribe dogecoin dwolla forbrugsforeningen litecoin amazon_payments american_express bitcoin cirrus discover fancy interac jcb master paypal stripe visa diners_club dankort maestro trash

Shopping Cart


BFCM SUPER SALE!

Take 60% off any section with a 'single website' license Sale ends: November 30, 2022 11:59PM GMT-08:00

Days
Hours
Minutes
Seconds
Our BFCM sale has ended. Signup to our newsletter below in order to get notice of future promotions!

Shopify Insights

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

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

Duplicate your 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.

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

The theme files

  1. On your duplicated theme, open your code editor by clicking on “Actions” and then “Edit code”. This will open all of your site files.
  2. 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.
    Locate the section file
  3. The code should appear on the right side once you click on it. 
  4. 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).
  5. Create a new section by clicking on “Add a new section” directly below the folder title on the left side panel.
    Add a new section
  6. Give this new section a descriptive name (i.e. “about-blog”)
  7. Erase the existing default code that appears in the right panel
  8. Paste the code you copied in step 4 by hitting Ctrl-V (PC) or Command/⌘-V (Mac). 
  9. 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.

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. 

  1. Once you have selected the correct template, you’ll see the code appear on the right panel.
    Code of page template
  2. 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:
    Locate where to add the section in the code
  3. Immediately after the </div> add the code: {% section about-blog' %} where ‘about-blog’ is the name you gave that newly created section file.
    Add the code snippet
  4. 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

  1. Under the “Templates” folder on the left hand side panel, click on “Add a new template”. 
    Add a new template
  2. 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”.
  3. Since you are still running a Shopify 1.0 site, select “liquid” as the template type.
  4. Replace the word “alternate” with a descriptive name. (i.e. “about”).
  5. 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.
  6. Go ahead and save the file by clicking on the green “Save” button on the right.
  7. Go to Online Store->Pages and then select (or create) the page.
  8. 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.
  9. Save the page.

Done! Now you can go to the Theme Editor to add content.

Interested in upgrading your Shopify 1.0 theme to Shopify 2.0? 
Contact us today!

Theme Editor

  1. Navigate to Online Store-> Themes.
  2. Click on “Customize” next to the duplicated theme
  3. Navigate to the page that you want to add update
  4. On the left hand side, you’ll see the section appear
    Update the section in the Theme Editor
  5. Click it and update it as you probably already know how to! 

That’s it!

Like I mentioned, it can get a little tricky, depending on the complexity of your site. But if you were successful, then kudos to you! 

If you’re having trouble and you need some help, please don’t hesitate to reach out to us and we’ll help you.

Close Popup

We're sorry to see you go!

May we ask what's your reason for leaving?