# 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 %}

<mark style="color:$warning;">**Note!**</mark> 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).

Tick the **"Enable"** checkbox to use the newsletter subscription pop-up. It is placed on the bottom left corner of the screen. All the related settings will be displayed below after activating the option:

Activate the **"Show in admin"** to display the pop-up in the Theme Editor.

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

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 indicates the pop-up to be shown continuously.

The pop-up won’t appear to customers who logged into their accounts if you enable the **"Show to guest users only"**.

#### Colors

Use the **"Background"** color picker to specify the pop-up's background color.

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

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%2Fevw7qZG4PRxBwrXPgBn2%2Fnewsletter%20popup_desktop.png?alt=media&#x26;token=dddd540b-870b-4975-b507-f6f8e63ff3ae" 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%2F2DX1YC7SIEbmuRa8EG3w%2Fnewsletter%20popup_mobile.png?alt=media&#x26;token=fb1160b6-00bf-4afd-9531-da0ad2c97293" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

### Round popup

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

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

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. This option activates the list of related settings.

To view the pop-up in the Theme Editor, activate the **"Show in admin"** option.

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

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 pop-up using the **"Text placement"** drop-down. Select the required text type from the provided list of options. These options help to specify 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 pop-up on the "Left" or "Right" side of the screen.

The **"Rotation speed"** scale helps you to adapt the pop-up 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 to customers who logged into their accounts if you enable the **"Show to guest users only"**.

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%2FTtapHKNkyl6yyqIXCm4o%2Fround%20popup_desktop.png?alt=media&#x26;token=26060ef6-e5cd-4330-950e-47fb68c23502" 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%2F36WiZVQQXcbrazhV1DOm%2Fround%20popup_mobile.png?alt=media&#x26;token=4c936f4a-ced4-412a-9187-05d71e1716b5" 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. View the list of related settings after hitting the option.

Activate the **"Show in admin"** to display the pop-up in the Theme Editor.

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

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 indicates the pop-up to be shown continuously.

The pop-up won’t appear to customers who logged into their accounts if you enable the **"Show to guest users only"**.

#### Colors

Use the **"Background"** color picker to specify the pop-up'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 pop-up, 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. When this option is enabled, the pop-up will be displayed on both desktop and mobile devices. Activating the option, additional settings will appear in this section:

To view the customizations applied to the button in the Theme Editor, activate the **"Show in admin"** 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 pop-up.

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 indicates the pop-up to be shown continuously.

The pop-up won’t appear to customers who logged into their accounts if you enable the **"Show to guest users only"**.

#### Colors

Use the **"Background"** color picker to specify the pop-up'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 pop-up.

To change the text color and border of the confirmation button in the pop-up, 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 pop-ups?

{% 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>