# Product grid

The product grid displays the collection's products with filter options.

* Customize the layout, number of columns, and product image shape
* Change the pagination style
* You can also customize [Filters and sorting](https://help.fluorescent.co/stiletto/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/stiletto/products/product-listings). These settings apply to all product cards sitewide.
{% 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. Select the **Number of columns** and **Rows** of products on desktop.

   > Choose between **3** to **4** columns and **3** to **10** rows of products.

   > Product image sizes will change according to the number of columns.
2. Select the **Number of columns on mobile**: Either 1 or 2 products per row.
3. 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.
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://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
6. Under **Section styles**, set the **Top divider** to **Solid** if you want to show a border line above the product grid.
7. Click **Save**.

</details>

&#x20;

`Click Product grid section to find settings`

<table><thead><tr><th width="257">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td><p>Choose how many products to show per row on desktop screens: either 2, 3, 4, or 5 columns. </p><p></p><p>Product image sizes will change according to the number of columns. On smaller screens, the product grid may show fewer columns to adapt to the window width.</p></td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Choose how many products to show per row on mobile screens: either 1 or 2 columns.</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>

### **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="179">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>

## Customize product listing styles

***

To customize the product card styles, you can change the [product listing settings](https://help.fluorescent.co/stiletto/products/product-listings). These settings change all product cards across your site, including in featured collection and product recommendation sections.

In your theme editor, go to **Theme settings > Product listings** to customize the style and features of product cards.

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Product card details</strong></mark></td><td>Show vendor, swatches, chips, border, and rating stars.</td><td><a href="../../products/product-listings/product-card-style#product-card-details">#product-card-details</a></td></tr><tr><td><mark style="color:blue;"><strong>Product image styles</strong></mark></td><td>Change image shape and show secondary image on hover.</td><td><a href="../../products/product-listings/product-card-style#product-card-images">#product-card-images</a></td></tr><tr><td><mark style="color:blue;"><strong>Product badges</strong></mark></td><td>Show sale, sold-out, and custom badges.</td><td><a href="../products/product-badges">product-badges</a></td></tr><tr><td><mark style="color:blue;"><strong>Quick shopping</strong></mark></td><td>Show Quick view or Quick add button.</td><td><a href="../products/quick-view">quick-view</a></td></tr><tr><td><a href="../products/prices-and-discounts"><strong>Prices and discounts</strong></a></td><td>Change how prices and discounts are displayed.</td><td><a href="../products/prices-and-discounts">prices-and-discounts</a></td></tr></tbody></table>

#### Section style

<table><thead><tr><th width="204">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Enable animation</td><td>Choose whether to display visual effects when scrolling, hovering, or interacting with the section.<br><br>See the <a href="../theme-styles/animation">Animation guide</a> to learn more.</td></tr><tr><td>Top divider</td><td>Show a solid border above the section to visually separate it from other sections.<br><br>The Top divider uses the <strong>Lines and borders</strong> color selected in the <a href="../theme-styles/colors">theme color settings</a>.</td></tr></tbody></table>

***

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