# Banner

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.

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

## Set up banner image and text

<details>

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

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

1. Click on 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 multiple templates or insert dynamic content with metafields.
2. Check the **Show collection image** to display the collection image.

   > Go to your Shopify admin to change your collection image.
3. (*Optional*.) Use the **Select image** button to replace all collection images with one image for all collection pages.

   > To show different images on different collections, you can create multiple templates or insert dynamic content with metafields.
4. To crop collection images to a uniform shape, set the **Image aspect ratio** to crop your images to **Square**, **Landscape**, or **Portrait**.

   > The default **Natural** setting displays the original orientation of your product media.

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

   > Adding a description to a collection is a Shopify feature. See their article [Change the name or description for a collection](https://help.shopify.com/en/manual/products/collections/collection-layout#change-the-name-or-description-of-a-collection).
6. Use the **Max width of text** slider to control the maximum width of the article subheading.

   > Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
7. Click **Save**.

</details>

## Show breadcrumbs

You can display "Breadcrumb links" that show where customers are on your site and allow them to easily return to the previous page.

Breadcrumbs appear at the bottom-left of the banner when customers have navigated to the collection page from another page.

<details>

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

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

1. Click on the **Collection banner** section to open the settings.
2. (*Optional*.) Click **Show breadcrumbs** to display a row of links so customers can see where they are on your site and can return to the previous page.
3. Click **Save**.

</details>

## Settings reference

In a collections template, click the **Collection banner** section to find the following settings.

| Setting                     | Description                                                                                                                 |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| Show breadcrumbs            | Display "Breadcrumb links" that show where customers are on your site and allow them to easily return to the previous page. |
| Show collection description | Show the collection description from the collection settings in your Shopify admin.                                         |

#### Collection image banner

| Setting               | Description                                                                  |
| --------------------- | ---------------------------------------------------------------------------- |
| Show collection image | Choose to display an image from your Shopify admin settings or custom image. |

#### Section style

| Setting          | Description                                                                                                                                                                                         |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enable animation | <p>Choose whether to display visual effects when scrolling, hovering, or interacting with the section.<br><br>See our <a href="../theme-styles/animation">Section animations</a> to learn more.</p> |

\\

***

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