# 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](https://help.fluorescent.co/lorenza/collection-pages/filters-and-sorting) options, and the pagination style.

{% hint style="info" %}
In the [Product listing](https://help.fluorescent.co/lorenza/products/product-listings) 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.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

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.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
6. Click **Save**.

</details>

### **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](https://help.fluorescent.co/lorenza/product-pages/variant-options/variant-swatches) for setup instructions.

![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-206ef55e0a9c0a695eab30a672f631d718213fad%2Fcollections-swatches-hover.jpeg?alt=media)

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Use the **Templates selector** to open the **Collections** template.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-cec032cef6d27d7b8ef60956e2046d48a4dd80d8%2Fshopify-pages-dropdown.jpeg?alt=media)
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.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-ef76be441ed6e0a38dc65c8d55ae86228d3efce2%2Fcollections-swatches-setting.jpeg?alt=media)
4. Click **Save**.

</details>

### **Change pagination style**

Select a pagination style to change how customers navigate to additional rows of products.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

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**.

</details>

## Settings reference

Click the **Product grid** section to find the following settings.

| Setting                 | Description                                                                                                                                                                                                                                                                        |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Show swatches           | <p>Show color swatches on your product when a user hovers over them.<br><br>In order to show swatches, you need to set up the product swatches feature. See the <a href="../product-pages/variant-options/variant-swatches">variant swatches guide</a> for setup instructions.</p> |
| 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.                                                                                                                                                                           |
| <p><br></p>             |                                                                                                                                                                                                                                                                                    |

***

> **Related links**
>
> [Collections template](https://help.fluorescent.co/lorenza/collection-pages/collection-pages)\
> [Banner](https://help.fluorescent.co/lorenza/collection-pages/banner)\
> [Breadcrumbs](https://help.fluorescent.co/lorenza/collection-pages/banner/breadcrumbs)\
> [Filters and sorting](https://help.fluorescent.co/lorenza/collection-pages/filters-and-sorting)