# 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](/context/readme/theme-retirement.md).
{% 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**.

   ![](/files/3KZnuVMGEK8IC4vVO5Zk)

   ![](/files/e3jklGBEr52nHBecdOaR)

   > 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.

   ![](/files/tegKTYjZOsUIxM4dpUdE)
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](/context/collection-pages/collection-pages.md)\
> [Product grid](/context/collection-pages/product-grid.md)\
> [Filters and sorting](/context/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/context/collection-pages/banner.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.