Flex templates: Collection (modern)

This template is available starting Flex version 5.5.0. For the Default collection template, check out our guide here.

Flex now includes an enhanced Collection page template called Collection (modern), designed to better organize and showcase your products with a new Filter drawer and updated customization settings. This template groups related products together, making it easier for customers to browse items within each collection.

The Default collection template  is assigned by default when you start adding Collections in your Shopify Admin. To use Collection (modern), you can assign this template to your collections within the Shopify Admin. 

Flex version 5.5.0 must be in a published state (live) in order for the "modern" template to appear in the Theme template options. 

Access collection page template

To access the Collection page settings, use the page selector to open Collections, then modern.

In the left sidebar, click Collection - modern to open the section settings.

Show breadcrumbs

Breadcrumb links are a list of links that show a customer what page they are on, and all the pages that are "above" that page in a store's content.

For example, the breadcrumb links read as:

Home - Bath

This shows the path of how the customer got to the 'Bath' collection: from the home page, to the 'Bath' collection. The 'breadcrumb links' will display at the top left of the collection page.

There are additional options for the breadcrumb links in the Elements portion of the Theme settings

Customize product settings

Adjust the number of products displayed within the collection page through the following options: 

Products per page can be set to up to 50 products. 

Products per row can be used to determine the quantity displayed per row - the higher the quantity, the smaller the image thumbnails will be, similarly, the lower the quantity, the larger the images. 

Additionally, this feature only applies to the Standard view. Compact view will always display 6 products per row in desktop. 

For mobile view, Products per row on mobile can be set to either 1 or 2 products per row. 

Product thumbnails control the size and proportions of product images on the collection page, helping create a more consistent appearance across all products. Available options include: 

• Adapt to image
• Portrait (2:3) 
• Portrait (4:5)
• Square (1:1)
• Landscape (3:2)

Filters and sorting 

Filters are customized via Shopify's Search & Discovery app.

The modern template includes a filter drawer with several available settings. 

Filter position can be set to either Left or Right and adjust the drawer's position accordingly. This also changes the position of the Grid layout controls to the opposite side. 

Show sort by toggle can enable / disable the Sorting options. If the Filters are enabled, the Sort by option will appear inside the drawer. However, if Filters are not displayed, the Sort by will take on a dropdown layout beside the Grid layout controls:

Show filters will enable / disable the Filters drawer. 

Show product count per filter will be displayed beside each filter option. For example, "Available (14)" under the Availability filter. 

Open filter groups by default determines if the filter tabs will be expanded or collapsed by default. 

Price range is also available within the Filters drawer if this option is added within your Search and Discovery app. 

Additional layout settings

Includes slider settings for Top spacing, Bottom spacing, and Grid spacing: