Collection pages
Collections are pages that you create to group specific products together in categories. You can have automated 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.
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.
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:
|
Image shape | Choose one of the following image shapes for your product images:
|
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:
|
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.