> 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/eclipse/collections/collection-page/product-grid.md).

# Product grid

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

> You can also add [promotion tiles](/eclipse/collections/collection-page/promotion-tiles.md) and customize [sorting and filtering](/eclipse/collections/collection-page/filters-and-sorting.md).

<figure><img src="/files/38ZMJGdXoluBptRRkbPr" 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="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td><a href="/files/OZ4h4v0qfTnncw43MKk6">/files/OZ4h4v0qfTnncw43MKk6</a></td></tr><tr><td><strong>Section width</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td><a href="/files/lMLsRWOpgxDLC0CvtnAt">/files/lMLsRWOpgxDLC0CvtnAt</a></td></tr><tr><td><strong>Section padding</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding</a></td><td><a href="/files/3ddmAtuVNo9MtYTf38ov">/files/3ddmAtuVNo9MtYTf38ov</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](/eclipse/products/product-listings.md). 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="/pages/x01s1vsbkaTmrz5vMCTM#product-card-details">/pages/x01s1vsbkaTmrz5vMCTM#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="/pages/x01s1vsbkaTmrz5vMCTM#product-card-images">/pages/x01s1vsbkaTmrz5vMCTM#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="/pages/lHkYr8Pi1m4nEvlL00o4">/pages/lHkYr8Pi1m4nEvlL00o4</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="/pages/8QM9MhSVD7IyUm1qmdWk">/pages/8QM9MhSVD7IyUm1qmdWk</a></td></tr></tbody></table>