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

# Collection template

**Collection templates** allow you to edit the layout and appearance of collection pages. The default template for collection pages consists of a **Collection banner** that displays the collection title and description, followed by a **Product grid** with options for filtering and sorting products by different categories.

Each product shows an image, title, price, and an optional [Hover add-to-cart](/spark/products/hover-add-to-cart.md) button that lets customers to add products directly to their cart.

{% hint style="success" %} <mark style="color:green;">**Shopify**</mark> | 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 %}

## Quick setup

We recommend starting by editing the **collection banner** and **product grid**. You can also edit the theme-wide styles for products cards in **Theme settings > Product listing**. Finally, you can customize the layout and functionality of your collection pages with **sections**.

### **Edit collection banner**

In the **Collection banner** settings, you can change the **Text position** of the title and description, and show a **Collection image** with custom image styles. You can also show **Breadcrumb links** to allow customers to easily navigate pages on your site.

> Get started with customizing the [Collection banner](/spark/collection-pages/banner.md).

### **Edit product grid**

In the **Product grid** settings, you can customize the grid layout by changing number of columns and rows. You can also customize [Filters and sorting](/spark/collection-pages/filters-and-sorting.md) options, and the pagination style.

> Get started with customizing the [Product grid settings](/spark/collection-pages/product-grid.md).

### **Edit product listing styles**

Product listings display **product cards** in a grid or row. Each product card shows the product's image, title, and price.

In your theme settings, you can choose whether to show **swatches**, **discount prices**, **product badges**, and a **Hover add-to-cart** button. You can also choose to show a **Secondary product image** on hover.

> Customize the product listing styles in your [Theme settings](/spark/theme-styles/theme-settings.md).

### **Add theme sections**

You can customize the content, layout, and functionality of collection pages with Spark's theme sections.

> See our [Theme sections guide](/spark/pages/theme-sections.md) for a full overview of all sections.
>
> \\

***

> **Related links**\
> [Banner](/spark/collection-pages/banner.md)\
> [Breadcrumbs](https://github.com/fluorescent/kb-spark/tree/main/collection-pages/broken-reference/README.md)\
> [Product grid](/spark/collection-pages/product-grid.md)\
> [Filters and sorting](/spark/collection-pages/filters-and-sorting.md)