# 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="/pages/cBxJK7vCRzNUlZeH3Zsv#set-up-banner-content">/pages/cBxJK7vCRzNUlZeH3Zsv#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="/pages/cBxJK7vCRzNUlZeH3Zsv#set-up-banner-image">/pages/cBxJK7vCRzNUlZeH3Zsv#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="/pages/NCBOuRwO5HiMMmjRCo1V#change-grid-layout">/pages/NCBOuRwO5HiMMmjRCo1V#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="/pages/0vzTP0Stl3Zu9uSeRacx">/pages/0vzTP0Stl3Zu9uSeRacx</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="/pages/07u8cdKUFEVngl1kOTls">/pages/07u8cdKUFEVngl1kOTls</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/eclipse/collections/collection-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.