Flex includes a robust Collection Page to organize and showcase your products. Collection pages gather products together and display the products included in that collection.
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 Section Settings
To access the Collection section settings, use the page selector to open Collections, then Default collection. In the left sidebar, click to open Collection.
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 - Spring Dresses
This shows the path of how the customer got to the 'Spring Dresses' collection: from the home page, to 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 Elements portion of the Theme settings
Show product tag filter
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).
Collection Sidebar Settings
Add a Sidebar to the side of the Collection page by enabling Show sidebar in the Collection settings, then adding blocks.
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.
Product thumbnails
The Product thumbnail settings include options for the images of your products on the Collection page.
Align to 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
Use the Products per row setting to control how many products you'd like to include in each horizontal row. You can choose between 2 - 7.
Products per row on mobile
For Products per row on mobile, select either 1 or 2.
Products per page
The Products per page setting controls 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.
Select either Wide or Standard for the Width of the section. Selecting Wide will spread this section out the full width of the window. Choosing Standard will keep the section in a container with a limited width.
Top spacing, bottom spacing
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.
Use the CSS class field to 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 settings refer to the images of your products on Collection pages. The settings for your thumbnail images are located in the Product grid portion of the Theme settings.
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.
Desktop only
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 page (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, coming soon, pre-order, new, bestseller, 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 provides customers with an easy and quick way to add products to their cart without having to leave the collection page. If you enable the feature, a quick shop button appears on cursor hover. Clicking this button reveals a modal window with a stripped-down version of the Product Page.
View our article on Flex's Quick Shop
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
To display a banner image, you can configure the Banner. By default, this will display the Collection image as the banner image which is uploaded through the Collections area of the Products admin.
Click to open the Banner section to customize its settings.
Show banner
To display the banner, you can check off the Show banner setting. This will display the Collection image by default.
Fallback image
For collections without a Collection image uploaded, include a Fallback image to display at the top of the Collection page. This image will display for each collection page assigned to the template.
Darken banner image
You can enable the Darken banner image setting to add a subtle overlay on top of your banner image. This comes in handy if you have a 'busy' banner image as it will improve legibility.
Subheading
When the banner is enabled, the Collection name will display as the main heading. You can add a Subheading as well if you'd like to add 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 spacing, bottom spacing
You can choose to add space (padding) above and below the banner container by adjusting the Top spacing and Bottom spacing settings.
Advanced
In the Advanced settings, you can add 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.
Add your CSS-formatted code to the Custom CSS field.
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 can either display at the top or the bottom of the collection by configuring the 'Mobile sidebar position' setting which was added in the 1.1.4 version update (located in Theme Settings > Mobile).
The 'products per row' is determined by the 'Products per row on mobile' setting.
