> For the complete documentation index, see [llms.txt](https://moodboard-creations.gitbook.io/agnes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://moodboard-creations.gitbook.io/agnes/sections/hero-banner.md).

# Hero banner

### What It Does

The **Hero banner** section lets you customize a hero banner for your store.

{% hint style="success" %}

#### How to Add It

1. In the Shopify theme editor, click **Add section**.
2. Search for **"Hero banner"**.
3. Click the section to add it to your page.
4. Adjust the settings described below.
   {% endhint %}

***

### Settings

#### **Image height (desktop)**

If 'Adapt to image' is selected, the tallest image will determine the height. Choose from: Adapt to image, Small, Medium, Large.

#### **Image height (mobile)**

If 'Adapt to image' is selected, the tallest image will determine the height. Choose from: Adapt to image, Small, Medium, Large.

**Slideshow**

#### **Enable autoplay**

Enables autoplay. Disable it to turn it off.

#### **Enable loop**

Enables looping for the collection slider. Disable it to turn it off.

#### **Transition speed**

Adjusts the transition speed of the collection slider. Only works when autoplay is enabled.

#### **Show navigation arrows (desktop)**

When enabled, navigation arrows are displayed on desktop devices. Disable it to hide them.

#### **Show pagination**

When enabled, pagination is displayed. Disable it to hide it.

#### **Transition effect**

Controls the Transition effect. Choose from: Fade, Slide.

**Appearance**

#### **Margin**

Adds space around the outside of this element.

#### **Border radius**

Rounds the corners of this element.

#### **Overlay opacity**

Controls the transparency level.

#### **Text shadow**

Adds a shadow effect for visual depth.

#### **Color scheme**

Applies a predefined color scheme to this element.

{% hint style="info" %}
Color schemes are sets of coordinated colors you define under **Theme settings > Colors**. Choosing a scheme applies its background, text, and accent colors.
{% endhint %}

#### **Navigation button color scheme**

Controls the Navigation button color scheme. Choose from: Primary, Secondary.

**Animation**

#### **Scroll animation type**

Controls the Scroll animation type. Choose from: None, Zoom fade in and out.

***

### Supported Blocks

#### Image slide

See the child document for full settings: [Image slide](/agnes/sections/hero-banner/_hero-banner-image-slide.md)

#### Video slide

See the child document for full settings: [Video slide](/agnes/sections/hero-banner/_hero-banner-video-slide.md)