# Hero banner

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F3t2GtbGI6WoR4bNLCWF8%2FFox-BG%20Light%20(80).jpg?alt=media&#x26;token=227a337e-37d6-4a0b-bf51-56977c1ab461" alt=""><figcaption></figcaption></figure>

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

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

{% hint style="success" %}

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

## How to edit the section Hero banner

The Hero banner section includes:

* 2 static blocks:

<details>

<summary>Media – add your banner image or video</summary>

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Type</strong></td><td>Choose whether the block displays an <strong>Image</strong> or a <strong>Video</strong>. </td></tr><tr><td><strong>Image</strong></td><td>Upload the main image when Type = Image. Supports JPG, PNG, WebP.</td></tr><tr><td><strong>Video</strong></td><td>Upload a video file when Type = Video. Supports MP4.</td></tr><tr><td><strong>Media overlay</strong></td><td>Enable a subtle overlay to improve text readability if you're placing text on top of the image.</td></tr></tbody></table>

</details>

<details>

<summary>Content – add text, buttons, and spacers inside the banner</summary>

Place text, buttons, and spacers inside hero banners.

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Alignment</strong></td><td>Control how your content is aligned <em>inside the container</em>.</td></tr><tr><td><strong>Position</strong> </td><td>Determine where the content sits over the banner.</td></tr><tr><td><strong>Width</strong></td><td>Choose the content width: Fit content / Fill / Custom.</td></tr><tr><td><strong>Custom width</strong></td><td>Set a custom percentage width when using the <strong>Custom</strong> option.</td></tr><tr><td><strong>Inherit color scheme</strong></td><td>Use the section’s color scheme. Disable to choose a custom color scheme.<br><em>Learn more: /</em><a data-mention href="../theme-settings/colors">colors</a></td></tr><tr><td><strong>Transparent background</strong></td><td>Remove the content background for a clean overlay style.</td></tr><tr><td><strong>Border</strong></td><td>Add a border around the content box.</td></tr></tbody></table>

#### 📦 Nested dynamic blocks

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

<table><thead><tr><th width="275">Dynamic blocks</th><th>Purpose</th></tr></thead><tbody><tr><td><strong>Text</strong></td><td>Add headings, paragraphs, taglines, or styled text. Supports presets and rich text.</td></tr><tr><td><strong>Button</strong></td><td>Add one or multiple call-to-action buttons.</td></tr><tr><td><strong>Spacer</strong></td><td>Add vertical spacing between text and buttons for better layout control.</td></tr></tbody></table>

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

{% hint style="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
  {% endhint %}

</details>

* 1 dynamic block:
  * [#marquee](https://docs.foxecom.com/pebble-theme/theme-blocks/banners#marquee "mention") – 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.