> For the complete documentation index, see [llms.txt](https://themihub.gitbook.io/suruchi-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themihub.gitbook.io/suruchi-theme/footer-group/popup.md).

# Popup

A full guide for to display popup to your store.

## The Popup appearance

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FtuA8GdmiBW6BIAnozgvL%2Fpopup.png?alt=media&amp;token=d229b62b-6ad6-435b-a72b-06427d4be989" alt=""><figcaption></figcaption></figure>

## Section settings

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FmROpzlskA4A2vg35xCzB%2Fpopup_section_settings.png?alt=media&amp;token=eadef14e-52c4-474d-b02f-f2d918b2e963" 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://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FtuA8GdmiBW6BIAnozgvL%2Fpopup.png?alt=media&amp;token=d229b62b-6ad6-435b-a72b-06427d4be989" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bottom right	" %}

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FPP6pZKm4nfEwJFuzK3iN%2Fbottom-right.png?alt=media&amp;token=4191b1c0-d177-4e40-be5b-5ec51c94a044" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bottom left" %}

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FxxCiI8mYJBmWvNZBLPPb%2Fbottom-left.png?alt=media&amp;token=36598730-8697-4f9a-a89b-725e9ebecd02" 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://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FGucpeelMQOWW372xSOoY%2Fcolor-image.png?alt=media&amp;token=d6a0ca70-812a-4df7-a4b1-19a006463635" 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://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FcD7DFG8Gpc1DvF0mp7kI%2Fpopup%20button.png?alt=media&amp;token=32da7d7e-6a24-43ca-9e54-c581fa3ce556" alt="" data-size="original"></p> |