# Product grid

The product grid displays the collection's products with filter options. Click the **Product grid** section to find settings.

* Display products as a **Grid** or **List**
* Customize the **number of columns and rows**
* Enable the **Display mode switcher**
* Change the **pagination** style
* You can also customize [Filters and sorting](https://help.fluorescent.co/cornerstone/collection-pages/filters-and-sorting) options

{% hint style="info" %}
To customize the style and options of the product cards, go to Theme settings > [Product listings](https://help.fluorescent.co/cornerstone/products/product-listings). These settings apply to all product cards sitewide.
{% endhint %}

## Display product grid or list

***

In the **Product grid** section settings, choose a default display mode for the collection:

* **Grid** displays products in multiple columns per row
* **List** displays one product per row.

### Display mode switcher

***

Enable the **Display mode switcher** to allow visitors to switch between the **Grid** and **List** views.

 

`Click Product grid section to find settings`

<table><thead><tr><th width="201">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable display mode switcher</mark></td><td>Allow visitors to change how products are displayed in the grid. Visitors can click the Grid or List icon next to the sorting options.</td></tr><tr><td><mark style="color:blue;">Default display</mark></td><td>Choose the display mode used when the collection page first loads. Select either <strong>Grid</strong> or <strong>List</strong>.</td></tr></tbody></table>

&#x20;

### Change grid layout

***

For the **Grid** layout, change the number of column and rows.

&#x20;

`Click Product grid section to find settings`

<table><thead><tr><th width="195">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Choose how many products to show per row on desktop screens: either 2, 3, 4, or 5 columns. Product image sizes will change according to the number of columns.<br><br>On smaller browser sizes, the product grid may show fewer columns to adapt to the window width.</td></tr><tr><td><mark style="color:blue;">Number of rows on desktop</mark></td><td>Choose how many rows of products to display on a single results page. Additional rows of products will appear on multiple pages.</td></tr><tr><td><mark style="color:blue;">Show total number of results</mark></td><td>Choose to display the number of products in the collection or that appear with the current filter options.</td></tr></tbody></table>

&#x20;

### **Change pagination style**

***

Select a pagination style to change how customers navigate to additional rows of products. Collection pages show a maximum of 25 products.

<details>

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

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

1. Click on 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>

&#x20;

`Click Product grid section to find settings`

<table><thead><tr><th width="153">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Pagination</mark></td><td>Select one of three pagination styles for viewing additional products.<br><br><strong>Infinite</strong>: Rows of products automatically load as customers scroll down the collection page. <br><strong>Click to load</strong>: Click a "Load more" button to reveal more products on the collection page.<br><strong>Paginated</strong>: Click to navigate between multiple pages of products in the collection.</td></tr></tbody></table>

<br>

***

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