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

# 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 %}

<div data-with-frame="true"><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FvGveL37SXdB9dvKAGE6Y%2Fcollection-page.jpeg?alt=media&amp;token=81c83782-956a-4c70-9ac8-8d853eeff418" alt="" width="563"></div>

<h3 align="center">Collection banner</h3>

***

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="/stiletto/collection-pages/banner.md#set-up-banner-heading">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="/stiletto/collection-pages/banner.md#set-up-banner-image">Banner</a></td></tr></tbody></table>

<h3 align="center">Product grid</h3>

***

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="/stiletto/collection-pages/product-grid.md">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="/stiletto/collection-pages/filters-and-sorting.md">Filters and sorting</a></td></tr></tbody></table>

<h3 align="center"><strong>Editing product listing styles</strong></h3>

***

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="/stiletto/products/product-listings/product-card-style.md#product-card-details">Product card style</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="/stiletto/products/product-listings/product-card-style.md#product-card-images">Product card style</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="/stiletto/products/product-badges.md">Product badges</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="/stiletto/products/quick-view.md">Quick shop</a></td></tr><tr><td><a href="/stiletto/products/prices-and-discounts.md"><strong>Prices and discounts</strong></a></td><td>Change how prices and discounts are displayed.</td><td><a href="/stiletto/products/prices-and-discounts.md">Prices and discounts</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)