> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/collection-page/page-template-sections/collection-banner.md).

# Collection banner

**Collection banner** is the header at the top of a collection page. It combines a banner image with the collection title, its description, and the breadcrumb trail, so a category opens like a destination instead of a bare list of products. Customers see it the moment they arrive from a menu, a search result, or an ad.

It is also the place to tell a customer they are in the right department, which is why the title and the short description matter more here than the picture.

<figure><img src="/files/ewK1DSXuwmyu9WeTen5N" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template selector and select **Collections**, then **Default collection**.
3. In the left sidebar, click **Add section** and choose **Collection banner**.
4. Drag it to the top of the page, adjust the settings, then click **Save**.
   {% endhint %}

*Result:* the banner appears above the product grid in the preview, filled with the title and description of the sample collection.

## Section settings

### General settings <a href="#general-settings" id="general-settings"></a>

<figure><img src="/files/rhj59k6uvT1VnhETmk72" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>How far the banner stretches across the screen.</p><ul><li><strong>Stretch width</strong>: the image runs close to the screen edges whatever the display size.</li><li><strong>Fixed width</strong>: the banner lines up with the product grid below, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the banner fills the whole screen and rescales itself to fit it, which suits an edge to edge photo.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>The background and text colours used when the banner has no image behind it, taken from the schemes in <strong>Theme settings > Colors</strong>.</td></tr></tbody></table>

### Settings <a href="#settings" id="settings"></a>

<figure><img src="/files/LhAAZ7Z8ZjdfS7zI8vtp" alt=""><figcaption></figcaption></figure>

| Setting                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image**                    | The picture behind the collection title. Use one image for every collection here, or leave it empty and let each collection supply its own.                                                                                                                                                                                                                                                                                                                    |
| **Use collection image**     | Makes the banner show the image set on each collection in your Shopify admin instead of the one above, so every category gets its own header without editing the theme.                                                                                                                                                                                                                                                                                        |
| **Image height**             | <p>How tall the header is, and therefore how soon customers reach the products.</p><ul><li><strong>Adapt to image</strong>: keeps the photo in its own proportions.</li><li><strong>Based on content</strong>: only as tall as the title and description need.</li><li><strong>Small</strong>: keeps the grid on the first screen.</li><li><strong>Medium</strong></li><li><strong>Large</strong>: a full impression header for a flagship category.</li></ul> |
| **Image opacity**            | How strongly the photo shows through behind the text. Lower it until the collection title is comfortable to read on a busy image.                                                                                                                                                                                                                                                                                                                              |
| **Desktop content position** | <p>Where the title and description sit on top of the image.</p><ul><li><strong>Middle left</strong>: reads first, and works with photos whose subject is on the right.</li><li><strong>Middle center</strong>: the classic centred header.</li><li><strong>Middle right</strong>: keeps the text off a subject placed on the left.</li></ul><p>Position is automatically optimized for mobile.</p>                                                             |

### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                                                                     |
| ---------- | ----------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the banner. Increase it when the header sits too close to the site navigation. |
| **Bottom** | Adds space between the banner and the first row of products.                                    |

## Block settings <a href="#block-settings" id="block-settings"></a>

Add only the blocks the category needs. Every block you keep pushes the products further down the screen.

* **Breadcrumb**: the trail back to the level above, for visitors who arrive from an ad or a search result and have not used your menu.
* **Heading**: the collection name customers read first, confirming they are in the right department.
* **Description**: a line or two under it, best used to say what the category contains or who it is for.

### Impact outside the theme editor <a href="#impact-outside" id="impact-outside"></a>

The banner applies to every collection using the **Default collection** template. With **Use collection image** turned on, what customers see depends on the image uploaded to each collection in **Shopify admin > Products > Collections**, so a collection with no image will fall back to whatever the section itself defines. The heading and description are read from the collection record too, not typed in the theme editor.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Product grid](/velare/customize-your-pages/collection-page/page-template-sections/product-grid.md): the listing that sits under this banner
* [Breadcrumb](/velare/customize-your-pages/breadcrumb.md): the global settings behind the breadcrumb block
* [Collection page](/velare/customize-your-pages/collection-page.md): the template this section belongs to
* [Colors](/velare/set-up-your-store/colors.md): the colour schemes offered in the settings above


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/collection-page/page-template-sections/collection-banner.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.