# Collection banner
The banner is the first thing a shopper sees after clicking into a category. It tells them they've arrived somewhere deliberate rather than on a bare grid of products, and it's where the collection's name and description live.
## Add the section
1. In the theme editor, open the collection template you want to edit — **Default collection** unless you've created others.
2. In the **Template** area of the sidebar, click **Add section** and select **Collection banner**.
3. Drag it into position, then click **Save**.
## Section settings
### Layout
| Setting | What it does |
| ------------- | ------------------------------------------------------------------------------------- |
| **Container** | Keeps the banner within the page width, or lets it span the full width of the screen. |
### Media
| Setting | What it does |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show image** | Shows a background image behind the banner content. Off gives a text-only banner. |
| **Image** | A fallback image, shown only when the collection has no custom banner and no featured image of its own. Appears when Show image is on. Learn more: [Which Collection image appears](https://docs.foxecom.com/motrix-theme/collection-page/collection-page/collection-banner#which-collection-image-appears) |
| **Image (mobile)** | A separate fallback image for phones. Appears when Show image is on. |
| **Media overlay** | Darkens the image so text stays readable. |
| **Overlay style** | A flat Color or a Gradient. |
| **Overlay color** | The overlay color and opacity. Appears when style is Color. |
| **Gradient color** | The gradient. Appears when style is Gradient. |
| **Height** | **Auto** lets the image's own proportions set the height; **Custom** fixes it. |
| **Custom height** | The desktop banner height, 200–1000 px. Appears when Height is Custom. |
### Mobile settings
| Setting | What it does |
| ----------------- | -------------------------------------------------------------------- |
| **Height** | Auto or Custom, for phones. |
| **Custom height** | The mobile banner height, 200–600 px. Appears when Height is Custom. |
With Custom set on both desktop and mobile, the theme scales smoothly between the two values as the screen widens — so tablets get a sensible height without a setting of their own.
### Appearance
| Setting | What it does |
| ----------------- | -------------------------------------------------------------------- |
| **Color scheme** | Applies a theme color scheme to the banner. |
| **Corner radius** | Rounds the banner corners, 0–32 px. Appears when Container is Fixed. |
### Preload image
| Setting | What it does |
| ----------------- | -------------------------------------------- |
| **Preload image** | Loads the banner image with higher priority. |
**Tip:** turn this on when the banner is the first thing on the collection page. It's the largest image a shopper sees first, and preloading it is one of the few settings here that affects how fast the page feels. Leave it off if you've moved other sections above the banner.
## Blocks
The ready-made preset includes:
* **Content** — the container holding everything on top of the image
* **Breadcrumbs** — the trail showing where the collection sits
* **Collection title** — the collection name, pulled from Shopify
* **Collection description** — the collection description, pulled from Shopify
The title and description come from the collection in your Shopify admin. There's nothing to type here — edit them under **Products > Collections**.
### Content
The block that positions everything over the image.
#### Layout settings
| Setting | What it does |
| ------------- | ------------------------------------------------------------------------------------ |
| **Alignment** | Aligns the text Left, Center, or Right within the block. |
| **Position** | Where the block sits on the image — a nine-point grid from top-left to bottom-right. |
| **Width** | Fit to the text, Fill the banner, or a custom width. |
#### Mobile settings
| Setting | What it does |
| ---------------------- | ---------------------------------------------------------------------------- |
| **Show content below** | Moves the text out from over the image and places it underneath, on phones. |
| **Alignment** | Aligns the text on mobile. |
| **Position** | Top, Middle, or Bottom of the image. Appears when Show content below is off. |
**Best practice:** turn **Show content below** on if your collection titles are long or your images are busy. Text over a photo on a narrow screen is where banners most often become unreadable, and moving it underneath solves the contrast problem without touching the image.
### Collection title & Collection description
| Setting | What it does |
| ---------- | --------------------------------------------------------------------- |
| **Preset** | The text style — Default, Paragraph, Subheading, H1 to H6, or Custom. |
| **Color** | Text, Subtext, or a custom color. |
**Best practice:** leave the collection title at **H1**. It's the main heading of the page, and search engines read it that way. Change the size with a Custom preset rather than dropping to H3.
### Breadcrumbs
On a collection page it reads **Home / Collection / \[collection name]**.
To change the symbol between steps is a theme setting, go to **Theme settings** > [Breadcrumbs](https://docs.foxecom.com/motrix-theme/theme-settings/breadcrumbs).
## Which Collection image appears
The [image field](https://docs.foxecom.com/motrix-theme/collection-page/collection-page/collection-banner#media) in this section is a fallback, not the main one. For each collection the theme uses the first of these it finds:
1. **The collection's banner metafield** — a dedicated banner image set per collection. Learn how to [set up collection banner using metafield](https://docs.foxecom.com/motrix-theme/collection-page/collection-page/collection-banner#set-a-banner-image-per-collection)
2. **The collection's featured image** — set in **Products > Collections > \[collection] > Image**.
3. **The first product's image** — the featured image of the first product in the collection.
4. **The Image in this section** — the last resort.
Special cases:
* With no metafield image and no featured image, the first product's image becomes the banner.
* If the collection has no products either, the section image is used.
### Set a banner image per collection
Use this when a collection needs a wide banner that's different from the square-ish featured image used on collection cards.
1. From your Shopify admin, go to **Settings > Metafields and metaobjects**.
2. Select **Collections**, then click **Add definition**.
3. Enter the metafield name and set the **Namespace and key** to `foxtheme.collection_banner`.
4. For **Type**, choose **File** and restrict it to **Image**.
5. Click **Save**.
6. To add a separate mobile banner, repeat with the key `foxtheme.collection_banner_mobile`.
7. Go to **Products > Collections**, open a collection, scroll to **Metafields**, and add its banner.
The namespace and key must match exactly.
* For image on desktop: `foxtheme.collection_banner`
* For image on mobile: `foxtheme.collection_banner_mobile`
Set only the desktop metafield and the mobile banner uses the same image. Add `foxtheme.collection_banner_mobile` only for collections where the desktop crop doesn't work on a phone.
## FAQs
**I set an image in the theme but a different one shows on my collection page. Why?**
Something higher in the priority list is being used — a banner metafield, the collection's featured image, or, if it has neither, the first product's image. The section image only appears for collections that have none of those.
**Where does the banner text come from?**
The collection's title and description in your Shopify admin, under **Products > Collections**. The blocks display them; they don't store their own text.
**Why can't I round the banner corners?**
**Corner radius** only appears when **Container** is set to Fixed. A full-width banner has no side margins, so rounding would have nothing to sit against.