Flex includes a Collection List section to enhance pages. This section showcases a set of collections together displayed in a grid layout. Similar to creating a subcollection, gather and combine collections together using this dynamic section.
Add this section to the
Section Settings
Click the Collection list section to open its general settings.
Collections per row
Select how many Collections per row to include using the provided slider. Choose between 2 to 5.
Align to height/Collection image height
If your collection images vary in size and height, enable the Align to height setting in order to align them. Then adjust the height for the collection images anywhere from 200 - 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.
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.
Select Background and text colors from the color pickers and select the opacity, as well. 0 is completely Transparent (or invisible), while 100 is fully opaque.
To have the collection titles appear below the images instead of on top, enable Show collection title below image.
Width
The width can either be set to Standard or Wide. Selecting Wide will spread out the full width of the screen. Selecting Standard will keep the section in a container and not spread the full width.
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 feature appears as it loads. 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.
Custom CSS
Add Custom CSS to the feature for further tweaking. You can even create your own CSS class here, as well. Check out this article for more information: Flex Guide: Custom CSS Feature
Content Block Settings
Collections are added as content blocks in the section. Click one of the preloaded Collection blocks to customize it.
Click Select collection to connect the collection for the block.