> 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/image-banner.md).
# Image banner
{% hint style="success" %}
This section includes a few additional blocks: "[Heading](/unicorn-shopify-theme/dynamic-theme-sections/image-banner/heading.md)", "[Text and page content](/unicorn-shopify-theme/dynamic-theme-sections/image-banner/text-and-page-content.md)", "[Button](/unicorn-shopify-theme/dynamic-theme-sections/image-banner/button.md)", and "[Two buttons](/unicorn-shopify-theme/dynamic-theme-sections/image-banner/button.md)".\
**Tip:** Press **"Add block"** to use the desired block. Each block can be added individually and customized in different ways.
{% endhint %}
**Note!** The current section includes additional **Before/After** functionality that can be activated using "[Secondary image](#secondary-image)".
### Section link
**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
**Type**\
Use the drop-down to set the media format. It can be changed to "Image", "Video", or "YouTube or Vimeo URL". Additional settings related to each option are displayed after an option is selected.
* **"Image"**. Choose the option and link an image by pressing the **"Select"** button to display a simple image banner.
The following section provides two methods of displaying a video on a page. Select the one that fits you well:
* **"Video"**. Embed a video file uploaded to your *Shopify admin -> Content -> Files* by selecting the option and pressing the **"Select"** button in the **"Video"** source selector.
* **"YouTube or Vimeo URL"**. Select the option to display a video from a URL. The video can be placed by simply pasting a link into the **"Video URL"** field.
**Image ratio**\
Select the desired option to adapt 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.
**Note!** This option is automatically applied when the "[Image parallax](#animation)" feature is activated to generate the parallax effect.
* **"Fixed height"**. This option adapts an image/video size in pixels by setting the parameters on the **"Height"** scale. The height can be adjusted between 100 and 1000 pixels.
* **"Aspect ratio"**. Select the option to adjust a media height as a percentage using the **"Proportion"** scale. The parameters can be changed from 10% to 210%.
\*The "Aspect ratio" option is applied to mobile by default. To modify the height specifically for mobile, use the "[Mobile settings](#mobile-settings-1)".
**"Aspect ratio"** indicators:\
\* 100% = Square image\
\* Less than 100% = Landscape\
\* More than 100% = Portrait\
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
\* For an ideal video aspect ratio (16:9), set the proportion to 56%.
* **"Fullscreen"**. Set this option to show 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 ->* [*Page layout*](/unicorn-shopify-theme/theme-settings/page-layout.md).
* **"Fullscreen without header"**. Using this option, the media is cropped at the top and bottom. The top spacing is subtracted from the total height. Check how the settings work on the storefront to confirm they meet your expectations.
**Width**\
Use the 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 the "Fixed" option is set.
\* The width of the media in the section cannot exceed the page width set in the global settings. Check the parameters in *Theme settings ->* [*Page layout*](/unicorn-shopify-theme/theme-settings/page-layout.md).
Here is how the "Wide" option appears in the section with the disabled page width in the global settings:
### Video settings
{% hint style="warning" %}
**Note!** The "Cover image" and "Alt text" settings will be displayed after selecting the **"YouTube or Vimeo URL"** video type.
{% endhint %}
**Cover image**\
Press the **"Select"** button in the provided source selector to upload the necessary image for all screen sizes.
**Alt text**\
Paste the descriptive text for screen readers. Read more details in the initial [documentation](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video-block).
**Autoplay**\
Use this feature to automatically start a video when a visitor lands on a page without clicking the play button.\ **Note!** When enabled, all videos in the section start muted by default, providing a distraction-free browsing experience.
**Loop video**\
Activate the option to play your video repeatedly and continuously.
**Show controls**\
To display the video's Parental Controls, tick the **"Controls"** option.\ **Note!** Ensure the image link field is empty to use the video controls. Otherwise, visitors will be redirected to another page when pressing the video player controls.
### Media overlay
{% hint style="success" %}
The settings described below only apply to desktop mode.\
**Tip:** Enable **"Show overlay"** under "[Mobile settings](#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 [here](/unicorn-shopify-theme/dynamic-theme-sections.md#image).
### Content area
{% hint style="success" %}
**Tip:** Use the options in **"Mobile settings"** to adjust the layout on mobile. Read details [here](#mobile-settings-1).
{% endhint %}
**Position**\
The option helps to place the text box in a desired position: "Top", "Center", or "Bottom". Each option 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
### Layout options
**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.
**Top spacing /** **Bottom spacing**\
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
{% hint style="warning" %}
**Note!** The **"Hover animation"** and **"Image parallax"** drop-downs contain settings for adding image animation.\
Decide on an image animation effect from **one** of the drop-down lists, as these settings may conflict.\
Use the "None" option for the unnecessary feature.
{% endhint %}
**Hover animation**\
Adds an animation inside the image container. Choose the suggested option from the list:
* **"Use theme settings"**. Select the option if there is no need to apply animation settings for the section individually. In this case, set the animation effect for the banner image in the Theme Editor's global settings using the **"Banner image"** hover animation drop-down. Read the details on the following [help page](/unicorn-shopify-theme/theme-settings/animations.md#hover-animation).
* **"None"**. Deactivates the animation.
* **"Zoom in"**. Enlarges the image on mouse hover over the banner.
* **"Zoom out"**. Decreases the image on mouse hover over the banner.
{% hint style="info" %}
To use the options described below, ensure that "Opacity" is set to transparent.\
Select the media overlay in the *"Background"* or *"Gradient"* color pickers (read the details [above](#media)).
{% endhint %}
* **"Zoom in, add overlay opacity"** / **"Zoom out, add overlay opacity"**. Add the overlay opacity and zooming effect to an image using the option.
* **"Add overlay opacity"**. Enables opacity over the image.
Read more about the described options on the following [help page](/unicorn-shopify-theme/dynamic-theme-sections.md#animations).
**Image parallax**
{% hint style="info" %}
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.\ **Note!** The parallax settings need to be rechecked with the altitude settings described [above](#media).
### Mobile settings
**Enable**\
Activates mobile settings. The options below take precedence on mobile devices.
**Text position**\
Text can be placed "Below the image" or "Over the image". Display text over the image in the "Top", "Middle", or "Bottom". Select the desired option in the drop-down list.
**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).\ **Note!** The option can be used as a cover image for the **"Video"** and the **"YouTube or Vimeo URL"** media types.
**Image ratio**\
Change the media size using one of the options in the drop-down. The corresponding settings are shown after selecting the relevant option:
* **"Same as desktop"**. Uses the settings applied for the desktop.
* **"Adapt to image"**. Displays an image/video in its original aspect ratio.
**Note!** This option is automatically applied when the "[Image parallax](#animation)" feature is activated to generate the parallax effect.
* **"Fixed height"**. This option adapts an image/video size in pixels by setting the parameters on the **"Height"** scale. The height can be adjusted between 100 and 700 pixels.
* **"Aspect ratio"**. Select the option to adjust a media height as a percentage using the **"Aspect ratio"** scale. The parameters can be changed from 10% to 210%.
**"Aspect ratio"** indicators:\
\* 100% = Square media\
\* Less than 100% = Landscape\
\* More than 100% = Portrait\
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
\* For an ideal video aspect ratio (16:9), set the proportion to 56%.
* **"Fullscreen"**. Set this option to show media in the full width of a page. The image/video width will match the page width set in global settings if the "Use page width limit" option is ticked under *Theme settings ->* [*Page layout*](/unicorn-shopify-theme/theme-settings/page-layout.md).
* **"Fullscreen without header"**. Using this option, the media is cropped at the top and bottom. The top spacing is subtracted from the total height. Check how the settings work on the storefront to confirm they meet your expectations.
**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 [here](#media-overlay).
**Heading size**\
Select one of the options in the drop-down: "Large", "Medium", or "Small". The "Same as desktop" option saves the changes applied to the desktop.
**Text alignment**\
Align the text to "Left", "Center", or "Right".
### Mobile content area
**Set background opacity**\
Enable the option to highlight the content area using the background color. Applies to content displayed from the "[Header](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group.\ **Note!** Uses the background color applied in the "[Content area](#text)".
**Opacity**\
Use the scale to set the transparency of the background color.
### Secondary image
{% hint style="info" %}
This feature allows you to place two images side by side, enabling customers to compare the results seamlessly.
{% endhint %}
**Enable**\
To show the Before/After functionality for the banner, activate the option and apply the desired configurations. Once you enable this option, the corresponding settings for personalizing the second image appear below.
**Image**\
Set a second image by selecting it from the Theme Library or uploading it from your device.
**Note!** The **Before/After** functionality automatically switches to a simple banner on mobile view if you set a specific image in "[Mobile settings](#mobile-settings-1)".
### Scrolling text
{% hint style="warning" %}
**Note!** Use this feature to overlay a ticker on an image in desktop mode.\
It is disabled by default on mobile devices.
{% endhint %}
**Show scrolling text**\
Enable the option to display scrolling text. Additionally, this option activates other settings related to this feature.
**Text**\
Use the input field to highlight key messages, promotions, or featured content. Style your text using the formatting options at the top of the input field.
**Position**\
Arrange the ticker on the "Top", "Bottom", "Left", or "Right" side within the main image.
**Speed**\
Use the slider to adjust the running line speed in seconds from 1 to 5.
**Background opacity**\
The ticker background color can be set as solid or transparent using the scale. The parameters vary from 0 to 100.
**Background /** **Text**\
Use the paint palettes to colorize the scrolling line.
### Transparent header
Allows the header to overlay the section when a transparent header is used.
**Use inverted header colors**\
Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "[Background](/unicorn-shopify-theme/theme-settings/colors.md#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[Base](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.
{% tabs %}
{% tab title="Desktop" %}
{% endtab %}
{% tab title="Mobile" %}
{% endtab %}
{% endtabs %}