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

# Newsletter Popup

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The **Newsletter** section allows you to display a customizable popup that encourages visitors to subscribe to your newsletter. You can configure the popup image, display frequency, position, trigger conditions, and appearance to engage customers without interrupting their shopping experience.

The popup can be displayed based on **time delay** or **scroll position**, and you can control how often it appears for returning visitors.

{% hint style="info" %}
**Recommendation Size**\
Newsletter popup image size: 1154x590
{% endhint %}

## How to add a Newsletter popup <a href="#how-to-add-a-product-bundle-section" id="how-to-add-a-product-bundle-section"></a>

{% hint style="success" %}
**Steps**

1. Open **Online Store → Themes → Customize**.
2. Under the **Overlay Group**, select **Newsletter**.
3. Configure the popup image and display settings.
4. Choose the **Open animation** and **Close animation**.
5. Enable **Show overlay** if you want to dim the page behind the popup.
6. Configure the **Advanced** options, including mobile visibility, scrolling behavior, and popup close actions.
7. Choose the pages where the popup should appear.
8. Select a **Color scheme** that matches your store's branding.
9. Customize the popup content using the **Heading**, **Subscribe Form**, and **Social Links** blocks.
10. Click **Save** to apply your changes.
    {% endhint %}

<table><thead><tr><th width="247">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Upload an image to display alongside the newsletter content in the popup.</td></tr><tr><td>Limit display</td><td>Set the maximum number of times the popup is displayed to each visitor.</td></tr><tr><td>Limit display сache lifetime</td><td>Specify how many days the popup display count is remembered before it resets.</td></tr><tr><td>Position</td><td><p>Choose where the popup appears on the screen.</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul></td></tr><tr><td>Content position</td><td><p>Customization of the "Content position" in this section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Triggers</td><td><p><strong>Trigger open</strong> </p><p>Choose when the popup should open. Available trigger options depend on your selected configuration.</p><p></p><ul><li><strong>Time delay</strong>: The popup opens after a set number of seconds.</li><li><strong>Scroll position</strong>: The popup opens after the user scrolls a specified distance (in px or %)</li><li><strong>Exit intent</strong>: The popup opens when the user moves the cursor toward the browser’s close button (desktop only).</li></ul><p></p><p><strong>Time delay for a trigger open</strong>  </p><p>If Time delay is selected, specify the delay (in seconds) before the popup appears. </p><p></p><p><strong>Open scroll type</strong> </p><p>Following is the open scroll type customization in the newsletter section:</p><ul><li><strong>Px</strong>: Trigger based on a fixed number of pixels.</li><li><strong>%</strong>: Trigger based on the percentage of the page scrolled. </li></ul><p></p><p><strong>Open scroll position</strong> </p><p>Enter the pixel or percentage value where the popup should appear when Scroll position is selected. </p><p></p><p><strong>Trigger close</strong> </p><p>Choose how the popup should close automatically.</p><ul><li><strong>Time delay</strong>: Closes automatically after a set number of seconds.</li><li><strong>Scroll position</strong>: Closes when the user scrolls to a specific point on the page.</li><li><strong>None</strong>: The popup remains until manually closed. </li></ul><p></p><p><strong>Time delay for a trigger close</strong> </p><p>If Time delay is selected, set the number of seconds before the popup closes automatically. </p><p></p><p><strong>Close scroll type</strong> </p><p>Choose the unit (px or %) for scroll-based closing triggers. </p><p></p><p><strong>Close scroll position</strong> </p><p>Enter the pixel or percentage value at which the popup will automatically close if <strong>scroll</strong> is selected as the trigger close option.</p></td></tr><tr><td>Style</td><td><p><strong>Open animation</strong> </p><p>Choose the animation style for when the popup appears. </p><ul><li>Fade</li><li>Slide</li><li>Zoom</li><li>Slide and fade</li></ul><p></p><p><strong>Close animation</strong> </p><p>Select the animation used when the popup closes.</p><ul><li>Fade</li><li>Slide</li><li>Zoom</li><li>Slide and fade</li></ul><p></p><p><strong>Show overlay</strong> </p><p>Enable this option to display a background overlay behind the popup.</p></td></tr><tr><td>Advanced</td><td><p><strong>Mobile disable</strong> </p><p>Disable the newsletter popup on mobile devices.</p><p></p><p><strong>Disable scrolling</strong> </p><p>Prevent customers from scrolling the page while the popup is open.</p><p></p><p><strong>Click overlay to close</strong> </p><p>Allows users to close the popup by clicking anywhere outside the popup (on the overlay). </p><p></p><p><strong>Press ESC to close</strong> </p><p>Allows users to close the popup using the <strong>Esc</strong> key on their keyboard. </p><p></p><p><strong>Press F4 to close</strong> </p><p>Allows users to close the popup using the <strong>F4</strong> key on their keyboard. </p><p></p><p><strong>Show on homepage</strong> </p><p>Displays the popup only on the <strong>homepage</strong>. </p><p></p><p><strong>Show on product and category</strong></p><p>Displays the popup on <strong>product</strong> and <strong>collection/category</strong> pages. </p><p></p><p><strong>Show on all pages</strong> </p><p>Display the popup throughout the store except pages excluded by the theme (such as the customer account pages).</p></td></tr><tr><td>Color scheme</td><td><p>Select the color scheme used for the newsletter popup. you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr></tbody></table>

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

## Add block

To add block to the Newsletter popup, click on the 'Add block'. There are many options available , as you can see in the below points and screenshot.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td><p>The <strong>Heading</strong> block allows you to add a customizable title to the Newsletter popup. </p><p></p><p>It helps introduce the popup and encourages visitors to subscribe by displaying a clear, attention-grabbing heading.</p><p></p><p><strong>Text</strong><br>Enter the heading text displayed at the top of the Newsletter popup. Use the rich text editor to apply formatting such as bold, italic, links, and lists.</p></td></tr><tr><td>Subscribe form</td><td><p>The <strong>Subscribe Form</strong> block allows you to customize the newsletter subscription form displayed in the popup.</p><p></p><p><strong>Placeholder input</strong> </p><p>Enter the placeholder text displayed inside the email input field before the customer enters their email address.</p><p></p><p><strong>Subscribe button label</strong> </p><p>Enter the text displayed on the subscribe button.</p><p></p><p><strong>Description</strong> </p><p>Add a short description explaining the benefits of subscribing. The rich text editor allows you to apply formatting such as <strong>bold</strong>, <em>italic</em>, links, and lists.</p></td></tr><tr><td>Social links</td><td>Add this block to show social media icons in newsletter section.</td></tr></tbody></table>

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