Shopify released their OS 2.0 upgrade in late 2021 and with it came a new way of creating a page of collections, which is much easier and more user friendly than the old method and in this Shopify tutorial, I will go through all of the steps to enable you to create a custom collections page with the new OS 2.0.
Show All Collections
If you want to create a page that lists all of your collections, Shopify does include a standard template that allows you to do this.
To add this page to your Shopify store, in your admin dashboard go to Online Store → Navigation → Main Menu and then click add item to menu and the following sidebar pop up will appear:
When you click on the link box, a drop down menu will appear showing all of the options that you can add to the navigation menu and you want to click Collections and a second menu will appear showing all of your collections along with the option you want to click, which is All Collections.
This will add a link to your menu and if you want to confirm these changes, click Save Menu at the bottom of the page and this option will be added to your main menu.
With the new customizer that is a part of Shopify OS 2.0, you can now go in and customize the Collections list page and this can be done by going to Online Store → Theme → Customize and you will then be taken to the customizer.
To access the Collections List page, click on the drop down menu at the top of the customizer and click Collections List and it will take you through to the collections list page.
In the left sidebar, you will see two main options for the page:
- Collections list page section
- Add section
If you click on the Collection list page section, you will be shown some of the customization options for the page including:
- Sort collections by
- Image ratio
You can also add sections to the page, which offers much more in terms of customization, which is one of the big differences with Shopify OS 2.0.
Once you have set the page up how you want it, just click save in the top right hand corner of the customizer and all the changes will be published to your site.
Awesome, job done right? Not quite as this page lists ALL of the collections on your site and you can choose which ones are displayed. Fortunately, there is is a great way to create a Custom Page of Collections, which will be shown below.
Creating a Custom Collections Page
Step 1: Create a New Page Template
To create multiple custom collections pages, we are going to need to create a new page template in Shopify and this is much easier to do with Shopify OS 2.0.
To create the new page template, you need to go into the page customizer, that can be accessed by going to Online Store → Themes → Customize. When you are in the customizer, click on the drop down menu at the top of the page to bring up all of the page options for your store.
From the drop down menu click on Pages and then + Create template and a pop-up will appear like in the image below:
In the pop-up, enter a name for the template and choose which page to base the template and as we are creating a brand new template, use the default template as the base for this one.
Step 2: Customize The Template
Once the new page template has been created, it is time to set it up for listing our chosen collections.
The first step is to add a new section to the page and for this we want to add the Collection List section, which adds the following elements to the page:
To add your selected collections, click on one of the collection slots in the side bar, click add collection and then select your chosen collection from the list of collections.
Once you have selected the collections that you want displayed on the page, click save and this template will have then been created.
Step 3: Create a New Page
Now that the template has been created, it need to be applied to a page and to do this, go to Online Store → Pages → Add New.
When setting up the new page, you want to select the template that you just created and this is done by clicking on the drop down menu on the right hand side under theme template. Once you have selected the template, make sure the page is set to visible and then save the page to make it active on your site.
Then choose the collections that you want to appear on the page, as you can see in the image above, these are all different types of watches.
Once you are happy with the collections that you want to display on this page, click Save to create the new menu.
Step 4: Add Page to Main Menu
The final step is to add a link to the new page in your main navigation menu and it is basically the same as the steps show in the Show All Collections sections at the start of this post but I’ll still give a quick summary!
Go to Online Store → Navigation → Main Menu → Add item to menu but instead of going to the Collections section from menu that appears when you click the link box, you want to look under Pages and find the page that you created.
Once you have found the page, click add and then save the menu and your new collections page will have been added to your main navigation menu. If you then view the front end of your site, when you click on the link to your new collections page, like the image below:
Important: Add Images to your Collections
If you haven’t added an image to your collection, then it will display the default Shopify placeholder. So make sure you have added images so that it displays properly.
Create Multiple Pages of Collections
So what if you want to create multiple pages of collections, so that it is easier for customers to navigate around your site?
This can also be done within Shopify OS 2.0 but in a different way to creating a page of collections due to Shopify not allowing for the creation of sub-collections.
To do this, you need to create a new page template following the steps above but you want to use the Multicolumn section instead of the Collections List.
This isn’t quite as simple as the Collections List section, which is just a couple of clicks as you need to manually set these up by using the settings that are available when you click on the individual Columns in the sidebar:
- Select an Image from your image library
- Enter a Heading (Optional)
- Add a Description (Optional)
- Link Label
- Link (Select a Collection from List)
Also, if you want to remove the button from underneath the Multicolumn, click on the Multicolumn heading to bring up to options for the section and remove the text in the button label setting.
So, there it is, how to create a custom collections page within Shopify OS 2.0 and it is a pretty simple process to do.
If any of the process doesn’t make sense, I would recommend watching the video as I’m able to show you the process, which is much easier than from images and text.