Supported Versions
The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.
In This Article
Collection Page Template in the Turbo Theme
The Turbo theme includes a highly flexible 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, and a 'sidebar' and 'sort by' to help your customers find the right item!
Collection Page Settings & Configuration
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.
Products per row
The 'products per row' setting lets you decide how many products you'd like to display per row on your Collections page. Choose from 2 to 5.
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.
Show collection title
On Collection pages, you have the option to hide or show the collection title! If enabled, the Collection title will appear at the top, 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. In this example, the breadcrumb links read as:
Home / Tops-Women / Page 1 of 1
So this shows the path of how we got to the 'Tops-Women' Collection. From the 'homepage', we clicked into the 'Tops-Women' collection. This is page 1 of 1. The 'breadcrumb links' will display at the top left of the collection page:
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).
Show top banner image/Banner Image
If you'd like your Collection page to display banner image at the top, you can enable the 'show top banner image' setting. By default, this will display the 'Collection image' as the banner image which is uploaded through the Collection's Admin Page.
If you do not have a 'Collection image' uploaded, you can 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.
In this first example, the Collection does have a 'Collection image' uploaded, so that is what will display as the 'banner image'.
In this second example, the Collection does not have a 'Collection image' uploaded, so you can then use the fallback 'banner image' setting in the theme editor to select a banner image:
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 your 'Collection title' enabled and have a 'busy' banner image as it will improve legibility!
Products per row on mobile
The 'products per row on mobile' setting is located in Customize > Theme Settings > Product Grid, and lets you decide if you'd like 1 image per row on mobile, or 2.
Pagination type
There are three 'pagination types' to choose from for your Collection pages: 'Page Links', 'Load More Products Button', and 'Infinite Scroll'. This setting is located in Customize > Theme Settings > Product Grid.
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.
Sidebar
You can enable a 'sidebar' on your Collection pages as well! The sidebar includes filters and lists to help your customers narrow down what they're looking for, and also gives you the option to input other content that you'd like users to see while on the Collection page!
View our article on the Collection Page Sidebar
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.
Align height of product images
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 height of product images' 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.
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.
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 secondary product image
The 'show secondary product image' setting can be enabled if you'd like an alternate product image to display when you hover over the thumbnail. Whatever alternate product image you'd like to be shown will be the second one uploaded in your Product's Admin Page.
Show sale banners
If any products are 'on sale', you can enable the 'show sale banners' setting to display a small banner/badge on the top right corner of the product thumbnail.
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
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! There are two different Quick Shop options: popup and inline.
If you enable the 'popup' quick shop style, a button will show up when a user hovers over product thumbnails images, where they can then click to open.
If you enable the 'inline' quick shop style, the product variants, add to cart and dynamic checkout button (if enabled) will appear below the product thumbnail image.
View our article on Turbo's Quick Shop
Examples
Here's how we set up the 'Collection Page' in our demo shops for Turbo!
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.
