# Product grid

In the collection template, you can customize the layout and style if the product grid.

> You can also add [promotion tiles](https://help.fluorescent.co/eclipse/collections/collection-page/promotion-tiles) and customize [sorting and filtering](https://help.fluorescent.co/eclipse/collections/collection-page/filters-and-sorting).

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Fy34nUPKzuTdwBxXtm4Lb%2Fproduct-grid.jpg?alt=media&#x26;token=8dcb96e0-41be-4d16-be58-9faab11974ac" alt="" width="188"><figcaption><p>Product grid with promotion tile</p></figcaption></figure>

## Customize section styles

***

Click the banner section to edit the general **section styles** for colors and spacing, available in all sections:

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Color scheme</strong></td><td><a href="../../../sections/overview/section-styles#color-scheme">#color-scheme</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F3XSH2rw2Xl7gRoMb34up%2Fsection-colors.jpg?alt=media&#x26;token=ccb376a8-d35b-4822-9bb0-5de9a0eb5ae6">section-colors.jpg</a></td></tr><tr><td><strong>Section width</strong></td><td><a href="../../../sections/overview/section-styles#section-width">#section-width</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FDCCYMn4K3pSbVR42zVAF%2Fsection-width.jpg?alt=media&#x26;token=68dd352f-bb69-4220-87a0-6a1c733d909c">section-width.jpg</a></td></tr><tr><td><strong>Section padding</strong></td><td><a href="../../../sections/overview/section-styles#section-padding">#section-padding</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FoZCVax7FX1rLehRaYU5Y%2Fsection-padding.jpg?alt=media&#x26;token=3dbb23bd-4ab6-4874-8834-941a671e5cec">section-padding.jpg</a></td></tr></tbody></table>

## Change grid layout

***

Change the **number and layout of products**. You can also display the **number of product results**.

&#x20;

`Click Product grid section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Products per page</mark></td><td>Set the maximum number of products to display per page.</td><td><strong>1-50</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 20</mark></td></tr><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Select the number of products per row on desktop screens.</td><td><strong>2</strong><br><strong>3</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>4</strong></td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Select the number of products per row on mobile screens.</td><td><strong>1</strong><br><strong>2</strong> <em><mark style="background-color:yellow;">Default</mark></em></td></tr><tr><td><mark style="color:blue;">Show total number of results</mark></td><td>Display the total number of products in the collection.</td><td><mark style="background-color:yellow;">Default: Enabled</mark></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/eclipse/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, and rating stars.</td><td><a href="../../../products/product-listings/product-card-styles#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-styles#product-card-images">#product-card-images</a></td></tr><tr><td><mark style="color:blue;"><strong>Product badges</strong></mark></td><td>Show sale and sold-out badges.</td><td><a href="../../products/product-listings/badges">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/product-listings/quick-shopping">quick-shopping</a></td></tr></tbody></table>