How to Add Sections Everywhere on Shopify 1.0 Themes

Want Sections Everywhere but have already built your shop on Store 1.0? Read on for ste-by-step instructions on how to add this new feature to an older theme.

How to Add Sections everywhere on Shopify 1.0 themes

On Shopify, it has traditionally been easy to make a great looking homepage with the theme’s section building blocks, but difficult to edit other pages to look equally exciting. That’s why page builders like PageFly exist – to help designers do that. But those apps have a monthly cost and can potentially slow the loading speed of your website, so a coded solution is always preferred in my opinion.

It’s actually very easy to add theme sections to other pages on any theme.

Shopify 1.0 vs 2.0

Shopify recently released Store 2.0 which has many upgrades in the Customizer, and 2.0 themes have the long-anticipated “Sections Everywhere” feature that makes putting sections on any page a complete breeze. This article is for anyone that is using Store 1.0 (it’s not really called that but basically a non-2.0 theme) which at the moment is probably still 99% of stores. It isn’t as easy as one-click to upgrade your theme so many people are still on the 1.0 version that they originally purchased, and others may opt for the cheaper 1.0 themes that are about half the cost.  

Let’s add Sections Everywhere to your store.

Sections Everywhere Tutorial

Go to your theme code files. Go to Online Store —> Actions —> Edit Code.

1. Go to the Templates folder and look for the page.liquid file. Copy all the content to your clipboard.

2. Go to the Sections folder. Add a new section called page-main. Make some space above the default code, and paste the content copied in step 1. In the schema, change “Section name” to “page-main”, change “settings” to “tag” and change “[]” to “section” (careful not to add a comma after this). Click Save.

3. Return to the Templates folder. Click Add a new template. Choose a page template, JSON type, and name the template the same as your page name. I’ll name mine “about“. My file is called “page.about.json“. Delete all the code in this file and replace it with the code below. Notice how “type”: “page-main” matches the name of the file we just created in Step 2. Click save.

{
  "sections": {
    "main": {
      "type": "page-main",
      "settings": {}
    }
  },
  "order": [
    "main"
  ]
}

4. Connect your page to the new template. Go to your pages under Online Store –> Pages. Click on your page, and change the page template on the bottom right. The dropdown should show the name of the page template you just created.

The list will only show templates existing on the live theme. If you’re working on an unpublished theme, you’ll need to create a page template in the live theme with the same name, but in this theme, you will leave the default page template code and not add your sections (because you don’t want to affect the live theme). 

5. Open the theme customizer and use the top dropdown to navigate to your page template. Now you’ll see the option to add a new section, just like you do on the homepage! You’re ready to make a beautiful new page.

Remove the Page Title

If you don’t want the page title or any of the page content that you’ve added in the “Pages” section of your store to appear at the top of the page, return to Sections –> page-main.liquid and remove the code that was previously pasted before the schema. This will remove the Heading 1 page title and page content.

Create Another Page

If you wish to create another page, you’ll need to make a new page template for that page. Why’s that? If you return to your page template file after adding some sections to your page, you’ll notice that all the code has been replaced. The data from the sections you’ve added is now being stored here.

To create another unique page template, scroll up to step 3 and repeat the steps to create a new page template with a different name.

Conclusion

It’s great that Shopify 2.0 has finally solved the Sections Everywhere issue after years of talking about it, but I know many of us still need this trick when working on non-2.0 themes. I hope this worked for you and good luck!



If you found this helpful, you might like to check out our Shopify Store Launch Kit.

Hana Drdla

Hana Drdla

Hana is one of the co-founders of Luna and a Shopify pro. She loves helping entrepreneurs launch their businesses through her freelance web development business.

SHOPIFY TUTORIALS, STRAIGHT TO YOUR INBOX

Sign up to receive monthly emails packed full of tutorials, new products and special offers.

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments

ELEVATE YOUR SHOPIFY STORE

With sections that work with the most popular themes. For store owners and designers.

We’re making beautiful Shopify stores a breeze with customizable pre-built sections.

Related Posts