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 Online 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. If you want to learn more about the difference between 1.0 and 2.0 themes, read our article, What is Shopify OS 2.0?.
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.
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 (as shown below).
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
