---
description: >-
  In this section, you can control the visibility of popups in the online store
  such as the Newsletter popup, Round popup, Cookies popup, and Age verification
  popup.
---

# Popups

#### Enable popups container

Activate the option to fix the position of the popups to the page width if the "Enable page width" option is ticked in _Theme settings ->_ [_<mark style="color:blue;">Layout</mark>_](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/layout).

By disabling the option, the popups will appear outside the predefined width of store pages:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F2TKDG9P3mtLwR0YRjLAb%2Fpopups_width.png?alt=media&#x26;token=0ef9a2be-436d-4595-a64f-d7ad13af755a" alt=""><figcaption></figcaption></figure>

### Newsletter popup

{% hint style="info" %}
The pop-up will appear on the Home page when landing on a page.
{% endhint %}

Tick the **"Enable"** checkbox to use the newsletter subscription pop-up. It is placed on the bottom left corner of the screen.

\*Subscribers will be automatically added to the customer list in the Shopify admin. The complete information can be found in the [<mark style="color:blue;">article</mark>](https://help.shopify.com/en/manual/customers/manage-customers).

Activate the **"Show popup in admin panel"** to display the popup in the Theme Editor.

Use the **"Delay"** scale to control when the pop-up will occur after someone enters the store. The delay time can vary from 0 to 60 seconds.

On the **"Cookies life"** scale, set the time (in minutes) for when the pop-up will reappear on a page after the "X" button is pressed. You can adjust the time from 0 to 60 minutes. A default value of 0 minutes means the pop-up will be shown continuously.

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

Tick the **"Show on mobile"** checkbox to display the pop-up on mobile.

#### Colors

Use the **"Background"** color picker to specify the popup's background color.

In the **"Text"** picker, set the color that will be applied to all the texts in the popup.

The **"Border"** item lets you change the default border color.

To change the text color inside the input field individually, use the **"Input text"** item.

The icon color can be specified in the corresponding color picker.

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

In the following examples, you can view how the pop-up might display 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%2FQgIEq1mf37mQ0CEmLExB%2Fnewsletter%20popup_desktop.png?alt=media&#x26;token=87d1d746-5b2c-464e-86bd-0d0b8c9c0457" 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%2FlRDgqpCmKSwZurDvbkpn%2Fnewsletter%20popup_mobile.png?alt=media&#x26;token=a7d06087-e748-4e2b-b68b-655e25fe5012" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

### Round popup

{% hint style="info" %}
The pop-up works on all store pages.
{% endhint %}

This pop-up can advertise a product with a sale proposition, promotion, shipping information, and more.

Hit the **"Enable"** checkbox to start the round popup. It will appear above all other pop-ups in the bottom corner of all store pages.

To view the popup in the Theme Editor, activate the **"Show popup in admin panel"** option.

Enter any promotional string into the **"Text"** field.

Use the **"Link"** source selector to redirect visitors to the relevant page when they press the pop-up.

The **"Width"** scale determines the pop-up size. Set the value from 200 to 350 pixels.

Specify the type of text appearance in the popup using the **"Text placement"** drop-down. Select the required text type from the provided list of options. These options help define whether text should be duplicated and are distinguished by spaces.

In the **"Image"** selector, choose the image from the library or upload a new one from your device. The image will be placed right in the center of the pop-up.

Use the **"Position"** picker to place the popup on the "Left" or "Right" side of the screen.

The **"Rotation speed"** scale helps you to adapt the popup turnover speed from 1 to 8.

Use the **"Delay"** scale to control when the pop-up will occur after someone enters the store. The delay time can vary from 0 to 60 seconds.

On the **"Cookies life"** scale, set the time (in minutes) for when the pop-up will reappear on a page after the "X" button is pressed. You can adjust the time from 0 to 60 minutes. A default value of 0 minutes means the pop-up will be shown continuously.

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

Tick the **"Show on mobile"** checkbox to display the pop-up on mobile.

Change the colors of popup elements using the provided color pickers: **"Background"**, **"Text"**, **"Border"**, and **"Close button"**.

The examples of the pop-up on the desktop and mobile can be viewed below:

{% tabs %}
{% tab title="Desktop" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FdWbzh8Xsew7MdVtA6aXl%2Fround%20popup_desktop.png?alt=media&#x26;token=e84bf36e-64be-4002-b6d0-2c1c986e6136" 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%2FNjQ2VFvBUXYpW3YsESJl%2Fround%20popup_mobile.png?alt=media&#x26;token=9770de4c-0c58-4ce3-8e00-7dccb146ba60" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Cookies popup

{% hint style="info" %}
This pop-up can be displayed on each page of a store.
{% endhint %}

Activate the pop-up by pressing the **"Enable"** option.

Activate the **"Show popup in admin panel"** to display the popup in the Theme Editor.

To link the Privacy Policy button to the desired page, choose the destination in the **"Link button URL"** resource selector or paste an external link into the field.

Use the **"Delay"** scale to control when the pop-up will occur after someone enters the store. The delay time can vary from 0 to 60 seconds.

On the **"Cookies life"** scale, set the time (in minutes) for when the pop-up will reappear on a page after the "X" button is pressed. You can adjust the time from 0 to 60 minutes. A default value of 0 minutes means the pop-up will be shown continuously.

The popup won’t appear for customers who logged their accounts if you activate the **"Show to guests users only"**.

Tick the **"Show on mobile"** checkbox to display the pop-up on mobile.

#### Colors

Use the **"Background"** color picker to specify the popup's background color.

In the **"Text"** picker, set the color that will be applied to the main text paragraph.

The **"Policy button"** item lets you change the color of the link button.

To change the text color and border of the confirmation button in the popup, use the **"Accept button"** item.

In the following examples, you can view how the cookie pop-up might display 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%2FGA0woHT45gbhbB9JWfaF%2Fcookies%20popup_desktop.png?alt=media&#x26;token=a42b9eeb-684c-424a-8d85-7704568fd1f3" 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%2FKpZJRqHrVZEZcWv44aXA%2Fcookies%20popup_mobile.png?alt=media&#x26;token=82c0d042-2823-41f7-94cc-15fff6fbdfbe" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Age verification popup

{% hint style="warning" %}
**Note!** By confirming your age is above 18 years, the information is stored in cookies for a year. Subsequently, when a buyer revisits the store, the pop-up will not be displayed since the information retrieved from the cookies will be utilized.
{% endhint %}

To display the pop-up once a visitor enters the online store, activate the **"Enable"** option. The pop-up will be displayed on both desktop and mobile when triggering the option.

If you need to view the customizations applied to the button in the Theme Editor, activate the **"Show popup in admin panel"** checkbox.

Choose the destination in the **"Link for an exit button"** resource selector or paste an external link to the field in order to redirect visitors to the desired page by pressing the "Exit" button in the popup.

Use the **"Delay"** scale to control when the pop-up will occur after someone enters the store. The delay time can vary from 0 to 60 seconds.

On the **"Cookies life"** scale, set the time (in minutes) for when the pop-up will reappear on a page after the "X" button is pressed. You can adjust the time from 0 to 60 minutes. A default value of 0 minutes means the pop-up will be shown continuously.

The popup won’t appear for customers who logged their accounts if you activate the **"Show to guests users only"**.

#### Colors

Use the **"Background"** color picker to specify the popup's background color.

In the **"Text"** picker, set the color that will be applied to the heading and main text paragraph.

Set the color in the **"Border"** color picker to highlight the popup.

To change the text color and border of the confirmation button in the popup, use the **"Accept button"** item.

The **"Exit button"** item lets you change the background color of the second button.

In the following examples, you can view how the cookie pop-up might display 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%2FZRkFHC0HYxz4nRDoBbx3%2Fage%20verification%20popup_desktop.png?alt=media&#x26;token=cff0c7c3-6fc8-41dc-9738-2d961e717350" 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%2FylvRdMudpl4TWoJVMxJY%2Fage%20verification%20popup_mobile.png?alt=media&#x26;token=19dbaa79-a45d-4a83-bdac-d1e8d18d9eba" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### How to edit texts in the popups?

{% hint style="success" %}
**Tip:** The texts can be edited in your _Shopify admin -> Edit default theme content -> Theme content_.
{% endhint %}

* Press the dotted \[...] button in the top left corner to navigate to Theme content:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FeDiPQFBzaPy8GXV5yiMp%2Fedit%20content_editor.png?alt=media&#x26;token=2b58b23f-d946-4a0c-8169-72686d08f70c" alt=""><figcaption></figcaption></figure>

* Then, choose the tab **"General"** and scroll down to the pop-up settings:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FBUfMrMOD16tGc7O4pDEM%2Fadmin_edit%20popups.png?alt=media&#x26;token=68195dd7-db14-41cb-b3d1-0a933956a663" alt=""><figcaption></figcaption></figure>
