# Hero banner

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(80)_EhDihkXp.jpg)

A large, visually impactful banner for highlighting campaigns, announcements, or featured products.

## How to add a Hero banner to your Shopify store

<Hint type="success">

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Hero banner** section.
3. Make necessary changes.
4. **Save.**

</Hint>

## How to edit the section Hero banner

The Hero banner section includes:

* 2 static blocks:

<Expandable title="Media – add your banner image or video">

<Table widths="275,auto">

| Setting | Description |
| --- | --- |
| **Type** | Choose whether the block displays an **Image** or a **Video**. |
| **Image** | Upload the main image when Type = Image. Supports JPG, PNG, WebP. |
| **Video** | Upload a video file when Type = Video. Supports MP4. |
| **Media overlay** | Enable a subtle overlay to improve text readability if you're placing text on top of the image. |

</Table>

</Expandable>

<Expandable title="Content – add text, buttons, and spacers inside the banner">

Place text, buttons, and spacers inside hero banners.

<Table widths="275,auto">

| Setting | Description |
| --- | --- |
| **Alignment** | Control how your content is aligned *inside the container*. |
| **Position** | Determine where the content sits over the banner. |
| **Width** | Choose the content width: Fit content / Fill / Custom. |
| **Custom width** | Set a custom percentage width when using the **Custom** option. |
| **Inherit color scheme** | Use the section’s color scheme. Disable to choose a custom color scheme.<br/>*Learn more: /*[Colors](https://docs.foxecom.com/pebble-theme/theme-settings/colors) |
| **Transparent background** | Remove the content background for a clean overlay style. |
| **Border** | Add a border around the content box. |

</Table>

#### 📦 Nested dynamic blocks

The **Content** block supports 3 nested block types:

<Table widths="275,auto">

| Dynamic blocks | Purpose |
| --- | --- |
| **Text** | Add headings, paragraphs, taglines, or styled text. Supports presets and rich text. |
| **Button** | Add one or multiple call-to-action buttons. |
| **Spacer** | Add vertical spacing between text and buttons for better layout control. |

</Table>

#### 📝 What you can build inside the Content block

<Hint type="success">

What you can build inside the Content block:

* Hero tagline + heading + CTA
* Promotional message stack
* Multi-line storytelling text
* “Shop now” / “Learn more” button rows

</Hint>

</Expandable>

* 1 dynamic block:
  * [Banners](https://docs.foxecom.com/pebble-theme/theme-blocks/banners#marquee) – Adds a scrolling text ribbon above or below the banner.

## 💡 Best practices

* **Use “Adapt to image”** height if your banner has strong visuals and needs a natural crop.
* **Add a spacer** before/after headings to create breathing room.
* **Use a marquee** for seasonal campaigns — instantly adds urgency and motion.
* For readability, **enable Media overlay** if the background is bright or busy.