# Collection 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

{% hint style="success" %}
Collections are created and edited in your Shopify admin. See Shopify's [Collections manual](https://help.shopify.com/en/manual/products/collections) to learn how to group products into collections.
{% endhint %}

![](/files/YyhjeQNBNUWZWlqmbVKM)

### 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/fhe7Qo4gdJWCItGUWUC5#set-up-banner-heading">/pages/fhe7Qo4gdJWCItGUWUC5#set-up-banner-heading</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/fhe7Qo4gdJWCItGUWUC5#set-up-banner-image">/pages/fhe7Qo4gdJWCItGUWUC5#set-up-banner-image</a></td></tr></tbody></table>

### Product grid

***

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

<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>Grid layout</strong></mark></td><td>Choose the layout and style.</td><td><a href="/pages/DySMHbXuO12JwBg6FYhl">/pages/DySMHbXuO12JwBg6FYhl</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/rq1tpXjcwWGkRlpvxqaH">/pages/rq1tpXjcwWGkRlpvxqaH</a></td></tr></tbody></table>

### **Editing product listing styles**

***

To customize the product card styles, you can change the [product listing settings](/stiletto/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, chips, border, and rating stars.</td><td><a href="/pages/pHJHYgyiOGrDzOtuVwi4#product-card-details">/pages/pHJHYgyiOGrDzOtuVwi4#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/pHJHYgyiOGrDzOtuVwi4#product-card-images">/pages/pHJHYgyiOGrDzOtuVwi4#product-card-images</a></td></tr><tr><td><mark style="color:blue;"><strong>Product badges</strong></mark></td><td>Show sale, sold-out, and custom badges.</td><td><a href="/pages/RCIKzuWhXQZ2v9iyFtdH">/pages/RCIKzuWhXQZ2v9iyFtdH</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/00mCbWVntWF5YcuLAnvZ">/pages/00mCbWVntWF5YcuLAnvZ</a></td></tr><tr><td><a href="/pages/nHH0azOZnyKXYvbPliMG"><strong>Prices and discounts</strong></a></td><td>Change how prices and discounts are displayed.</td><td><a href="/pages/nHH0azOZnyKXYvbPliMG">/pages/nHH0azOZnyKXYvbPliMG</a></td></tr></tbody></table>

***

> **Related links**\
> [Banner](/stiletto/collection-pages/banner.md)\
> [Breadcrumbs](/stiletto/collection-pages/banner.md#show-breadcrumbs)\
> [Product grid](/stiletto/collection-pages/product-grid.md)\
> [Filters and sorting](/stiletto/collection-pages/filters-and-sorting.md)


---

# 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/stiletto/collection-pages/collection-pages.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.