---
description: >-
  The "Image with text overlay" section is a good way to display a video or
  full-width banner completed with the text over an image and call-to-action
  buttons that link to other pages.
---

# Image with text overlay

{% hint style="success" %}
**Tip:** This section includes five blocks: "[<mark style="color:blue;">Second image</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/image-with-text-overlay/second-image)", "[<mark style="color:blue;">Mobile settings</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/image-with-text-overlay/mobile-settings)", "[<mark style="color:blue;">Heading</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/image-with-text-overlay/heading)", "[<mark style="color:blue;">Text and Custom HTML</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/image-with-text-overlay/text-and-custom-html)", and "[<mark style="color:blue;">Buttons</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/image-with-text-overlay/buttons)". Each block can be added individually and customized in different ways.
{% endhint %}

<mark style="color:orange;">**Note!**</mark> The current section includes additional **Before/After** functionality that can be activated by adding the "[<mark style="color:blue;">Second image</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/image-with-text-overlay/second-image)" block.

### Image

Press the **"Select"** button in the **"Image or cover image"** source selector to upload the necessary image for both desktop and mobile. The image can be used as a banner or a cover image for a video. The recommended image ratio is two-to-one (width-to-height respectively). Once an image is selected, it can be linked to pages/ collections/ products. Choose the destination in the **"Link"** source selector.

{% hint style="success" %}
**Tip:** The "Image" settings described below will only apply to the desktop mode.

Activate the **"Show image overlay"** in the "[<mark style="color:blue;">Mobile settings</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/image-with-text-overlay/mobile-settings)" block to allow the use of settings for mobile viewing.
{% endhint %}

If you need to change the **"Image overlay background"**, select the color from the color picker. By default, the color is set to transparent. The option works with the enabled "Add overlay opacity", "Zoom in, add overlay opacity", or "Zoom out, add overlay opacity" in the **"**[<mark style="color:blue;">Animation</mark>](#animation)**"** subsection. The applied option won't work if you use the gradient color.

Press **"Image overlay gradient"** to apply the gradient vector. Read details on how to use the option [<mark style="color:blue;">here</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#image). This option will not be effective if a background color is used.

Adjust the transparency of an image gradient overlay using the **"Image overlay opacity"** scale from 0 to 100%.

The following section provides two methods of displaying a video on a page. Select the one that fits you well:

### Shopify-hosted video

Using this option, the Shopify-hosted video will appear within the section. The video can be added by simply pressing the **"Select"** button in the **"Video"** source selector. You can either upload the video to your Store library or utilize one that has already been stored in your _Shopify admin -> Content -> Files_.

### Or embed video from URL

This approach lets you add a YouTube or Vimeo video. The video can be placed by simply pasting a link into the **"URL"** field.&#x20;

In the **"Video alt text",** paste the descriptive text for the screen readers. More details can be read in the initial [<mark style="color:blue;">documentation</mark>](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video-block).

Use the **"Autoplay"** function to initiate the video display automatically upon a visitor landing on a page without pressing the play button.

Activate the **"Loop"** option to play your video repeatedly and continuously.

To display the video's Parental Controls, tick the **"Controls"** option.

<mark style="color:orange;">**Note!**</mark> Ensure the image link field is empty in order to use the video controls. Otherwise, the visitors will be redirected to another page when pressing the video player controls.

### Text

{% hint style="success" %}
**Tip:** Add the dynamic **"Mobile settings"** block to change the text position and text alignment settings for mobile. Read details [<mark style="color:blue;">here</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/image-with-text-overlay/mobile-settings).
{% endhint %}

The option **"Desktop text position"** helps to place texts in different positions: "Top left", "Top", "Top right"; "Center left", "Center", "Center right"; or "Bottom left", "Bottom", "Bottom right". Choose an option that best fits your needs in the drop-down.

If you need to align the text to "Left", "Center", or "Right", select one of the options in the **"Desktop text alignment"** drop-down.

In the **"Text box desktop background"**, you can set the color from the color picker. By default, the color is set to transparent.&#x20;

Use the **"Text box desktop opacity"** scale to change the text box background opacity from 0 to 100 %, where 0% is an invisible background, and 100% is opaque.

The **"Text box desktop width"** scale allows setting the text width from 30% to 100%.

In the following example, you can view how the described settings might display in a banner with the next text parameters:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FbuDadDDw1MiuiS0KP1kQ%2Fimage%20overlay_text.png?alt=media&#x26;token=0b342b53-1320-4ec3-bd5a-d12cbd0e18e4" alt=""><figcaption></figcaption></figure>

You can read more about the described options on the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#text).

### Layout

Use the **"Height"** options to adapt a media to the desired size. There are a few available options that can be selected from the drop-down:

* **"Adapt to media"**. Displays an image/video in its original aspect ratio.&#x20;

<mark style="color:orange;">**Note!**</mark> This option is automatically applied when the "[<mark style="color:blue;">Image parallax</mark>](#image-parallax)"  feature is activated to generate the parallax effect.

* **"Fullscreen"**. Set this option to show a media in the full width of a page. The image/video width will match the page width set in global settings if the "Enable page width" option is ticked under _Theme settings ->_ [_Layout_](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/layout).
* **"Fullscreen without header"**. Using this option, media will be cropped at the top and bottom. The top spacing will be subtracted from the total height. Be sure to review the settings on the storefront to confirm they meet your expectations.
* **"Proportion in %"**. Select the option to adjust a media height as a percentage using the **"Proportion of height"** scale. The parameters can be changed from 10% to 210%.

\*The "Proportion in %" option is applied to mobile by default. To modify the height specifically for mobile, add the "[<mark style="color:blue;">Mobile settings</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/image-with-text-overlay/mobile-settings)" block.

**"Proportion in %"** indicators:

\*100% = Square image

\*Less than 100% = Landscape

\*More than 100% = Portrait

\*For an ideal video aspect ratio (16:9), set the proportion to 56%.

* **"Fixed in px"**. This option helps to change image/video size in pixels by setting the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 1000 pixels.

Use the **"Width"** drop-down to apply one of the options: "Standard" (boxed), "Wide" (full width of a screen), or "Fixed". Once the last option is selected, you can manually change the width from 450 to 2000 pixels using a **"Fixed width"** setting. The margins will be set to the left and right when using "Fixed".

\*The width of the media in the section cannot exceed the page width set in the global settings. Check the parameters in _Theme settings ->_ [_<mark style="color:blue;">Layout</mark>_](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/layout).

Here is how the "Wide" option appears in the section with the disabled page width in the global settings:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F41UlSnRgyjoxloopCMwq%2Fimage%20with%20text_wide.png?alt=media&#x26;token=572afcda-621d-42ce-954c-a967a76f2f13" alt=""><figcaption></figcaption></figure>

To read more about the described options, view the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#content).

Decide on the position of the divider using the "Top", "Bottom", or "Both" options in the **"Dividing line"** drop-down. It will be hidden once you use the "None" option.

On the **"Top spacing"** and **"Bottom spacing"** scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Animation

#### Desktop hover animation

If you want to add an animation inside the image container, choose the suggested option from the list. By default, the block uses the **"Inherit global settings"** option. If there is no need to apply animation settings for the block individually, leave this option as it is. In this case, decide on the animation image effect in the global settings of the Theme Editor by using the "**Banner image desktop hover animation**" drop-down. Read the details on the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/styles).

