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 Collections List Page
By default, you’ll have a Collections List page (a.k.a /collections in your URL) on your storefront that will list all of your “Product Collections”. On the Collections List page, any collection that you create through your Shopify Admin gets added here.
If you'd like to control and change the order of the Collections List page, check out this article.
The Collections List page and the Collections List homepage section are quite similar. However, the Collections List page will list all collections, whereas you get to pick and choose the collections in the homepage section.
Still, the Collections List page is a great way for your customers to view and access all of the collections in your shop!
Within the Flex theme, there are settings to configure the layout, collection overlay and spacing of this page, as well as options to add in your own custom CSS.
In order to access the Collections List you can head into the Theme Editor (Customize) > Select “Collections List” from the drop-down page selector. Your theme editor on the left will then update with the page settings.
Collections List Page Settings
Collections per row
Here you can choose how many collections you'd like to show per row. Choose from 2 - 4.
Collections per page
The ‘collections per page' setting allows you to choose how many collections you'd like to appear per page. Depending on how many collections you have and what to choose here, pagination will kick in! Choose from 2 to 50.
Align to height/Collection image height
If your collection images vary in size and height, you can enable the 'align to height' setting in order to align them. After that's enabled, you can then adjust the height for the collection images anywhere from 200px - 400px with the 'collection image height' slider.
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: Background/Background 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 background 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 image
If 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 this section. Selecting 'wide' will spread this section out full-width. Choosing 'standard' will keep the section in a container and not spread the full-width.
Top/Bottom spacing
You can choose to add space (padding) above and below the section 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
Mobile Layout
When viewed on a mobile devices, the Collections List page will resize to fit your screen. The collections will stack vertically, 1 per row.
