> 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/cart-drawer/empty-cart-promotion.md).
# Empty cart: Promotion
## Empty cart: Promotion
#### 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 both desktop and mobile. The recommended image ratio is two-to-one (width-to-height).
**Image ratio**\
Use the drop-down option to adjust the media to the desired size. If an option includes additional settings, they will appear underneath the drop-down after selecting an option:
* **"Adapt to image"**. Displays an image in its original aspect ratio.
* **"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%\*.
\*The "Aspect ratio" option is applied to mobile by default. To modify the height specifically for mobile, use the options in the "[Mobile settings](#mobile-settings-1)" subsection.
**"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.
#### Media overlay
**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 the **"Mobile settings"** subsection 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 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 between 30% and 100%.
**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 promotion.
**Border color**\
Select the color used for the promotion border.
**Enable desktop corner radius**\
Rounds the corners of the promotion container on desktop devices for a softer appearance.
**Corner radius**\
Controls how rounded the promotion corners appear:
* **0 px** - square
* **20 px** - more rounded corners
#### Animation
{% hint style="warning" %}
**Note!** The **"Image behavior"** and **"Hover animation"** 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 %}
**Image behavior**\
Add dynamic motion to a static image by selecting one of the options:
* **"None"**. Disables smooth image motion.
* **"Ambient movement"**. The option adds a slight circular movement to an image.
* **"Zoom in out"**. Creates a smooth zoom-in and then zoom-out effect on the image.
* **"Zoom out in"**. Applies a zoom-out effect followed by image enlargement.
**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, decide on the animation image effect in the global settings of the Theme Editor by 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#animation).
#### Mobile settings
**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 [here](#media).
**Image ratio**\
Change the image size using one of the options in the drop-down. The corresponding settings will be shown after selecting the relevant option:
* **"Same as desktop"**. Select the option to apply the same settings as on the desktop.
* **"Adapt to image"**. Displays the image in its original aspect ratio.
* **"Fixed height"**. This option sets the image size in pixels by establishing the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 700 pixels.
* **"Aspect ratio"**. Select the option to adjust the image height as a percentage using the corresponding scale. The parameters can be changed from 10% to 210%.
**"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.
**Text position**\
Set the position to "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.
**Text alignment**\
Align the text to "Left", "Center", or "Right". To clarify the use of parameters, check the following [help page](/unicorn-shopify-theme/dynamic-theme-sections.md#mobile-settings).
#### Mobile content area
{% hint style="warning" %}
**Note!** The following settings are available only when the text is positioned over the image.
{% endhint %}
**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.
{% tabs %}
{% tab title="Desktop" %}
{% endtab %}
{% tab title="Mobile" %}
{% endtab %}
{% endtabs %}
{% hint style="success" %}
Available additional blocks: "[Heading](#heading)", "[Text and page content](#text-and-page-content)", "[Button](#button-second-button)" and "[Two buttons](#two-buttons)".\
**Tip:** Press **"Add block"** to use the desired block.
{% endhint %}
***
### Heading
**Heading**\
Enter a heading to display as the main banner title.\
Use it to highlight key messages, promotions, or featured content.
**Size**\
Change the size to "Large", "Medium", "Small", "X-Small", or "XX-Small".
**Heading size (mobile)**\
Controls the heading size on desktop devices. Select one of the options in the drop-down: "Same as desktop", "Large", "Medium", "Small", "X-Small", or "XX-Small".
**Color**\
Set the heading color.
**Apply color on mobile**\
The same color as for the desktop can be applied to the mobile view by enabling the option. This option will be shown after selecting a color in the color picker.
**Mobile color**\
Select the heading color to display on mobile devices.
***
### Text and page content
**Description**\
Use the input field to add accompanying text to the section title that will appear below.
**Page content**\
Optionally, insert a text paragraph in the **"Description"** placeholder and select a page in the source selector.\
Alternatively, connect only a page with the block using the source selector:
* Press the **"Select"** button to choose the existing page from the list;
* Or create a new page by pressing the **"Create page"** button. You will be redirected to your *Shopify admin -> Online Store -> Pages*, where you can add a new page. Read details on how to create pages in the following [article](https://help.shopify.com/en/manual/online-store/add-edit-pages).
**Color**\
Change the promotional color using the provided picker.
**Apply color on mobile**\
The same color as for the desktop can be applied to the mobile view by enabling the option. This option will be shown after selecting a color in the color picker.
**Mobile color**\
Set the paragraph color to display on mobile devices.
***
### Button
**Label**\
Use the field to add the call-to-action text.
**Link**\
To redirect customers to the desired page, use the link from the source selector or paste an external link.
**Style**\
Select the desired style in the drop-down: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following [help page](/unicorn-shopify-theme/dynamic-theme-sections.md#buttons).
**Color**\
Applies color settings according to the selected button style:
* **"Primary"**. Changes the button background color.
* **"Secondary"**. Colorizes the text and border.
* **"Link style"**. Changes the text color.
**Apply button colors on mobile**\
Turn on the option to use the same color on mobile. This option will be shown after selecting a color in the color picker above.
**Mobile color**\
Use the picker to set a button color specifically on mobile.
***
### Two buttons
Use the block to add buttons side by side. Press **"Add block"** to add a new block.\
The available settings are described [above](#button-second-button).