The options **"Zoom in"** and **"Zoom out"** place the zooming effect to enlarge or decrease an image on the mouse hover. You can activate the opacity over the image by choosing **"Add overlay opacity"** and selecting a color for the _"Image overlay background"_ or _"Image overlay gradient"_ (read the details [<mark style="color:blue;">above</mark>](#image)). To use this option, make sure that the _"Image overlay opacity"_ is set up to be transparent. The overlay opacity and zooming effect on an image can be achieved with an active **"Zoom in, add overlay opacity"** or **"Zoom out, add overlay opacity"**. The option **"None"** deactivates the animation.

You can read more about the described options on the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#animation).

#### Image parallax

{% hint style="info" %}
\*This option overrides the [<mark style="color:blue;">hover animation</mark>](#desktop-hover-animation) settings.

\*The Static option is not supported on iOS mobile devices and may cause slowdowns on content-heavy pages due to browser limitations.
{% endhint %}

Activate one of the options from the drop-down list to add an effect that moves images within the container as you scroll up or down a page. The available options are: "Move up", "Move up with delay", "Move down", "Move down delay", and "Static". To disable the parallax effect, choose the "Disable" option.

\*The parallax settings need to be rechecked with the altitude settings described [<mark style="color:blue;">above</mark>](#layout).

### Ticker

{% hint style="warning" %}
**Note!** Use the ticker to overlay the image on the desktop view. It will be disabled on mobile by default.
{% endhint %}

To add a ticker overlayed on the image, hit the **"Show ticker"** checkbox.

In the **"Text"** input field, add any promotion or proposition strings.

Using the **"Speed"** slider, you can adjust the running line speed in seconds from 1 to 5.

The **"Position"** picker includes options to arrange the ticker on the "Top", "Bottom", "Left", or "Right" side within the main image.

The ticker background color can be raised as solid or transparent in the **"Background opacity"** scale. The parameters vary from 0 to 100 pixels.

Use the **"Background"** and **"Text"** color pickers to colorize the ticker accordingly.



Here is the example view of the section on a desktop and mobile:

{% tabs %}
{% tab title="Desktop" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FyLo2sS4SrmcE8bhvGncF%2Fimage%20with%20text_desktop.png?alt=media&#x26;token=34f23a6d-b96e-43c4-aef8-52b7ba9ca4a4" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FVoU6impTABS1wNNyRuA2%2Fimage%20with%20text_mobile.png?alt=media&#x26;token=decf1882-5b06-4d51-bbbf-22f776a18543" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}
