A common support request we receive for our themes is how to show sub-collections on a page. Since Shopify doesn't officially support sub-collections, they created this support article, which describes how to use navigation menus and a custom page template to show a subset of collections.
While following this support article works properly with our themes from a functional perspective, it is written for Shopify's own free themes. They use a different codebase than ours, so the resulting page displays without proper formatting.
The latest versions of ShowTime and Galleria include two custom page templates for addressing this issue. They are called called page.list-collections and page.list-collections-menu. Here's how to use them:
- From your Shopify admin, go to Online Store > Pages
- Choose one of your existing pages if you want to use it for this purpose, or you can also add a new page by clicking Add page
- In the page editor, enter a title for the page in the text box provided. Note that you must use the same title for the menu that you'll create in the upcoming steps
- Assign your new template to the page by selecting either page.list-collections or page.list-collections-menu from the Template suffix drop-down menu in the Template section:
- Click Save.
If you don't see the page.list-collections-menu file, you likely have an older theme version that does not include this file. In this case, if you contact our support team, we can guide you further. You can either upgrade your theme version, or we can send you a quote to add it to your existing version.
What's the difference between these two templates?
The page.list-collections template is a little bit simpler to use, but it can only be applied to one single page. So if you just need one page that features a subset of collections, you should use this template.
The page.list-collections-menu requires a little more manual work, but it allows you to create as many pages of collections as you want.
Using the page.list-collections-menu template
This template allows you to use navigation menus to populate multiple pages of collections. You can control which collections appear on these pages by adding links to the appropriate collections to a menu. Here's how to set it up:
Create the menu that controls which collections are displayed
- From your Shopify admin, go to Online Store > Navigation
- Click the Add menu button
- Give your menu the same Title as the title that you gave the page that will feature your collections. For example, if the page you created has the title Living Room, then you will give your menu the title Living Room
- Add links to your menu for each collection you want to feature by clicking Add menu item. Choose collections from your store by clicking on Collections in the drop-down menu for the Link text box. It is important to link to your collections in this way, instead of manually pasting or typing a URL to the text box:
- Click Save menu
Once you've finished these steps and applied the page.list-collections-menu template to one of your pages, you will see a nicely formatted grid of collections along with their featured images (if one is specified) on this page. From here, you can apply this same template to any other page you need. You'll need to create separate menus for each page, making sure that they are always named the same.
Using the page.list-collections template
With this template, you can choose the collections you want to feature individually in the theme settings. First, you should make sure to assign the page.list-collections template to your desired page as described above. Once that's done, you need to go into your theme settings:
- From your Shopify admin, go to Online Store > Themes and locate your published theme
- Click the Customize button to launch the theme settings browser
- In the drop-down menu near the top, choose the name of the page you created from the list. This should be the page where the page.list-collections template is applied.
- The settings on the left side will change, and you should see a box to edit your List Collections Page settings. Click this to view the settings.
- There are many display settings to play with here, and you can choose which collections to feature individually in the Content section near the bottom.
- Once you've added all your collections, be sure to click the Save button in the upper-right corner to save your changes. That should do it!
Note that you can only use this template on one page. If you apply this template to multiple pages, you'll see the same grid of collections on all of them. If you need more than one page of subcollections, you should use the page.list-collections-menu template instead.
Article is closed for comments.