# Collection page

**Collection pages** display the products in your collections in a grid. Edit the **Collection template** to customize the content and style of collection pages.

* Set up a **banner** with an image and description
* Customize the **product grid layout**
* Customize the **filter bar**'s options and styles
* Insert custom promotion tiles within the product grid

### Collection banner

***

The banner section appears at the top of the page. It displays the collection title, description, and optional background image.

<table data-card-size="large" 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>Banner headings</strong></mark></td><td>Customize the appearance and alignment.</td><td><a href="banner#set-up-banner-content">#set-up-banner-content</a></td></tr><tr><td><mark style="color:blue;"><strong>Banner image</strong></mark></td><td>Add and customize the background image.</td><td><a href="banner#set-up-banner-image">#set-up-banner-image</a></td></tr></tbody></table>

### Product grid

***

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

<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>Grid layout</strong></mark></td><td>Choose the layout and style.</td><td><a href="product-grid#change-grid-layout">#change-grid-layout</a></td></tr><tr><td><mark style="color:blue;"><strong>Sorting and filtering</strong></mark></td><td>Enable sort and filter options.</td><td><a href="collection-page/filters-and-sorting">filters-and-sorting</a></td></tr><tr><td><mark style="color:blue;"><strong>Promotion tiles</strong></mark></td><td>Insert promotional tiles in the product grid.</td><td><a href="collection-page/promotion-tiles">promotion-tiles</a></td></tr></tbody></table>