> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/cello-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/cello-documentation/overlay-group/newsletter-popup.md).

# Newsletter Popup

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

The **Popup** feature allows you to display a promotional or newsletter popup over your storefront. It can be used to capture email subscriptions, promote special offers, announce new launches, or share important store messages.

The Cello Popup supports an image, marquee text, flexible image placement, display limits, trigger conditions, and positioning controls. You can also add content blocks such as **Heading, Subscribe Form,** and **Social Links**.

{% hint style="info" %}
**Recommendation Size**\
Popup image desktop size: 750x500
{% endhint %}

## How to Add and Configure Popup

{% 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="272">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td><p>Upload an image to display inside the popup.</p><p></p><p>Use an image that supports the purpose of your popup, such as:</p><ul><li>Promotional campaigns</li><li>New product launches</li><li>Newsletter signups</li><li>Seasonal offers</li><li>Brand announcements</li></ul><p></p><p><strong>Tip:</strong> Use a high-quality image that works well with the selected image layout.</p></td></tr><tr><td>Marquee text</td><td><p>Enter the scrolling text displayed within the popup.</p><p>This can be used for short promotional or informational messages.</p><p></p><p><strong>Example:</strong></p><p><code>Welcome to our store</code></p><p></p><p>Other examples:</p><p><code>Get 10% Off Your First Order</code></p><p><code>Free Shipping on Orders Over $100</code></p><p></p><p>Keep the message short so it remains easy to read while scrolling.</p></td></tr><tr><td>Image layout</td><td><p>Controls the position of the popup image relative to its content.</p><ul><li><strong>Left</strong> – Displays the image on the left side of the popup.</li><li><strong>Right -</strong> Displays the image on the Right side of the popup.</li><li><strong>Top</strong> - Displays the image on the Top of the popup.</li><li><strong>Bottom</strong> - Displays the image on the Top of the popup.</li></ul><p><strong>Recommended:</strong> Use <strong>Left</strong> or another side-by-side layout when the image and signup/content area should be displayed together.</p></td></tr><tr><td>Image fit</td><td><p>Controls how the uploaded image fits inside its available area.</p><ul><li><strong>Contain</strong> – Displays the complete image without cropping.</li><li><strong>Cover</strong> – Fills the available area and may crop parts of the image.</li></ul></td></tr><tr><td>Limit display</td><td><p>Controls how many times the popup can be displayed to a visitor.</p><p></p><p>You can show the popup a minimum of 0 and a maximum of 100 times. </p><p></p><p>For example, setting the value to <strong>1</strong> can limit the popup to one display, while a higher value allows it to appear more frequently.</p></td></tr><tr><td>Limit display сache lifetime (days)</td><td><p>Controls how long the popup display limit is remembered for a visitor.</p><p></p><p>For example, setting the value to <strong>30 days</strong> means the display limit is remembered for that period.</p><p></p><p>This helps prevent the popup from repeatedly appearing to the same visitor within a short period.</p></td></tr><tr><td>Position</td><td><p>Controls where the popup appears on the screen.</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>Content position</td><td><p>Controls the horizontal alignment of the popup's content.</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Triggers</td><td><p>The <strong>Triggers</strong> settings control when the popup should appear to customers.</p><p></p><p><strong>Trigger open</strong></p><p>Select the condition that determines when the popup opens.</p><ul><li><strong>Time delay</strong> — Opens the popup after a specified number of seconds.</li><li><strong>Scroll position</strong> — This allows the popup to appear after the visitor has scrolled to a specified position on the page.</li><li><strong>Exit intent</strong> — Opens the popup when the customer is about to leave the page.</li></ul><p></p><p><strong>Time delay for a trigger open</strong><br>Sets the delay before the popup opens when the selected trigger supports a time delay.<br></p><p><strong>Example:</strong></p><p><code>5 sec</code></p><p>A value of <code>0</code> opens the popup without an additional delay.<br><br><strong>Open scroll type</strong><br>Determines how the scroll position is measured.</p><ul><li><strong>Px —</strong> Measures the scroll position in pixels.</li><li><strong>% —</strong> Measures the scroll position as a percentage of the page.</li></ul><p></p><p><strong>Open scroll position</strong><br>Defines the scroll position at which the popup opens.</p><p></p><p><strong>For example:</strong></p><p><code>15</code></p><p>When <strong>%</strong> is selected, the popup opens after approximately 15% of the page has been scrolled.<br><br><strong>Trigger close</strong></p><p>Determines when the popup should automatically close based on a selected trigger.</p><ul><li><strong>Time delay</strong> — Closes the popup after a specified number of seconds.</li><li><strong>Scroll position</strong> — Closes the popup when the customer reaches the configured scroll position.</li><li><strong>None —</strong> Disables automatic closing, allowing the customer to close the popup manually.</li></ul><p></p><p><strong>Time delay for a trigger close</strong><br>Controls how long the popup remains open before closing when a time-based close trigger is used.</p><p></p><p><strong>Example:</strong></p><p><code>20 sec</code></p><p></p><p>A value of <strong>20 seconds</strong> closes the popup after the configured delay.<br><br><strong>Close scroll type</strong></p><p>Determines how the closing scroll position is measured.</p><ul><li><strong>Px —</strong> Uses pixels.</li><li><strong>% —</strong> Uses page percentage.</li></ul><p></p><p><strong>Close scroll position</strong><br>Defines the scroll position at which the popup closes.</p><p></p><p><strong>Example:</strong></p><p><code>50</code></p><p></p><p>When <strong>%</strong> is selected, the popup can close after the visitor reaches approximately 50% of the page.</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>Controls how 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>Controls how the popup disappears:</p><ul><li>Fade</li><li>Slide</li><li>Zoom </li><li>Slide and fade</li></ul><p></p><p><strong>Show overlay</strong><br>Adds a background overlay behind the popup.</p><p></p><p>When enabled, the rest of the storefront is visually separated from the popup, helping customers focus on the popup content.</p><p></p><p><strong>Recommended:</strong> Keep this enabled for promotional and newsletter popups.</p></td></tr><tr><td>Advanced</td><td><p><strong>Mobile disable</strong><br>Disables the popup on mobile devices.</p><p></p><p>Enable this if the popup is designed primarily for desktop or if the popup content does not provide a good mobile experience.</p><p></p><p><strong>Recommended:</strong> Keep it disabled only when your popup is properly optimized for mobile.<br><br><strong>Disable scrolling</strong><br>Prevents customers from scrolling the page while the popup is open.</p><p></p><p>This keeps the popup as the primary focus until it is closed.</p><p></p><p><strong>Recommended:</strong> Enable this for important modal-style popups where background scrolling could be distracting..<br><br><strong>Click overlay to close</strong><br>Allows customers to close the popup by clicking outside the popup content on the overlay.</p><p></p><p><strong>Recommended:</strong> Keep this enabled to provide an easy and intuitive closing option.<br><br><strong>Press ESC to close</strong><br>Allows desktop users to close the popup by pressing the <strong>Esc</strong> key.</p><p></p><p><strong>Recommended:</strong> Enable this for better desktop usability and accessibility.<br></p><p><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.</p></td></tr><tr><td>Color scheme</td><td><p>The newsletter popup section background color appears behind the text:</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>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FX4lsRuWZIT6fDaJVyf2h%2Foverlay-popup.png?alt=media&amp;token=bc0a45d6-0f41-4770-84b0-af392b0f4e0d" alt=""><figcaption></figcaption></figure></div>

## 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></p><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 display the social icons.</td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2F9m8ZeqsvColnOpAVh8aT%2Foverlay-popup-block.png?alt=media&amp;token=a66bafe3-8a6f-4649-8c88-7dc64ffb7986" alt=""><figcaption></figcaption></figure></div>