> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header-drawers/search-drawer/banners.md).

# Banners

## Heading

**Heading**\
Title the banner section using the field.

***

## Banner

#### Click action

**Link**\
The image can be linked to any page by selecting or pasting a page URL in the current source selector.

**Open in new tab**\
When enabled, the linked page opens in a new browser tab, allowing customers to keep their current page open while viewing the linked content.

#### Media

**Image**\
Press **"Select"** to upload the necessary animation for both desktop and mobile. The recommended image ratio is two-to-one (width-to-height).

**Mobile image**\
Use the picker to display a specific image for mobile.

#### Media overlay

{% hint style="warning" %}
**Note!** The settings described below only work in desktop mode.
{% endhint %}

**Enable**\
Turn on the option to display the corresponding settings.

**Opacity**\
Adjust the transparency of an image color overlay using the scale, which ranges from 0 to 100%.

**Type**\
In the picker, select one of the options: "Background" or "Gradient".

**Background**\
Select the option and change the image overlay color by specifying it in the corresponding picker. By default, the color is set to transparent.

**Gradient**\
Select the option to display the related color picker. Then, apply an image overlay color using the gradient vector. Read details on how to use the option [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#image).

<figure><img src="/files/bkheu4SyUDX2BZQVYymx" alt=""><figcaption></figcaption></figure>

***

### Heading

**Heading**\
Use the input field to display text over a banner.\
Style your text using the formatting options at the top of the input field.

**Color**\
Apply color using the picker.

<figure><img src="/files/5AiTIfSIsYUuEM4hakUV" alt=""><figcaption></figcaption></figure>

***

### Icon

**Color**\
The arrow background color can be changed using the paint palette. The arrow becomes visible when hovering over the block's image.

<figure><img src="/files/GjqQpkhtKnpZHvlap1QO" alt=""><figcaption></figcaption></figure>