Add sub collections to your pages in Shopify to increase engagement and drive more sales from those key customer touch points.
the author
Adam Ritchie
Ecommerce Contributor
share this post
Want to create collections within your collections on Shopify?
Also known as Shopify sub collections, this feature may allow you to organize your product offerings in a more intuitive way. And by making your site easier to navigate, you can help visitors discover more products that they may be interested in and generate more sales for your store.
In this guide, we’ll show you two ways to implement this feature on your Shopify collection pages:
Shogun Page Builder turns marketers into web design expertsAny ecommerce marketer can create their own custom page designs in Shopify with Shogun Page Builder.Get started now
Creating Sub Collections Using the Shopify Admin
Creating sub collections with the Shopify admin is a three-part process: you need to create the parent collection as well as the sub collections that belong to it, make a new page template that features the sub collections, and then assign this new page template to your parent collection.
Let’s start with how to create collections for your Shopify store:
Log in to your Shopify account and select the “Products” option in the left sidebar of the main control panel.
Select “Collections”.
Click on the “Create Collection” button.
Add details such as the title, description, and image for your collection. Then, add all the products that you would like to be included.
Once you’re done making changes, select “Save”.
Repeat this process for each of your sub collections.
As for the parent collection, the process is the same save for one detail — don’t add any products to this particular collection.
After you have created all your collections, the next step to make the page template for your parent collection:
Select the sales channel that you want to customize (e.g., “Online Store”) in the left sidebar of the main Shopify control panel.
Click on the “Customize” button next to your theme — this will open up Shopify’s built-in theme editor.
There is a dropdown menu located at the top of the screen that will allow you to navigate between the different page templates that make up your theme. Use this tool to go to your “Collections” templates, then select “Create template”.
Give your new template a name, select a template to base it on, then select “Create template”.
Now, here’s how you can edit this template to display your sub collections.
Click on the “Change” option next to “Preview”, then select the new template you just created.
In the left sidebar of Shopify’s theme editor, you’ll see all of the sections and blocks that make up the page listed in order. Click on the “Add section” button here, then select “Collection List”.
Insert your sub collections into the “Collection” blocks within the “Collection List” section. Also, you can adjust the heading, number of columns, color scheme, and other settings for the “Collection List” section as needed.
Remove, add, or reorder the other sections on the page however you want. Then, save your changes to the template.
Finally, you’ll need to assign this new template to your parent collection in order for the design to actually be visible on the live version of your site:
Go back to the main Shopify control panel and select the “Products” option in the left sidebar. Then, select “Collections”.
Click on the parent collection you created earlier.
In the “Theme template” section of the collection page settings, open the dropdown menu and select the template you just created that features your sub collections.
Save your changes.
Once you have completed all of these steps, you’ll see that your sub collections are now listed on the live page of the parent collection.
Editing Collection Pages using Shogun
Shogun gives you the power to fully customize your Shopify collection pages. Even if you don’t have any web development experience, this app will allow you to easily make whatever changes you want.
If you’d like to edit an existing collection page, you’ll first need to import it from Shopify into Shogun:
After installing Shogun, go to the main Shopify control panel and select the “Apps” option in the left sidebar.
Open Shogun.
Go to the “Pages” section of the Shogun app. You’ll see two tabs on this page: “Shogun” and “Shopify”. Open the “Shopify” tab.
In the “Shopify” tab, you’ll find all of the pages on your Shopify store that haven’t yet been imported into Shogun. Set the page type filter to “Collection”, then click on the “Import page” button next to the collection page that you want to import.
Choose the “Shopify 2.0 sections” option for the page layout, then select “Import this page”.
Once the page has been imported, you will be able to customize it with Shogun’s visual editor:
Go back to the “Pages” section of the Shogun app and open the “Shogun” tab. Here, you’ll find all of the pages that you’ve already imported into Shogun.
Click on the collection page that you just imported. This will open up the page in Shogun’s visual editor.
Since you chose the “Shopify 2.0 sections” option for the page layout, you’ll be able to view and edit the customization settings for all the content that was brought over from Shopify.
You can also remove the original Shopify 2.0 sections and replace them with your own custom content built with Shogun.
Indeed, Shogun’s element library allows you to quickly add a wide variety of different features to any page on your store.
This includes the “Collection” element — once you add this element to the page and select which collection you want to connect it to, all the relevant product data (names, prices, images, etc.) will be populated automatically. That means you won’t need to go through the tedious process of adding in these details manually.
Shogun gives you full control over the appearance of the Collection element as well. For example, you can customize:
Whether a zoom-in effect is initiated when the visitor hovers their cursor over one of the product images.
The font, text size, and text color for the product title, product price, and Add to Cart button.
The background color, border color, border thickness, and border radius (how rounded the corners are) for the Add to Cart button.
In addition to elements, Shogun also provides you with blocks that you can use to build pages for your store. These pre-designed chunks of content bundle multiple elements together in one convenient package, allowing you to save a lot of time in the design process. And this feature is particularly helpful for adding sub collections:
Select the “Block library” option in the left sidebar of Shogun’s visual editor.
Go to the “Featured Boxes” section of the block library — these blocks are perfect for displaying sub collections.
Select whichever block best fits your needs, drag it over to where you want the block to be located on the page, and then customize the block as needed.
For example, if you have two sub collections that you want to display, then “Featured Boxes 1” is a good fit. Once this block has been added to the page, you can swap out the default background images, headings, button text, and links with the corresponding data for your sub collections.
That’s all it takes to create a well-designed, fully functional sub collection section for your storefront.
Of course, tools such as the visual editor, element library, and block library are helpful for much more than just your collection pages. From your homepage to product pages to blog posts, you can use Shogun to create the exact content you need for every part of your Shopify site.
Shogun Page Builder turns marketers into web design expertsAny ecommerce marketer can create their own custom page designs in Shopify with Shogun Page Builder.Get started now