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.
What is Shopify 1.0 vs Shopify OS 2.0?
Shopify recently (mid-2021) 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 (technically called a Vintage theme) and needs to create page templates that include several sections. It isn’t as easy as one-click to upgrade a theme to 2.0 so many stores are still on the 1.0 version that they originally purchased. 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.
How to Add 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 Template
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.
Theme Updates & 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.
We do recommend that everyone upgrades their theme version to 2.0 as this will allow you to make use of Shopify's newest features, and experience improvements in speed, accessibility and performance.
If you found this helpful, you might like to check out our Shopify Store Launch Kit.
Hana Drdla
