# Popup

## The Popup appearance

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/1zflVi6siHRLQnHlUlB4/popup.png" alt=""><figcaption></figcaption></figure>

## Section settings

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/vxR3kXnWHwE0Lpg1JDgy/popup_section_settings.png" alt=""><figcaption></figcaption></figure>

| Settings                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Display mode**              | <ul><li><strong>Enable:</strong> If you enable it. The popup will enable in your store.</li><li><strong>Disable:</strong> If you disable it. The popup will be disabled in your store.</li><li><strong>Testing:</strong> Regardless of the relevant settings or dismissal, the 'Testing mode' popup appears, allowing you to review it at any time. When you're happy with the look, click the 'Enable' button.</li></ul>                                       |
| **Show on home page only**    | Allows for a popup only for the homepage.                                                                                                                                                                                                                                                                                                                                                                                                                       |
| **Show only for visitors**    | If a customer registers in your store. The customer will not be shown this popup. The popup will only be visible to visitors.                                                                                                                                                                                                                                                                                                                                   |
| **Delay time showing popup**  | You can specify when the popup should appear after your website has loaded. The time span is 2 to 60 seconds.                                                                                                                                                                                                                                                                                                                                                   |
| **"Don't show again" button** | When a customer will get the popup for the first time. If the customer will click on this button, the popup will not be displayed again for the specific customer.                                                                                                                                                                                                                                                                                              |
| **Show again after (days)**   | How long after clicking the **"Don't show again"** button will the customer see the popup again?                                                                                                                                                                                                                                                                                                                                                                |
| **Popup width**               | <ul><li><strong>Small:</strong> This is the smallest width of the popup. <strong>Desktop width</strong>: 500px, <strong>Mobile width</strong>: 100% with a 50px offset</li><li><strong>Medium (Default):</strong> If you disable it. The popup will be disabled in your store.</li><li><strong>Large:</strong> This is the highest width of the popup. <strong>Desktop width</strong>: 1000px, <strong>Mobile width</strong>: 100% with a 50px offset</li></ul> |
| **Content alignment**         | <p><strong>Left:</strong> Aligns the content to the left.<br><strong>Right:</strong> Aligns the content to the right.<br><strong>Center:</strong> Aligns the content to the center.</p>                                                                                                                                                                                                                                                                         |

## **Popup position Settings**

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

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/1zflVi6siHRLQnHlUlB4/popup.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bottom right	" %}

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/imLIXRGPK7QoLl1Z0SnC/bottom-right.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bottom left" %}

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/8pvR841Rft3op4Cy22KF/bottom-left.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## **Popup Image Settings**

| Settings                                   | Description                                                                                                                                                                       |
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Desktop image                              | This is an image for the popup.                                                                                                                                                   |
| **Desktop image placement**                | <p><strong>Image left:</strong> You can show the image on the left side of the popup.<br><strong>Image right:</strong> You can show the image on the right side of the popup.</p> |
| **Show as full-width image in background** | You can show it as a full-width image in the background of the popup. By default, it’s disabled.                                                                                  |
| **Overlay opacity**                        | It works by selecting the show as a full-width image in the background. You can add overlay opacity.                                                                              |

## **Colors settings**

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/fgFjDPFIa9B96vUM0Bei/color-image.png" alt=""><figcaption></figcaption></figure>

## Block settings

| Block name     | Settings                                                                                                                                                                                                                                             |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Heading**    | <ol><li>You can add the heading</li><li>You can also change the heading size</li></ol>                                                                                                                                                               |
| **Text**       | You can add a description in the popup                                                                                                                                                                                                               |
| **Email form** | <ol><li>You can add an email form</li><li>You can add a label for the email</li><li>Make button full width: If you enable it, the subscribe button will be full width </li></ol><p></p>                                                              |
| **Button**     | <ol><li>You can add a button</li><li>You can change the button size, style, and link.</li></ol><p><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/cTXv5z8tE0uvSl0nvbcU/popup%20button.png" alt="" data-size="original"></p> |
