Flex includes a Subcollections template to showcase collections within another collection.
Use the subcollection template to assemble a menu of collections on a collection page. The template can include the collection's products or exclude them to serve as a dedicated index page for select collections.
For an alternative approach for creating subcollections, combine a Collection list section with a dedicated collection page template
Create the Collection in the Admin
First, create a collection in your Shopify Admin. You'll then need to assign the sub-collections template to it under Theme templates.
Once you've done that and you have the name of your collection, you'll then need to create the menu. Note: If you want to add any products in addition to the list of collections, you can also add them here.
Create the Menu for the Subcollection
To create the menu for your sub-collection, head into Online Store > Navigation > Add Menu.
You must call the menu the same name as your sub-collection.
In this example, since our sub-collection is called Apparel, the menu will also need to be called Apparel. You can then add the collections you'd like to feature as the menu items and then save your menu.
Add your subcollection to your main menu
Next, if you'd like your sub-collection to be accessible through your main menu, you can then add it as a menu item (either as a top-level menu item, or a drop-down).
Within your Navigation page in the admin, open your Main Menu.
Then, you can add the sub-collection as a top-level menu item, or as a drop-down menu item and save your menu
Once you've completed those steps, you'll then be able to view your Sub-Collections page on your storefront.
Subcollections Page Settings
Use the page selector to open Collections, then subcollections to access the template.
In the left sidebar, open Sub collections to access general settings.
Collections per row
Control the number of collections displayed in a row for desktop by adjusting Collections per row (2, 3, or 4). Control the mobile display separately with the Collections per row on mobile (1 or 2).
Collection image height
While we recommend uploading collection images that are the same size and orientation for consistency, you might have some that are a little different in size. If you enable the Align to height setting, this will match the height of all the thumbnail images, which you can adjust with the Collection image height slider.
Button style
Select either Primary or Secondary for the button style.
Collection overlay
Select an Overlay color, then use the Overlay opacity slider to control the level of transparency.
Include a Banner Image
To display a banner image, you can configure the Banner. By default, this will display the Collection image as the banner image which is uploaded through the Collections area of the Products admin.
Click to open the Banner section to customize its settings.
Show banner
To display the banner, you can check off the Show banner setting. This will display the Collection image by default.
Fallback image
For collections without a Collection image uploaded, include a Fallback image to display at the top of the Collection page. This image will display for each collection page assigned to the template.
Darken banner image
You can enable the Darken banner image setting to add a subtle overlay on top of your banner image. This comes in handy if you have a 'busy' banner image as it will improve legibility.
Subheading
When the banner is enabled, the Collection name will display as the main heading. You can add a Subheading as well if you'd like to add more text on top of your banner image.
Layout
The Layout settings include options to adjust the Spacing, Width, and Height for the banner image.
Width
You can choose between Wide and Standard for the width of this banner. Selecting Wide will spread the banner out full-width. Choosing Standard will keep the banner in a container and not spread the full width.
Banner height
You can select Small, Medium, or Large for the height for the collection banner image.
Top spacing, bottom spacing
You can choose to add space (padding) above and below the banner container by adjusting the Top spacing and Bottom spacing settings.
Advanced
In the Advanced settings, you can add your own CSS class and custom CSS for the banner image.
More information about using the Advanced CSS feature.
In the CSS class field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well.
Add your CSS-formatted code to the Custom CSS field.
Collection Settings
These are the settings for if you've chosen to add products to the sub-collection in addition to the list of collections. These are controlled with the same settings for the default collection page.