Product grid
Collection pages
In the Product grid settings, you can customize the grid layout by changing the number of columns and changing the aspect ratio (shape) of your product images. You can also customize Filters and sorting options, and the pagination style.
In the Product listing settings, you can edit the style of product cards site-wide. Go to Theme settings > Product listing to show custom badges, a secondary image on hover, and crop product images to a single aspect ratio (shape).
Change grid layout
Change the number of column and rows to customize the product grid layout.
Show swatches
Show color swatches on your product when a user hovers over them. In order to show swatches, you need to set up the product swatches feature. See the variant swatches guide for setup instructions.
Change pagination style
Select a pagination style to change how customers navigate to additional rows of products.
Settings reference
Click the Product grid section to find the following settings.
Setting | Description |
---|---|
Show swatches | Show color swatches on your product when a user hovers over them. In order to show swatches, you need to set up the product swatches feature. See the variant swatches guide for setup instructions. |
Products per row | Choose how many products should be displayed per row. Either 2, 3, or 4. |
Mobile products per row | Choose how many products should be displayed per row on mobile devices. Either 1, 2, or 3. |
Products per page | Choose how many products should be displayed per page. Choose anywhere between 12, 24, and 36. |
Image aspect ratio | Crop the shape of your product images to Square, Landscape, or Portrait. Choose Natural to display the original image shape. |
Pagination | Choose how customers navigate additional rows of products. Either Infinite, Click to load, or Paginated. |
|
Related links
Last updated