# Hero banner

<figure><img src="/files/EhDihkXpaujuL11VDw9b" 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="/pages/LHMEEJzFAAyBfjuU3BDC">/pages/LHMEEJzFAAyBfjuU3BDC</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:
  * [Banners](/pebble-theme/theme-blocks/banners.md#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.


---

# Agent Instructions: 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:

```
GET https://docs.foxecom.com/pebble-theme/theme-sections/hero-banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.