> 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

Build a section with banners using the provided settings and blocks.

## 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FpzGZR5i3h6TKoQSNqDnz%2Fsearch%20drawer_banners.png?alt=media&amp;token=07508470-f12a-4542-8727-d66934ffbae8" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FoiFxmL7ggYzu0CMP2AkL%2Fsearch%20drawer_banner%20heading.png?alt=media&amp;token=68459321-bc69-4bf6-90c2-7d065df17c97" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FvSkP2ZiKanldhK9XtadC%2Fsearch%20drawer_banner%20icon.png?alt=media&amp;token=0e762be8-0c50-4e65-9468-ef9d98dfe253" alt=""><figcaption></figcaption></figure>