> 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/dynamic-theme-sections/blocks/image.md).

# Image

### Click action

**Link**\
The banner can be linked to pages/ collections/ products. Choose the destination in the 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 all screen sizes.

### Media overlay

{% hint style="success" %}
The settings described below only apply to desktop mode.\
**Tip:** Enable **"Show overlay"** under "[<mark style="color:blue;">Mobile settings</mark>](#mobile-settings-1)" to apply the overlay color for mobile.
{% 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).

### Content area <a href="#text" id="text"></a>

{% hint style="success" %}
**Tip:** Use the options in the **"Mobile settings"** subsection to adjust the layout on mobile. Read details [<mark style="color:blue;">here</mark>](#mobile-settings-1).
{% endhint %}

**Position**\
The option helps to place the text box in a desired position: "Top", "Center", or "Bottom". Each of the options contains settings such as "Left", "Center", and Right". Select the option that best fits your needs using the drop-down.

**Alignment**\
Align the text on the desktop view to "Left", "Center", or "Right".

**Enable custom width**\
Use the option to adjust the text box width.

**Width**\
Adjust the width of the text box on a scale.

**Show background**\
Activate the option to view additional background settings.

**Opacity**\
Use the scale to adjust the text box background transparency from 0% to 100%:

* **0%** - invisible background
* **100%** - opaque background

**Background**\
Set the color in the color picker. By default, the color is set to transparent.

**Desktop offset**\
Adjusts the spacing around the text box on desktop devices, allowing you to control its position within the banner. Set a value from 0 to 40 pixels.

**Show desktop border**\
Displays a border around the text box on desktop devices to help it stand out from the image.

**Border width**\
Sets the thickness of the border from 0 to 20 pixels displayed around the text content area.

**Border color**\
Select the color used for the border.

**Enable desktop corner radius**\
Rounds the corners of the text content container for a softer appearance.

**Corner radius**\
Controls how rounded the text content container corners appear:

* **0 px** - square
* **20 px** - more rounded corners

### Mobile settings <a href="#mobile-settings-1" id="mobile-settings-1"></a>

**Enable**\
Activates mobile settings. The options below take precedence on mobile devices.

**Image**\
Select an image for mobile individually. Otherwise, the same image is shown on mobile view as on the desktop.\
Press **"Select"** to upload the one you need. The recommended image ratio is two-to-one (width-to-height).

**Show overlay**\
Check the option to display the image color overlay. This option works with the configured settings of the image overlay. Find more details [<mark style="color:blue;">here</mark>](#media).

**Text position**\
The option helps to place the text box in a desired position: "Top", "Center", or "Bottom". Each of the options contains settings such as "Left", "Center", and Right". Select the "Same as desktop" option to use the desktop settings.

**Text alignment**\
Align the text to "Left", "Center", or "Right".

### Mobile content area

**Set background opacity**\
Adds a background behind the text.

**Opacity**\
Adjust the transparency level of the text background. Higher values make the background more opaque, while lower values make it more transparent.