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.
In This Article
- Collection Page Settings
- Product Thumbnail Images
- Collection Banner Settings
- Collection Sidebar Settings
- Examples
- Mobile Layout
Collection Page Template in the Flex Theme
The Flex heme includes a robust Collection Page to organize and showcase your products! Collections are categories that your items can be sorted into, and display product images in that collection as a gallery where then customers can click into to view specific Product pages.
The default 'Collection' template is assigned by default when you start adding Collections in your Shopify Admin. This default template will appear as 'collection' in your Collection Admin Page under Theme Templates> Collection Template:
Within the Collection page, you can update products per row on desktop and mobile, select how many products you'd like to be displayed per page, choose what and where the product information is shown for each product thumbnail, enable a 'quick shop' for easy purchasing, collection and promotional banners, a 'sidebar' and 'sort by' to help your customers find the right item, and even add in custom CSS!
Collection Page Settings
The settings determine the information and layout of what's displayed on your Collection pages! You can locate these settings by heading into Customize > choose 'Collection Pages' in the drop-down page selector. Your theme editor on the left will then update with the collection page settings.
Breadcrumbs and Filters
You can enable the breadcrumb links and the drop-down tag and sort by filters for your collection here.
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. In this example, the breadcrumb links read as:
Home - Spring Dresses
So this shows the path of how we got to the 'Spring Dresses' Collection. From the 'homepage', we clicked into the 'Spring Dresses' collection. The 'breadcrumb links' will display at the top left of the collection page:
There are additional options for the breadcrumb links in the theme's 'Elements' settings. Under Customize > Theme Settings > Elements > Breadcrumbs, you can choose the 'capitalization,' 'separator' and 'size.'
Show product tag filter
The Collection page includes an option to enable a drop-down filter based on product tags that are included in the collection. When an option is selected, it will then filter the collection to display only the products that have that tag.
Show sort by filter
Collection pages also include a drop-down 'sort by' with a few options that are built into the Shopify platform: featured, best selling, alphabetically (options for both a - z and z - a), price (both high - low and low - high), and date (both old - new, and new - old).
Promotional banner
You can choose to enable a 'promotional banner' for your collection page which will display at the top! The promotional banner settings allow you to add text and choose the height of the banner.
Show promotional banner/Image
In order to display the banner, you will need to check off the 'show promotional banner' setting! You can then choose your image to upload. We recommend an image that is 1800 by 800px.
Darken banner image
You can enable the 'darken banner image' setting to add a subtle overlay on top of your promotional banner image. This comes in handy if you have added text and have a 'busy' banner image as it will improve legibility!
Heading/Text
If you want text to appear on top of your promotional banner, you can enter content in the 'heading' and 'text' fields.
Banner height
You can select small, medium, or large for the height for the promotional banner.
Product thumbnails
The product thumbnail settings include options for the images of your products on Collection pages!
Align to height/Product image height
While we recommend uploading product images that are the same size and orientation for consistency, you might have some that are a little different in size! If you enable the 'align to height' setting, this will match the height of all the thumbnail images, which you can adjust with the 'product image height' slider. This will help if your images look unaligned.
Products per row
Here you can choose how many products you'd like to show per row. You can choose between 2 - 7.
Products per row on mobile
For products per row on mobile, you can choose either 1 or 2.
Products per page
The 'products per page' setting allows you to choose how many products you'd like to appear on the Collection page. Depending on how many products you have and what to choose here, pagination will kick in! Choose from 2 to 50.
Pagination type
There are four pagination options included to view/load more products. The pagination types to choose from are: infinite scroll, infinite load more button, load more button, and page links.
View our article on pagination options in the Flex theme
Layout
The layout settings include options to adjust the spacing and width for the Collection page.
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.
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
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.
Product Thumbnail Images
'Product Thumbnail Images' refers to the images of your products on Collection pages! The settings for your thumbnail images are located in Customize > Theme Settings > Product Grid.
Show secondary product image on hover
If you'd like the product thumbnail image to switch to the secondary product image on hover, you can enable this setting. Please note that this will only apply on desktop.
Show vendor
If you'd like to display the vendor/brand name on your product thumbnail images, you can enable the 'show vendor' setting.
Show product information on hover
By default, the 'product information' will appear when you hover over product thumbnail images on the Collections pages (and 'Featured Collection' sections). You can, however, disable this setting so the 'product information' displays below the product thumbnail image. Simply uncheck the 'show product information on hover' setting.
Text alignment
If your product information displays below the thumbnail image, you can adjust the text alignment. Choose from left, center or right. The text alignment does not apply if 'show product information on hover' is enabled.
Quickshop Button style
If you have the 'Quick Shop' enabled, a button will appear on your product thumbnail image to open it up. You can choose between your 'primary' and 'secondary' button styles (which are configured under Theme Settings > Buttons).
Show sale stickers
If any products are on sale or in coming soon, pre-order, new, best seller, or staff picks collections, you can display product stickers by enabling the 'show sale stickers' setting. This will display a small sticker on the product thumbnail image.
Shape
If you have the product/sale stickers enabled, you can select them to display as 'square' or 'round.'
Position
You can select the position of your sale stickers. They can display top left, top right, bottom left, or bottom right on the product thumbnail image.
Show color swatches
If your products have color swatches and want to display them underneath the product thumbnail images, you can check off the 'show color swatches' setting.
Color swatch style
The color swatches can either be displayed as 'square' or 'circle'.
Quick Shop
Enabling the 'Quick Shop' for your products allows customer to easily and quickly add a product to their cart without having to leave the page! If you enable the 'Quick Shop' an option will show up when you hover over product thumbnails on Collections.
View our article on Flex's Quick Shop
Reviews: Display star rating on product listings
If you have product reviews enabled, you can display the star rating on your Collection pages as well. If you have the product information displaying on hover, the star rating will also appear on hover. If you have the product information displaying below the thumbnail images, the star rating will also appear underneath.
Collection Banner Settings
If you'd like your Collection page to display banner image at the top, you can configure the collection banner settings. By default, this will display the 'Collection image' as the banner image which is uploaded through the Collection's Admin Page.
Show banner
To display the banner, you can check off the 'show banner' setting. This will display the 'Collection image' by default. If you do not have a 'Collection image' uploaded, the first product in the collection will display as the banner.
Image
If you'd like a different image to display at the top of your Collection pages, you can upload an alternate here.
Darken banner image
You can enable the 'darken banner image' setting to add a subtle overlay on top of you banner image. This comes in handy if you have have a 'busy' banner image as it will improve legibility!
Subheading
When the banner is enabled, the Collection title will display as the main heading. You can add a 'subheading' as well if you'd like to add in more text on top of your banner image.
Layout
The layout settings include options to adjust the spacing, width and height for the banner image.
Width
You can choose between 'wide' and 'standard' for the width of this banner. Selecting 'wide' will spread the banner out full-width. Choosing 'standard' will keep the banner in a container and not spread the full-width.
Banner height
You can select small, medium, or large for the height for the collection banner image.
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
Advanced
In the advanced settings, you can add in your own CSS class and custom CSS for the banner image.
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.
Collection Sidebar Settings
A Sidebar can be added to the left side of the Collection page by clicking into the 'Collection sidebar' settings in the theme editor while on your Collection page. Simply check off the 'Show sidebar' setting. The sidebar content can be built by clicking 'Add content' and making selections from the list.
The sidebar content options are:
- Collection list
- Custom HTML
- Featured promotion
- Menu
- Page
- Search form
- Tag filter (View our article on the multi-tag filter)
- Tag list
- Text
- Type list
- Vendor list
In addition to adding the content, you can also include custom CSS for the sidebar specifically under the advanced settings!
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.
Examples
Example 1
Settings
- Show breadcrumbs - enabled
- Show product tag filter - enabled
- Show sort by filter - enabled
- Products per row - 3
- Width - standard
- Top/Bottom spacing - 40px
- Collection banner - enabled
- Darken banner image - enabled
- Width - wide
- Banner height - medium
Example 2
Settings
- Show breadcrumbs - enabled
- Show product tag filter - enabled
- Show sort by filter - enabled
- Products per row - 3
- Width - standard
Mobile Layout
When viewed on a mobile device, if you have a 'sidebar' enabled, it will display at the bottom of the collection. The 'products per row' is determined by the 'Products per row on mobile' setting.
