Turbo includes a highly flexible Collection Page to organize and showcase your products. Collection pages display your products in a grid, along with additional controls for sorting, filtering, and more.
Set up your collection page by customizing the collection section settings and theme settings.
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 banner
To display a banner image at the top of the page, enable Show banner. By default, this will display the 'Collection image' as the banner image which is uploaded through the Collection's Admin Page.
Upload a fallback Banner image within the theme editor settings, as well. This fallback image will only display as the banner if there is no 'collection image' uploaded.
Include an alternate image for mobile devices by clicking Select Image below Mobile banner image.
Wide display
Enable Wide display to extend the section to the full width of the screen. Otherwise, the section will sit in a container on the page and not span the full width.
Mobile image cropping
Control how the banner image adapts to smaller, mobile containers by selecting an option from Mobile image cropping. Left, Center, and Right.
Text contrast technique
Increase contrast between the text and image by selecting an option from the Text contrast technique dropdown. The options are Darken banner image, Solid box, and Translucent box.
Show collection title
To include the collection's title on the page, enable Show collection title.
If enabled, the collection title will appear at the top and left-aligned by default. If you have a banner image enabled, the title will appear on top of the banner image, center aligned.
Show breadcrumb links
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.
Enable filtering by product tag
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.
Enable collection sorting
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).
Products per row
The Products per row setting controls how many products display per row on each collection page. Choose from 2 to 5.
Products per page
The Products per page setting controls how many products appear on the Collection page. Include any number of products between 2 (min) and 50 (max) for the collection page.
Collection Page Theme Settings
For more settings and features, open Theme settings, then Product grid.
Show vendor
To display the vendor name with your product thumbnail images, enable the Show vendor setting.
Show color swatches
If your products have color swatches, you can enable the 'show color swatches' setting to have them display below your product thumbnail images.
View our article on adding Color Swatches
Show product stickers
If any products are on sale, new, or sold out, enable the Show product stickers setting to display a small banner/badge on the top right corner of the product thumbnail.
Show product information on hover
By default, the Product information will appear when you hover over product thumbnail images on the Collections pages. Disable this setting to display the product information below the product thumbnail image.
Show secondary media on hover
Enable Show secondary media on hover for an alternate product image to display when customers hover their cursor over the image.
Align product images
Enable Align height of product images to match the height of all the thumbnail images. Then adjust the height with the Product image height slider.
Pagination type
There are three options for Pagination type to choose from: Page links, Load more products button, and Infinite scroll.
The Page links pagination type is a standard pagination style that includes the number of pages with prev/next arrows.
The Load more products button pagination type adds a button below your collection where you can click to load more products.
The Infinite scroll pagination type will continue to load products as you scroll further down the page. No need to click any buttons to load more/go to the next page.
Content Block Settings (Sidebar)
Enable a sidebar on your collection pages. The sidebar includes filter and list features to enhance your navigation and content.
View our article on the Collection Page Sidebar
Quick Shop
Enabling Quick Shop for your products allows customers to easily and quickly add a product to their cart without having to leave the page! There are two different Quick Shop options: popup and inline.
The Popup style is a modal window with customizable content.
The Inline style displays the product variants, add to cart, and dynamic checkout button below the product thumbnail image.
View our article on Turbo's Quick Shop
Mobile Layout
When viewed on a mobile device, if you have a 'sidebar' enabled, each content block will turn into a drop-down menu. The 'products per row' is determined by the 'Products per row on mobile' setting under Theme Settings > Product Grid, which will either be 1 or 2.
