> 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.md).

# Collection page

Template

**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="/eclipse/collections/collection-page/banner.md#set-up-banner-content">Banner</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="/eclipse/collections/collection-page/banner.md#set-up-banner-image">Banner</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="/eclipse/collections/collection-page/product-grid.md#change-grid-layout">Product grid</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="/eclipse/collections/collection-page/filters-and-sorting.md">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="/eclipse/collections/collection-page/promotion-tiles.md">Promotion tiles</a></td></tr></tbody></table>