# 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="/files/YtIqZBQa8VFULAp93m7M" 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="/files/sPaWncOH7CLKRAFuoiDW" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/FGCAltw00EZkcohE8O7b" 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="/files/qbF2VjmhiSQa2LmZ0mfZ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/P7CuOAU4TJozur1DVgNe" 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="/files/XKVxMBhpmCU0GQhCZLSH" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/cVpLJwWIm3jf1RRJZ5Af" 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="/files/qY5Ogx79A4qWkzFhNHWE" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/XCb8eNeAlJR1j0fJv4tv" 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="/files/qJycPT6yjY6q2SEk30W8" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/Gg2QSkRYj30RNzNhHmrD" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/popups.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.