# Banner

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> | Context is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/context/readme/theme-retirement).
{% endhint %}

In the **Collection banner** settings, you can customize its overall section style, along with the banner image and description. You can also choose to enable breadcrumb navigation.

Use the style settings to change the image height, define an image focal point, and add a color or gradient overlay on top of your image.

## Set up banner image and text

{% hint style="success" %} <mark style="color:green;">**Shopify**</mark> | The **Collection image** is a Shopify feature. See their article [Add a featured image for a collection](https://help.shopify.com/en/manual/products/collections/collection-layout#add-or-change-the-featured-image-for-a-collection) for more information.
{% endhint %}

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click the **Collection banner** section to open the settings.

   > **Note**: These settings apply to all pages that use the same template. To edit specific pages, you can create new templates or insert dynamic content with metafields..
2. Choose whether or not to **Show collection image**.

   ![](https://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%2Fuploads%2Fgit-blob-d64fc0ecca9552809a878edf772118e3fdd0ca04%2Fcollection-pages-collection-image.jpeg?alt=media)

   ![](https://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%2Fuploads%2Fgit-blob-8aaceec7d06d3dffd39c4e435f6c0cae63e89872%2Fcollection-pages-collection-image-disabled.jpeg?alt=media)

   > Collection images are a Shopify feature. See their article [Add or change a featured image for a collection](https://help.shopify.com/en/manual/products/collections/collection-layout#add-or-change-the-featured-image-for-a-collection) for more information.
3. To change the shape of your collection image, set the **Collection image aspect ratio** to crop your images to **Square**, **Landscape**, or **Portrait**.

   > The default **Natural** setting will display the original orientation of your image.

   ![](https://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
4. Choose whether to **Show collection description**.

   > The collection description is set in the Shopify admin. Go to **Products > Collections** to edit your collections.
5. Click **Save**.

</details>

<br>

***

> **Related links**
>
> [Collections template](https://help.fluorescent.co/context/collection-pages/collection-pages)\
> [Product grid](https://help.fluorescent.co/context/collection-pages/product-grid)\
> [Filters and sorting](https://help.fluorescent.co/context/collection-pages/filters-and-sorting)