> 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/ira/collection-pages/product-grid.md).

# Product grid

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> Ira 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://github.com/fluorescent/kb-ira/blob/main/collection-pages/readme/theme-retirement.md).
{% 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](/ira/collection-pages/filters-and-sorting.md) options, and the pagination style.

{% hint style="info" %}
In the [Product listing](/ira/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. 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. Select the **Collections** template you wish to edit from the dropdown menu in the top bar.
2. Click the **Product grid** section to open the settings.
3. Select how many **Products per row** and **Products per page** to display.

   > The size of your product images will increase or decrease depending on the number of products per row.
4. 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.
5. 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.

   ![](/files/FAfTbG985emz2oT4gbzU)
6. Click **Save**.

</details>

<br>

***

> **Related links**
>
> [Collections template](/ira/collection-pages/collection-pages.md)\
> [Banner](/ira/collection-pages/banner.md)\
> [Filters and sorting](/ira/collection-pages/filters-and-sorting.md)