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

{% hint style="info" %}
In the [Product listing](https://help.fluorescent.co/spark/products/product-listings) settings, you can edit the style of product cards site-wide. Go to Theme settings > Product listing to show product 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 **Columns per row** and **Products per page** to display using the sliders.

   > Product image sizes will change according to the number of columns.
3. 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://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.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>

<br>

***

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