# Product grid

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> | Context is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/context/readme/theme-retirement).
{% endhint %}

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/context/collection-pages/filters-and-sorting) options, and the pagination style.

### Change grid layout

Change the number of column and rows to customize the product grid layout. You can select a pagination style to change how customers can navigate to additional pages of products.

<details>

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

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

1. Click on the **Collection product grid** section to open the settings.
2. If you have Variant swatches enabled, choose to display those variant options as swatches.

   > Swatches appear when the image is hovered over.
3. Use the sliders to set how many **Products per row** and **Products per page** to display.

   > The size of your product images will change depending on the number of products per row.
4. To make your product images a uniform shape and size, 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://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
5. Select the **Pagination** style to change how customers navigate 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.
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/context/product-pages/variant-swatches) for setup instructions.

<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://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%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://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%2Fuploads%2Fgit-blob-ef76be441ed6e0a38dc65c8d55ae86228d3efce2%2Fcollections-swatches-setting.jpeg?alt=media)
4. Click **Save**.

</details>

<br>

***

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