# 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FTNsGJjoSeO9lDtGkj3Hq%2Fpopups.png?alt=media&#x26;token=5eb59587-09a3-4d27-a6fb-056e1afcf149" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Tip:** Use the blocks specified in the section to add the necessary content: "Image", "Text", "Newsletter form", "Buttons", "Social media", "Time countdown", "Collection", and "Promotional code".

Move each block in the popup by dragging and dropping it 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.

Tick the **"Show in admin"** checkbox to display the pop-up in the Theme Editor. By disabling the option, the pop-up will only appear in the preview. In that case, save the settings and check the pop-up on the storefront.

To display the pop-up on mobile, tick the **"Show on mobile"** checkbox.

Use the **"Show trigger"** drop-down to specify the pop-up appearance on the Home page:

* **"Delay"**. Select the option to display the pop-up after the time specified on the scale below.
* **"Exit intent"**. The pop-up will appear 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.

**Delay**

If you choose the "Delay" option in the drop-down above, you may want to 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 1 to 60 seconds.

**Cookies life**

Determine the cookie's life on a scale from 1 to 60 minutes.

The pop-up won’t appear for customers logged into their accounts if you activate the **"Show to guests users only"**.

The **"Position"** option helps to place the text box in a desired position: "Top", "Center", or "Bottom". Each of the options contains the settings, such as "Left", "Center", and Right". Select the desired option by operating the drop-down that best fits your needs. The "Auto" option sets the pre-designed parameters of the theme style.

Using the **"Freeze screen"** picker, determine whether to use a freeze effect and apply a semi-color overlay outside the popup. Select "Yes" for background dimming and freezing a scroll, "No" to cancel the effect, and the "Auto" option to maintain the pre-set theme settings.

**Width**

The width settings can be adjusted on the scale from 300 to 500 pixels.

**Min height**

Set the pop-up size on the scale from 0 to 700 pixels.

Text and social icons alignment in the pop-up can be changed to "Left" or "Center" using the **"Alignment"** picker.

**Border radius**

<mark style="color:orange;">**Note!**</mark> The global theme settings will be applied to the pop-up by disabling this option. These configurations can be checked in *Theme settings -> Styles*, "[<mark style="color:blue;">Image</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/styles)".

Activate the **"Enable corner radius"** option to adjust settings in the current section using the **"Corner radius"** scale. The radius can be changed from 0 to 20 pixels.

### Colors

Use the **"Background"** color picker to specify the color of the pop-up.

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

Hit the **"Enable shadow"** checkbox to add the shadow effect outside the pop-up and display the "Shadow" setting.

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

### Transparent header

The provided setting is applied to the "[<mark style="color:blue;">Header - transparent</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/advanced-settings)" feature.

Enable the **"Invert header colors"** to link the color of the Header elements, such as navigation menus, Search, Compare, Favourites, Account, and Cart icons, to the "[Background](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/colors#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[Base](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/colors#base)" item.

In the following example, you can view how the section might be displayed in a store:

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

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FWJmjX5eaXieddbctJkTS%2Fpopup_desktop.png?alt=media&#x26;token=cd909f44-c9b6-447f-b598-bb899f8d78ac" 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%2FXrWMyq0UDx8vZuWY5HE0%2Fpopup_mobile.png?alt=media&#x26;token=d28b9f32-fa5f-4a23-a922-dbb560fa48db" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}