Flex Guide: Collection List Section

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.

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.

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.

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! Within these settings, you can also choose to show the collection title below the image.

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.

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:

Layout

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.

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.

Show gutter

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.

Top/Bottom spacing

You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.

Animation

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'.

Advanced

In the advanced settings, you can add in your own CSS class and custom CSS.

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.
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.