Subcollections

Let's start from the point that some collections can be complex, and better to divide them into subcategories for a better customer experience in finding specific products. In the Shopify theme, we have such an opportunity. We can help you manage these settings. Please follow this detailed instruction and the screenshots I've attached.

This is an example of how subcollections can look on a specific collection.

Before editing this block on collection page with products, we need to create menu in navigation section on Shopify Dashboard.

Creating Subcollections menu:

1) Click on Online store tab;

2) Click on Navigation tab;

3) Find a button “Add a menu” and click on it for creating a new menu

4) Type a name of menu and start to add a new menu items

5) We have created a menu where the 'Featured' collection includes three other collections as its categories. After the 'Featured' collection and its menu items, we display separate collections that are not included in any other collection. These three collections, not added to the main collection and 'Featured' collection, will be shown on the collection page with all products. Each collection has a link to its page that you can add by clicking the 'Edit' button and searching a link in a field for typing.

Please check the screenshots below for reference.

Created subcollections

Firstly, we created a 'Featured' collection by selecting 'Add menu item', entering a link, assigning a name, and then proceeding to add subcollections.

To include other collections within the main collection, click on the dots icon next to the subcategory and move it into the main collection. Afterward, you will see your main collection displayed as a tab that includes subcollections.

Settings in theme editor

1) Open default collection page

2) Click on Product Grid template

3) Add subcollections block or check if it is added

4) In settings of block add created before Subcollections menu in navigation section on Dashboard.

Appearance on demo store

Featured collection

Collection with all products

All settings of block in theme editor

Setting	Description
Color scheme	Choose color scheme with appropriate colors for text and background of subcollection when collection is without main image.
Select menu	Select menu from the menu list and add your created subcollections menu.
Show product count	On each subcollection can be visible number of product that this collection include. Check the box to have this option.
Image ratio	Portrait: This image ratio is taller than it is wide, making it suitable for images that emphasize vertical space. Landscape:This image ratio is wider than it is tall, making it ideal for images that prioritize horizontal space. Square: This image ratio has equal dimensions for width and height, resulting in a balanced and symmetrical appearance.
Image overlay opacity	The “Image overlay opacity” setting allows you to adjust the transparency of the overlay that is applied to images on your website. Use the slider to make changes.
Subcollections per row	Choose how many subcollections should be in one row on desktop using a slider.