> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/lorenza/collection-pages/product-grid.md).
# Product grid
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](/lorenza/collection-pages/filters-and-sorting.md) options, and the pagination style.
{% hint style="info" %}
In the [Product listing](/lorenza/products/product-listings.md) 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).
{% endhint %}
### Change grid layout
Change the number of column and rows to customize the product grid layout.
STEPS
In your theme editor (**Customize**):
1. Click the **Product grid** section to open the settings.
2. Select how many **Products per row** to display using the slider.
> Choose between **2** and **4** products per row.
> Product image sizes will change according to the number of columns.
3. Select the **Number of columns on mobile**: Either 1 or 2 products per row.
4. Select how many **Mobile products per row** to display using the slider.
> Choose between **1** and **3** products per row.
5. To make your product images a uniform shape and size, click the **Theme settings** tab.
> Select the **Image aspect ratio** to crop your images to **Square**, **Landscape**, or **Portrait**.
>
> The default **Natural** setting will display the original orientation of your image.
6. Click **Save**.
### **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](/lorenza/product-pages/variant-options/variant-swatches.md) for setup instructions.
STEPS
In your theme editor (**Customize**):
1. Use the **Templates selector** to open the **Collections** template.
2. Click on the **Product grid** section to open the settings.
3. Under **Collection**, check the **Show swatches** option to reveal product options on hover.
4. Click **Save**.
### **Change pagination style**
Select a pagination style to change how customers navigate to additional rows of products.
STEPS
In your theme editor (**Customize**):
1. Click the **Product grid** section to open the settings.
2. Select the **Pagination** style to change how customers view additional rows of products.
> **Infinite**: rows of products automatically load as customers scroll down the collection page.
> **Click to load**: customers click a "Load more" button to reveal more products on the collection page.
> **Paginated**: customers navigate between numbered pages of products in the collection.
3. Click **Save**.
## 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**
>
> [Collections template](/lorenza/collection-pages/collection-pages.md)\
> [Banner](/lorenza/collection-pages/banner.md)\
> [Breadcrumbs](/lorenza/collection-pages/banner/breadcrumbs.md)\
> [Filters and sorting](/lorenza/collection-pages/filters-and-sorting.md)