Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Sub-Collections Template
The Flex theme includes the ever popular sub-collections template to feature collections within a collection! This template is incredibly helpful when you want to have a page that lists certain collections, which your customers can then continue on to navigate through each collection that's listed.
The sub-collection template lets you feature a menu of collections. You can also choose to add products as well, or just have the collections display on their own.
The featured menu is determined by the sub-collection's name. In order for the menu to be connected to the collection page it will just need to have the same name.
Additionally, the sub-collections template includes a ton of settings to configure within your Theme Editor, including, but not limited to: the ability to add a top banner, promotional banner, sidebar, configure width and spacing layout options, and add in your own custom CSS directly in the theme editor.
In order to use the sub-collections template, the theme will need to be published! The templates from which you can select are limited to the templates available in your currently published theme.
If you are unable to currently publish your theme and would still like to set up the sub-collections template, we have instructions on how to access unpublished templates here.
Setting up the Sub-Collections Template
Create your sub-collection in the Admin
You'll need to first create a collection in your Shopify Admin. You'll then need to assign the 'collection.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 do that here now.
Create the menu for your sub-collection
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 your collections you'd like to feature as the menu items and then save your menu:
Add your sub-collection 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, head into your Main Menu.
Then, you can add the sub-collection has 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.
Sub-Collections Page Settings
The Sub-Collections Page Settings are divided into settings for the sub-collection itself, collection (if you also added products in addition to your list of collection), collection banner, and collection sidebar.
-
Sub-Collection Settings
These are the settings for the main sub-collections section of the page!
Show breadcrumbs
Breadcrumb links are a list of links that show a customer what page they are on, and all the pages that are "above" that page in a store's content. In this example, the breadcrumb links read as:
Home -> Apparel
So this shows the path of how we got to the 'Apparel' Sub-Collection. From the 'homepage', we clicked into the 'Apparel' sub-collection. The 'breadcrumb links' will display at the top left of the sub-collection page:
There are additional options for the breadcrumb links in the theme's 'Elements' settings. Under Customize > Theme Settings > Elements > Breadcrumbs, you can choose the 'capitalization,' 'separator' and 'size.'
Show promotional banner/Image
You can choose to enable a 'promotional banner' for your sub-collection page which will display at the top above the list of collections! The promotional banner settings allow you to add text and choose the height of the banner. In order to display the banner, you will need to check off the 'show promotional banner' setting! You can then choose your image to upload. We recommend an image that is 1800 by 800px.
Darken banner image
You can enable the 'darken banner image' setting to add a subtle overlay on top of your promotional banner image. This comes in handy if you have added text and have a 'busy' banner image as it will improve legibility!
Heading/Text
If you want text to appear on top of your promotional banner, you can enter content in the 'heading' and 'text' fields.
Banner height
You can select small, medium, or large for the height for the promotional banner.
Collections per row
Here you can choose how many collections you'd like to show per row. You can choose between 2 - 4.
Collections per row on mobile
For collections per row on mobile, you can choose either 1 or 2.
Align to height/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 images, which you can adjust with the 'collection image height' slider. This will help if your images look unaligned.
Button style
Each collection will have a button that links to the collection! Choose between your primary, secondary, and link button styles (which are configured under Theme Settings > Buttons).
Overlay/Overlay opacity/Text
If you'd like some contrast between your collection image and the title and button on top, you can configure the overlay settings!
You can select overlay and text colors from the color pickers and select the opacity as well – 0 is completely transparent (or invisible), while 100 is completely opaque.
Show collection title below imageIf you'd like the collection titles to appear below the images instead of on top, you can check off the show collection title below image setting.
Width
You can choose between 'wide' and 'standard' for the width of the sub-collections and the promotional banner. Selecting 'wide' will spread this promotional banner out full-width. Choosing 'standard' will keep it in a container and not spread the full-width.
Top/Bottom spacing
You can choose to add space (padding) above and below the sub-collection area by adjusting the 'top spacing' and 'bottom spacing' settings.
CSS Class/Custom CSS
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!
The 'Custom CSS' field is where you can add in the actual CSS code.
More information about using the Advanced CSS feature.
-
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. If you've added products, the 'collection' will appear below the list of collections.
Show product tag filter
The collection includes an option to enable a drop-down filter based on product tags that are included in the collection. When an option is selected, it will then filter the collection to display only the products that have that tag.
Show sort by filter
The collection also includes a drop-down 'sort by' with a few options that are built into the Shopify platform: featured, best selling, alphabetically (options for both a - z and z - a), price (both high - low and low - high), and date (both old - new, and new - old).
Align to height/Product image height
While we recommend uploading product 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 'product image height' slider. This will help if your images look unaligned.
Products per row
Here you can choose how many products you'd like to show per row. You can choose between 2 - 7.
Products per row on mobile
For products per row on mobile, you can choose either 1 or 2. Note: you the sub-collection also includes a 'collections per row on mobile' setting that you can configure under the Sub-collection sections settings.
Products per page
The 'products per page' setting allows you to choose how many products you'd like to appear per page. Depending on how many products you have and what to choose here, pagination will kick in! Choose from 2 to 50.
Width
You can choose between 'wide' and 'standard' for the width of this collection area. Selecting 'wide' will spread the collection area out full-width. Choosing 'standard' will keep it in a container and not spread the full-width.
Top/Bottom spacing
You can choose to add space (padding) above and below the collection area by adjusting the 'top spacing' and 'bottom spacing' settings.
CSS Class/Custom CSS
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!
The 'Custom CSS' field is where you can add in the actual CSS code.
More information about using the Advanced CSS feature.
-
Sub-Collection banner
These settings are for the banner that you can enable at the top of the Sub-Collection page. If you'd like your Sub-Collection page to display banner image at the top, you can configure the following settings. By default, this will display the 'Collection image' as the banner image which is uploaded through the Sub-Collection's Admin Page.
Show banner
To display the banner, you can check off the 'show banner' setting. This will display the 'Collection image' by default. If you do not have a 'Collection image' uploaded, the first product in the collection will display as the banner.
Image
If you'd like a different image to display at the top of your Collection pages, you can upload an alternate here.
Darken banner image
You can enable the 'darken banner image' setting to add a subtle overlay on top of you banner image. This comes in handy if you have have a 'busy' banner image as it will improve legibility!
Subheading
When the banner is enabled, the Sub-Collection title will display as the main heading. You can add a 'subheading' as well if you'd like to add in more text on top of your 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 sub-collection banner image.
Top/Bottom spacing
You can choose to add space (padding) above and below the sub-collection banner by adjusting the 'top spacing' and 'bottom spacing' settings.
CSS Class/Custom CSS
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!
The 'Custom CSS' field is where you can add in the actual CSS code.
More information about using the Advanced CSS feature.
-
Collection Sidebar Settings
A Sidebar can be added to the left side of the Sub-Collection page by clicking into the 'Collection sidebar' settings in the theme editor while on your Sub-Collection page. Simply check off the 'Show sidebar' setting. The sidebar content can be built by clicking 'Add content' and making selections from the list.
The sidebar content options are:
- Collection list
- Custom HTML
- Featured promotion
- Menu
- Page
- Search form
- Tag filter
- Tag list
- Text
- Type list
- Vendor list
In addition to adding the content, you can also include custom CSS for the sidebar specifically under the advanced settings!
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!
The 'Custom CSS' field is where you can add in the actual CSS code.
Mobile Layout
When viewed on a mobile device, depending on what you've chosen for the 'collections per row on mobile' setting, the collections will stack vertically either 1 or 2 per row.
If you added products to the sub-collection in addition to your list of collections, the 'products per row on mobile' setting will allow you to either have 1 or 2 products per row. If you have a 'sidebar' enabled, it will display at the bottom of the sub-collection.