Collection Page

The collection page is an essential part of your Shopify store, where customers can browse through the various collections of products you have available. This page should be organized intuitively to allow users to navigate through your product collections with ease, thus promoting an efficient shopping experience. Here's a guide to setting up a well-structured collection page.

Collection Banner

The Collection Banner section is usually displayed at the top of the collection page and is meant to introduce the collection to customers. By using the various section settings available, you can customize the collection banner to match your store's aesthetic.

Note
This section supports the transparent header effect. For more details, click here.

Collection Grid

This is the central part of the collection page where products are displayed for browsing. It consists of a product grid and filtering elements.

You can use the following settings to customize the grid:

  • Filter layout - Choose between three available placements for the product filters: Sidebar, Horizontal, or Drawer.
  • Products per row - Set the maximum number of products in one row. For instance, if set to 4, the theme may display 4 products per row on desktop devices and reduce to 3 products on smaller screens to accommodate the screen size.
  • Products per row (mobile) - Choose to display either 1 or 2 products per row on mobile devices.
  • Space between products - Optionally adjust the space between products. Defaults to the value set in Theme settings > Layout > Space between blocks.
  • Pagination type - Select either a classic pagination with numbers, or a "load more" button that adds more products to the grid when clicked.
  • Products per page - Decide the number of products to display per page, or how many extra products to load when using the "load more" pagination option.

Customizing Filters

To customize the product filters, you need to use the Shopify Search & Discovery app. For more information, click here.