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.

The settings for the Collection banner section on collection pages
SettingDescription
Show collection descriptionDisplays the description of the collection.
Show collection imageDisplays the collection image.
Color schemeA 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
SettingDescription
Products per pageThe number of products that you want to display on each page. Choose from multiples of 4, between 8 and 36.
Number of columns on desktopSet the number of columns for the products to display across on desktop computers. Choose a number between 1 and 6.
Color schemeA set of colors that you can apply to this section. Learn more about color schemes.
Image ratioSet 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 shapeChoose 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 hoverWhen 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 vendorDisplays the vendor for each product.
Show product ratingDisplays 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 addIf 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 filteringSelect this option if you want your customers to have options for filtering the product grid.
Desktop filter layoutSet how your filters display on desktop computers. Choose from Horizontal, Vertical, or Drawer layout.
Enable sortingSelect this option if you want your customers to have options for sorting the display order of the products.
Number of columns on mobileSet the number of columns for the products to display across on mobile devices. Choose 1 column or 2 columns.
Top paddingSet the amount of space at the top of the section.
Bottom paddingSet 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.

Can’t find the answers you’re looking for? We’re here to help.