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.

Creating Subcollections menu:

1) Click on Content tab;

2) Click on Menus 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

We have created a menu where the “Best Sellers” collection includes five other collections as its categories.

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.

All settings of block in theme editor

Setting	Description
Select menu	Select menu from the menu list and add your created subcollections menu.
Number of columns on desktop	Use the slider to select the number of collections to display in a single row. If there are more collections, they can be scrolled in slider by slider buttons.
Show image	Show collection image.
Image ratio	The “Image ratio” setting allows you to control how images are displayed on your website based on their width-to-height ratio. You have several options to choose from: Portrait: This option crops the images to use a 2:3 ratio, creating a taller appearance with a width that is 2/3 of its height. Square: This option crops the images to use a 1:1 ratio, creating a square-shaped display with equal width and height. Landscape: This option crops the images to use a 3:2 ratio, creating a wider appearance with a width that is 1.5 times the height.

Section padding

Setting	Description
Top padding	The “Top padding” setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The “Bottom padding” setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The “Top padding mobile” setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The “Bottom padding mobile” setting works similarly to the “Top padding mobile” setting, but controls the space at the bottom of the section for mobile devices.