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 Collection List Section
The Flex theme includes a 'Collection List' section which is available on the homepage. The 'Collection List' allows you to group and feature a set of Collections together displayed in a grid layout. The 'Collection List' section is similar to creating a 'sub collection' as it displays a subset of collections. However, for the 'Collection List' all of the collections are chosen within the theme editor to display as a section on your homepage.
The 'Collection List' section will allow for up to 8 Collections to display. Each collection block will allow you to select a collection. This collection will display it's 'collection image' by default, however, you can choose to upload an alternate image and an alternate collection title instead. Additionally, custom CSS and layout options can be included in this section for further flexibility.
In order to set up the Collection List section, click into Customize (your Theme Editor) > Sections > Add Section > Collection List.
Collection List Section Settings
The section settings determine the look and layout of this section!
Collections per row
Here you can choose how many collections you'd like to show per row. Choose from 2 - 5.
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.
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.
The layout settings include options to adjust the spacing and width in this section, and enable animation for when the Collection List section loads in.
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.
When enabled, the 'show gutter' setting will add space (margin) in between your collection content blocks. If you don't want space between the collections and want them to be flush with each other, you can disable this setting.
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
The 'animation' setting will determine how the section 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' 'slide in right,' and 'zoom in'.
In the advanced settings, you can add in your own CSS class and 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.
Content Block Settings
Collections are added as content blocks in the section. Within each content block, you can choose the collection, add an alternate collection image and heading, and decide on the button label for each collection's button.
- Collections per row - 5
- Show gutter - disabled
- Background opacity - 50%
- Width - wide
- Collections per row - 2
- Show gutter - enabled
- Background opacity - 0%
- Width - wide
When viewed on a mobile device, the 'Collection List' will stack vertically as a grid.