> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/theme-sections/hero-banner.md).

# Hero banner

A high-impact opening banner with an image or video, an oversized heading, scrolling text and a logo that shrinks as customers scroll.

***

The **Hero banner** section is a high-impact opener for the top of a page. It shows an image or a video with your description and button, and you can layer an oversized heading, a scrolling text line and a large logo on top. Each layer can be positioned on its own.

### 1. Our guide to set up a Hero banner section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Hero banner.**
* Click **Save.**
  {% endhint %}

The section is added with a **Scrolling text** block. You can also add a **Heading** block and a **Logo image** block, one of each.

### 2. Section settings

* **Media**
  * **Image:** The banner image.
  * **Mobile image:** An optional image for mobile. If you leave it blank, mobile shows the **Image**.
  * **Video:** A video uploaded to your Shopify files. The video overrides the image if both are set.
  * **Image link:** Makes the banner clickable.
  * **Media overlay opacity:** Darkens the image or video so text stands out, 0–100%.
  * **Desktop banner height:** Small / Medium / Large / Custom.
  * **Custom height:** 250–850px. Only applies when **Desktop banner height** is set to **Custom**.
  * **Adapt section height to image size:** The banner takes the shape of your image. This overrides **Desktop banner height** and **Mobile banner height**. It doesn't apply to videos.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FXMBK9g7ddKZttwGSn9c2%2FScreenshot%202026-04-20%20at%203.38.36%E2%80%AFPM.png?alt=media&#x26;token=0aaa3509-39c9-4266-801e-cc3f02093b2b" alt="Hero banner Media settings and result"><figcaption></figcaption></figure>

* **Content settings**
  * **Description:** Supporting text shown on the banner.
  * **Content width:** The maximum width of the description and button, 200–800px.
  * **Button label** and **Button link:** Adds a button. Leave the label blank to hide it.
  * **Use outline button style:** Shows the button with an outline instead of a solid fill.
  * **Content position:** Where the description and button sit: Top, Middle or Bottom, combined with Left, Center or Right.
* **Colors**
  * **Text:** The color of the description. The **Heading** and **Scrolling text** blocks are always shown in white.
  * **Button label**, **Button background** and **Button outline:** The colors of the button. **Button outline** applies when **Use outline button style** is on.
* **Mobile layout**
  * **Mobile banner height:** 150px / 250px / 350px / 450px / 550px / 650px / 750px.
  * **Mobile content alignment:** Left / Center / Right.
* **Section padding**
  * **Top padding:** 0–100px.
  * **Bottom padding:** 0–100px.

### 3. Block settings

**Heading block**

A large heading layered on the banner. You can add one per section.

* **Heading:** The heading text.
* **Desktop font size scale:** 100–300%.
* **Mobile font size scale:** 100–300%.
* **Content width:** The maximum width of the heading, 300–1600px.
* **Heading position:** Where the heading sits, separately from the description and button: Top, Middle or Bottom, combined with Left, Center or Right.
* **Block spacing**
  * **Top padding:** Space between the top of the banner and the heading, 0–500px. Only applies when **Heading position** is set to a **Top** option.

**Logo image block**

Shows a large logo in the middle of the banner. As customers scroll down, the logo shrinks and moves down. If you don't add an image, your store name is shown. You can add one per section.

* **Image:** The logo for desktop.
* **Mobile image:** An optional logo for mobile. If you leave it blank, mobile shows the **Image**.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2Faq0pXRWEi7FZkxup4pWu%2FScreenshot%202026-04-20%20at%204.17.12%E2%80%AFPM.png?alt=media&#x26;token=51965357-b9d8-4e81-a6f7-08bf65b7a5c5" alt="Logo image block settings and result"><figcaption></figcaption></figure>

**Scrolling text block**

A line of text that moves across the banner in a loop. You can add one per section.

* **First text**, **Second text** and **Third text:** The messages to show. Leave a field blank to skip it.
* **Text size:** 15–80px.
* **Space between text:** The gap between messages, 0–100px.
* **Text position:** Top / Middle / Bottom.
* **Direction:** Left / Right.
* **Speed:** Slow / Normal / Fast.
* **Block spacing**
  * **Top padding:** Space between the top of the banner and the text, 0–500px. Only applies when **Text position** is set to **Top**.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FHrmKdfETrI2ICNnpYrTn%2FScreenshot%202026-04-20%20at%204.12.12%E2%80%AFPM.png?alt=media&#x26;token=2d14fde1-0303-48e8-9882-644f1f0ec4b7" alt="Scrolling text block settings and result"><figcaption></figcaption></figure>

### 4. Tips

* Use the Hero banner as the first section on your home page, where the large heading and logo have the most impact.
* Set a smaller **Mobile font size scale** than on desktop, so long headings fit on phone screens.
* Raise **Media overlay opacity** if your heading or text is hard to read over the image or video.