> ## Documentation Index
> Fetch the complete documentation index at: /docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Image Banner

> A full-width image banner with an optional heading, text and up to two buttons, with separate desktop and mobile images.

Use **Image Banner** for a full-width banner, such as a hero at the top of your home page or a promo banner on a collection page. Each piece of content has its own desktop and mobile image, and can add a heading and up to two buttons.

## Content per schedule

One banner at a time. Each banner you schedule has its own **Start date** and **End date**, and the block shows the one that's live now. See [When content goes live](/docs/scheduling/when-content-goes-live.md).

## What you schedule in Block Hero

On the block's page, click **Schedule content**. The **Schedule Image Banner content** form has these fields. **Content Name** and **Desktop Image** are required.

![Image Banner block page > Schedule content > Schedule Image Banner content: the Scheduling, Content and Optional content groups with all fields](https://mintcdn.com/blockhero/waMvWTT4hs9dEp6b/images/blocks/image-banner-content-form.png?fit=max\&auto=format\&n=waMvWTT4hs9dEp6b\&q=85\&s=ef9c4cd7ce7fafafbe4fcb86225c26bc)

| Field | What it does on your store |
| - | - |
| **Content Name** | For your reports only. Shoppers don't see it. |
| **Desktop Image** | The banner image on desktop. |
| **Mobile Image** | The banner image on phones (screens narrower than 750 pixels). Optional: leave it empty and phones show the **Desktop Image**. |
| **Redirect URL** | Where the banner goes. With no buttons, the whole banner links here. Once you add a button, the banner itself stops linking and the **Button Label** button links here. |
| **Image alt text** | Describes the image for screen readers. Block Hero fills it in from the link and heading and shows **Auto-filled**. You can type your own. See [How alt text is filled in](/docs/blocks/overview.md#how-alt-text-is-filled-in). |
| **Heading** | Large text on the banner. |
| **Subheading** | Smaller text under the heading. |
| **Button Label** | The first button's text. It links to the **Redirect URL**. |
| **Secondary Button Label** | A second button's text. |
| **Secondary Button URL** | Where the second button goes. |

## What you set in the theme editor

These settings are on the block in the theme editor. They stay the same whatever you schedule.

| Setting | What it does |
| - | - |
| **Block ID** | The ID you copy from the block's page in Block Hero. |
| **Above the fold** | Turn on when this banner is the first thing visible on the page. Its image loads first. On by default. |
| **Image overlay opacity** | Darkens the image, from 0% to 100%. |
| **Banner height** | **Adapt to image**, **Small**, **Medium** or **Large**. |
| **Desktop content position** | Where the text sits on desktop, from **Top left** to **Bottom right**. |
| **Show text box on desktop** | Shows a box behind the text on desktop. |
| **Desktop content alignment** | **Left**, **Center** or **Right**. |
| **Color scheme** | The color of the text box background. |
| **Mobile content alignment** | Under **Mobile layout**: **Left**, **Center** or **Right**. |
| **Show text below images on mobile** | Under **Mobile layout**: puts the text under the image on phones. |

> [!NOTE]
>
> If a banner has no **Heading**, **Subheading**, **Button Label** or **Secondary Button Label**, and its desktop image is at least three times as wide as it is tall, the banner shows the whole image instead of using **Banner height**.

## Related

> **[Add a block to your theme](/docs/blocks/overview.md)**
>
> Copy the Block ID and add the block in the theme editor.

> **[Create a schedule](/docs/scheduling/create-a-schedule.md)**
>
> Choose what the banner shows and when.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.