Collection pages

Collections are pages that you create to group specific products together in categories. You can have smart collections and manual collections.

By default, collection pages have a Collection banner section and a Product grid section in the theme editor.

Collection banner section settings

The Collection banner section displays the description and the featured image of the collection that's being viewed.

The settings for the Collection banner section on collection pages

Setting	Description
Show collection description	Displays the description of the collection.
Show collection image	Displays the collection image.
Color scheme	A set of colors that you can apply to this section. Learn more about color schemes.

Product grid section settings

The Product grid section displays the products that are included in the collection that's being viewed.

The settings for the Product grid section on collection pages

Setting	Description
Products per page	The number of products that you want to display on each page. Choose from multiples of 4, between 8 and 36.
Number of columns on desktop	Set the number of columns for the products to display across on desktop computers. Choose a number between 1 and 6.
Color scheme	A set of colors that you can apply to this section. Learn more about color schemes.
Image ratio	Set the image ratio for the featured images of the products that are displayed in the product grid. Choose from the following options: Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped. Portrait - Crops the images to use a 2:3 ratio. Square - Crops the images to use a 1:1 ratio.
Image shape	Choose one of the following image shapes for your product images: Default - Changes your product image into a rectangle shape. Arch - Curves the top of your product image. Blob - Rounds your product image into one of six random blob shapes that has a unique animation on hover. Chevron left - Changes your product image into a chevron shape that has a sharp bend to the left. Chevron right - Changes your product image into a chevron shape that has a sharp bend to the right. Diamond - Changes your product image into a four-sided diamond shape. Parallelogram - Changes your product image into a shape that has two pairs of parallel lines. Round - Rounds your product image into a circle or oval shape that has a unique animation on hover.
Show second image on hover	When a customer hovers their cursor over product images on a desktop computer, this option displays the second product image if the product has one.
Show vendor	Displays the vendor for each product.
Show product rating	Displays the average product rating in stars with the number of reviews in parentheses, for example: ★★★★★ (8). This also requires a product reviews app, and metafield definitions for reviews.rating_count and reviews.rating.
Quick add	If you activate the Quick add option, then your customers can add an item to their cart from the product card. Choose from the following options: None - No quick add feature is displayed. Standard - Displays one of the following quick add buttons on product cards: Add to cart - For single-variant products. When a customer clicks the button, the product is automatically added to their cart. Choose options - For products with variants. When a customer clicks the button, a pop-up dialog displays for them to make their variant selection and then proceed with the purchase. Bulk - Displays the Quick order list functionality.
Enable filtering	Select this option if you want your customers to have options for filtering the product grid.
Desktop filter layout	Set how your filters display on desktop computers. Choose from Horizontal, Vertical, or Drawer layout.
Enable sorting	Select this option if you want your customers to have options for sorting the display order of the products.
Number of columns on mobile	Set the number of columns for the products to display across on mobile devices. Choose 1 column or 2 columns.
Top padding	Set the amount of space at the top of the section.
Bottom padding	Set the amount of space at the bottom of the section.

As well as the Product grid section settings, you can also view and customize some of the Theme Settings for product cards, and you can add your own section-specific Custom CSS.