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

# Newsletter Popup

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

A subscription popup is a user-friendly feature in your theme documentation that allows visitors to subscribe to updates, news, and important information related to your theme. This non-intrusive form typically appears as a small window or overlay, enabling users to easily input their email addresses and opt-in to receive notifications. Customization options are available to match the popup's appearance to your theme's design.

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

<table><thead><tr><th width="272">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Use "Image" to add the image to the section.</td></tr><tr><td>Image layout</td><td><p>Following is the image layout customization of the popup.</p><ul><li>Left</li><li>Right</li><li>Top</li><li>Bottom</li></ul></td></tr><tr><td>Image fit</td><td><p>The image fit customization setting is as follows:</p><ul><li>Contain</li><li>Cover</li></ul></td></tr><tr><td>Limit display</td><td>You can adjust the limit for displaying the popup using the 'Limit display' setting. You can show the popup a minimum of 0 and a maximum of 100 times.</td></tr><tr><td>Limit display сache lifetime (days)</td><td>You can specify the number of days for which the popup will be displayed. Enter the desired number of days here.</td></tr><tr><td>Position</td><td><p>To change the position of the popup, utilize the "Position" setting. Customization of the "Position" in the popup section is as follows:</p><ul><li>Top left</li><li>Top</li><li>Top right</li><li>Left</li><li>Center</li><li>Right</li><li>Bottom left</li><li>Bottom</li><li>Bottom right</li></ul></td></tr><tr><td>Desktop content position</td><td><p>To change the position of the content on the popup, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in the popup 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>Id</strong><br>By adding an ID to any text, and specifying that id as '#yourId' in this setting, clicking on the text will trigger the opening of the popup.<br>In these settings, only when you choose 'manual trigger' in the 'Trigger open' settings will it function as expected.<br><br><strong>Trigger open</strong></p><p>Customization of the "Trigger open" in the popup section is as follows:</p><ul><li>Time delay</li><li>Scroll position</li><li>Exit intent</li><li>Manual trigger</li></ul><p><strong>Time delay for a trigger open</strong><br>In these settings, you can define the timing for opening the popup.<br>only when you choose 'Time delay' in the 'Trigger open' settings will it function as expected.<br><br><strong>Open scroll type</strong><br>By customizing these settings, you can specify the scroll type in either pixels or percentages. Customization of the "Open scroll type" in the popup section is as follows:</p><ul><li>Px</li><li>%</li></ul><p><strong>Open scroll position</strong><br>After scrolling a certain number of pixels or a specified percentage, you can add that numerical value here to determine when the popup should open<br><br><strong>CSS selector for manual trigger</strong><br>By adding an class to any text, and specifying that class as '.yourClass' in this setting, clicking on the text will trigger the opening of the popup.<br>In these settings, only when you choose 'manual trigger' in the 'Trigger open' settings will it function as expected.</p><p>If the html element has buttons or links inside, then clicking on them will not work.<br><br><strong>Trigger close</strong></p><p>Customization of the "Trigger close" in the popup section is as follows:</p><ul><li>Time delay</li><li>Scroll position</li><li>None</li></ul><p><strong>Time delay for a trigger close</strong><br>In these settings, you can define the timing for closing the popup.<br>only when you choose 'Time delay' in the 'Trigger open' settings will it function as expected.<br><br><strong>Close scroll type</strong></p><p>By customizing these settings, you can specify the scroll type in either pixels or percentages. Customization of the "Close scroll type" in the popup section is as follows:</p><ul><li>Px</li><li>%</li></ul><p><strong>Close scroll position</strong><br>After scrolling a certain number of pixels or a specified percentage, you can add that numerical value here to determine when the popup should close.</p></td></tr><tr><td>Style</td><td><p><strong>Width</strong><br>Use this option to increase or decrease the popup width. You can set a minimum of “200px” and a maximum of “1920px”.<br><br><strong>Open animation</strong></p><p>Customization of the "Open animation" in the popup section is as follows:</p><ul><li>Fade</li><li>Slide</li><li>Zoom </li><li>Slide and fade</li></ul><p><strong>Close animation</strong></p><p>Customization of the "Close animation" in the popup section is as follows:</p><ul><li>Fade</li><li>Slide</li><li>Zoom </li><li>Slide and fade</li></ul><p><strong>Show overlay</strong><br>When this checkbox is enabled, the overlay will be displayed when the popup is triggered.</p></td></tr><tr><td>Advanced</td><td><strong>Mobile disable</strong><br>When 'Mobile disable' is enabled, the popup will be disable on mobile.<br><br><strong>Disable scrolling</strong><br>When 'Disable scrolling' is activated, it will disable scrolling on the body of the page.<br><br><strong>Click overlay to close</strong><br>Enabling this option will cause popup to close when user clicks on overlay.<br><br><strong>Press ESC to close</strong><br>Checking this will cause popup to close when user presses ESC key.<br><br><strong>Press F4 to close</strong><br>Enabling this option will cause popup to close when user presses F4 key.<br><br><strong>Show on homepage</strong><br>By checking this checkbox, the popup will only be displayed on the homepage.<br><br><strong>Show on product and category</strong><br>By enabling this checkbox, the popup will only be displayed on the product and category page.<br><br><strong>Show on all pages</strong><br>Enabling this checkbox will display the popup on all pages except for the customer page.</td></tr><tr><td>Color scheme</td><td><p>In this section, 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></ul></td></tr></tbody></table>

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

## Add block

To add block to the Popup section, 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><strong>Heading</strong><br>Enter text to display as a title on the popup section.</td></tr><tr><td>Subscribe form</td><td><p>Click on the "Add block" and select the Button.</p><p></p><p><strong>Placeholder input</strong><br>Enter text to display as a placeholder input on the popup section.<br><br><strong>Button label</strong><br>Use "Button label" to add a label to the Button in the section.<br><br><strong>Button style</strong></p><p>Customization of the "Button style" in the popup section is as follows:</p><ul><li>Primary</li><li>Secondary</li><li>Tertiary</li></ul><p><strong>Button position column</strong><br>Enabling this checkbox will display the button position in column.<br></p><p><strong>Description</strong><br>Enter text to display as a description on the popup section.</p></td></tr><tr><td>Social links</td><td><strong>Icon color</strong><br>Using this setting, you can change the icon color<br><br>- By checking the checkbox below, you can display the social icons.</td></tr></tbody></table>

<figure><img src="/files/1fGaEXqKY7vGNhBmpdFv" alt=""><figcaption></figcaption></figure>