# Newsletter Popup

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

A newsletter 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.

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Upload the image that will be shown inside the newsletter popup.</td></tr><tr><td>Limit display</td><td>Set how many times the popup will appear to the same visitor.</td></tr><tr><td>Limit display сache lifetime</td><td>Specify how long (in days) the display limit is stored in the browser cache. After this period, the popup may appear again based on the limit setting.</td></tr><tr><td>Position</td><td><p>In the section, "Position" customization is as follows.</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>Select how the popup is triggered to open:</p><ul><li><strong>Time delay</strong>: The popup opens after a set number of seconds.</li></ul><ul><li><strong>Scroll position</strong>: The popup opens after the user scrolls a specified distance (in px or %)</li></ul><ul><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>Define how the popup should automatically close: </p><ul><li><strong>Time delay</strong>: Closes automatically after a set number of seconds.</li></ul><ul><li><strong>Scroll position</strong>: Closes when the user scrolls to a specific point on the page.</li></ul><ul><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></ul><ul><li>Slide</li></ul><ul><li>Zoom</li></ul><ul><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></ul><ul><li>Slide</li></ul><ul><li>Zoom</li></ul><ul><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 popup entirely on mobile devices. </p><p></p><p><strong>Disable scrolling</strong> </p><p>Prevents background page scrolling while the popup is active. </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></p><p>Displays the popup across all pages. </p></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><li>Scheme 6</li></ul></td></tr></tbody></table>

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FGgeBJARkoiTbDz3wqmqn%2Fnewsletter.png?alt=media&#x26;token=54fbcd20-2627-4572-8688-65456ee71164" 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><strong>Heading</strong><br>Enter text to display as a title in the section.<br><br><strong>Heading size</strong></p><p>Following is the font size customization of the heading in the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Subscribe form</td><td><p><strong>Placeholder input</strong> </p><p>Enter text that appears inside the email input field before the user types in newsletter form input field.</p><p></p><p><strong>Subscribe button label</strong> </p><p>Text displayed on the subscription button.</p><p></p><p><strong>Description</strong> </p><p>Add a short paragraph encouraging users to subscribe.</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="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FOVfxOwEVGRF4agCcurPI%2Fnewsletter-block.png?alt=media&#x26;token=7a5c8b64-7279-4f71-ad2b-b4bf29878750" alt=""><figcaption></figcaption></figure>
