> 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/popup.md).

# Popup

{% hint style="warning" %}
**Note!** By adding the section in the "Template" area, the pop-up will be displayed only on a specific page. To show the pop-up on all pages of the entire store, apply configurations in the "Popups" area.
{% endhint %}

<figure><img src="/files/1QNU8tiGpOYaU7PCQKTH" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Use the blocks specified in the section to add the necessary content: "[<mark style="color:blue;">Collection</mark>](/unicorn-shopify-theme/dynamic-theme-sections/popup/collection.md)", "[<mark style="color:blue;">Countdown timer</mark>](/unicorn-shopify-theme/dynamic-theme-sections/popup/countdown-timer.md)", "[<mark style="color:blue;">Image</mark>](/unicorn-shopify-theme/dynamic-theme-sections/popup/image.md)", "[<mark style="color:blue;">Newsletter signup form</mark>](/unicorn-shopify-theme/dynamic-theme-sections/popup/newsletter-signup-form.md)", "[<mark style="color:blue;">Promo code</mark>](/unicorn-shopify-theme/dynamic-theme-sections/popup/promo-code.md)", "[<mark style="color:blue;">Social media</mark>](/unicorn-shopify-theme/dynamic-theme-sections/popup/social-media.md)", "[<mark style="color:blue;">Text</mark>](/unicorn-shopify-theme/dynamic-theme-sections/popup/text.md)", and  "[<mark style="color:blue;">Two buttons</mark>](/unicorn-shopify-theme/dynamic-theme-sections/popup/two-buttons.md)".\
**Tip:** Press **"Add block"** to use the desired block.\
Move content in the popup by dragging and dropping the related block to the desired position.
{% endhint %}

<mark style="color:orange;">**Note!**</mark> If the pop-up contains more content than its height allows, the entire content can be viewed by scrolling up and down on both desktop and mobile.

**Show on mobile**\
Enable the checkbox to display the pop-up on mobile.

**Trigger**\
Use the drop-down to specify the pop-up appearance on store pages:

* **"Delay"**. Select the option to display the pop-up after the time specified on the scale below.

**Delay**\
Adjust the pop-up's delay time using the scale. The delay time for displaying a pop-up on a page can be set from 0 to 60 seconds.

* **"Exit intent"**. The pop-up appears just before a user attempts to leave the page or close the store. The pop-up is triggered when the mouse is moved to the edge of the screen or beyond the edges, indicating that the user is about to leave the page.
* **"Copy to clipboard"**. The pop-up starts when users copy any text on store pages.

**Cookie duration**\
Determines how long the popup remains hidden after a visitor closes it. Enter the number of minutes to keep the popup hidden.

* Set the value to **0** to display the popup every time the page is loaded.
* Enter a higher value to prevent the popup from reappearing until the specified time has passed.

**Show to guests only**\
Display the popup only to visitors who are not logged in to their customer accounts.\
When enabled, logged-in customers will not see the popup. This is useful for displaying promotions, newsletters, or welcome messages exclusively to new or anonymous visitors.

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

**Lock background**\
Determine whether to use a freeze effect and apply a semi-color overlay outside the popup.

* **"Auto"**. Maintains the preset theme settings.
* "**Yes"**. Select the option to dim the background and freeze the scroll.
* **"No"**. Cancels the effect.

**Width**\
Adjust the pop-up width on the scale from 300 to 500 pixels.

**Min height**\
Set the pop-up size on the scale from 0 to 700 pixels.

**Alignment**\
Aligns content in the pop-up to the left or centers it.

**Use custom corner radius**\
Rounds the corners of the pop-up for a softer appearance.

**Corner radius**\
Controls how rounded the promotion corners appear:

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

### Colors

**Background**\
Sets the background color of the pop-up.

**Close button**\
The color of the "X" button can be changed using the item.

**Show shadow**\
Adds the shadow effect outside the pop-up and displays the related setting.

**Shadow**\
The shadow color can be determined using the item.

### 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 "[<mark style="color:blue;">Background</mark>](/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 "[<mark style="color:blue;">Base</mark>](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="/files/rAmhSVDzMzT7RCXQ8nFC" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/FR6U488JpzINCjM1PO1b" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}