The Collections list page displays all the collections set up for the Online Store sales channel on one page.
Template Settings
In the theme editor (Customize), use the page selector to open Collection list. In the left sidebar, open Collections to customize the template.
Collections per row
For horizontal rows of collections, use the Collections per row slider to specify the number of collections included in each row. The width of each collection block will reduce with more collections per row.
Collections per page
Use the Collections per page setting to control how many collections appear per page. Choose from 2 to 50 collections per page.
Pagination
Use the Pagination type dropdown to control how pagination is handled by the template. There are four pagination types to choose from: Infinite scroll, Infinite load more button, Load more button, and Page links.
Learn more about Flex's Pagination Options
Height
If your collection images vary in size and height, enable the Align to height setting to increase consistency. After that's enabled, you can 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 its collection page. Select the Primary, Secondary, or Link button style with the Button style dropdown.
Overlay
If you'd like some contrast between your collection image and the title and button on top, configure the Overlay settings.
Select a Background color and Text color. These should contrast one another for the best results.
Use the Background opacity slider to control the level of opacity (and transparency). Select a value closer to 1% for more transparency and a value closer to 100% for greater opacity. Disable the overlay by setting it to 0%.
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
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.
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
Limit or Reorder the Collections
There are two approaches for controlling the content and sequence of the collections on this page.
Replace with section
Customize the Collection list template with the theme editor to (1) conceal the default content, then (2) add a Collection list section to add the collections manually.
Code adjustment approach
To control and change the order of the Collection list page with a code adjustment, check out this article.