> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/overlay-group/newsletter-popup.md).
# Newsletter popup
A timed popup that collects email subscribers and can reward sign-ups with a discount code. It has two built-in parts — a **Signup Form** and a **Success Message** — and switches to the success message automatically once someone subscribes.
***
## Structure
```
┌────────────────────────────┐
│ Signup Form │ ← shown on first visit
│ [ Heading ] │
│ [ Email input ] [Submit] │
│ [ Disclaimer text ] │
└────────────────────────────┘
↓ on submit
┌────────────────────────────┐
│ Success Message │ ← shown after subscribing
│ [ Heading ] │
│ [ Coupon Code ] │
└────────────────────────────┘
```
***
## Settings
### Style
**Popup position** — Where the popup appears on screen.
### Trigger
**Type** — Chooses what makes the popup appear.
| Option | Description |
| ----------- | ---------------------------------------------------------------------------------------- |
| Delay | Appears a set time after the page loads. |
| Scroll | Appears once the visitor scrolls part-way down the page. |
| Exit intent | Appears when the cursor moves toward the top of the window, as if leaving. Desktop only. |
**Repeat after** — How long to wait before showing the popup again to someone who closed it without subscribing.
### Visibility
| Setting | Description |
| ---------------------- | ----------------------------------------------------------------------------------------------- |
| Show only to guests | Hides the popup from logged-in customers. |
| Show on home page only | Shows the popup on the home page only. |
| Show on mobile | Turns the popup on or off for mobile devices. Not available with Exit intent. |
| Mobile layout | **Bottom sheet** slides up from the bottom of the screen; **Popup** appears as a floating card. |
### Floating Button
A button that stays on screen so customers can reopen the popup after closing it.
| Setting | Description |
| -------------------- | ---------------------------------------------------------------------------- |
| Show floating button | Turns the reopen button on or off. |
| Show on mobile | Turns the button on or off for mobile, separately from the popup. |
| First appearance | Whether the popup or the floating button shows first when a visitor arrives. |
| Button position | Where the button sits along the edge of the screen. |
| Button size | Size of the button. |
| Button label | Text shown on the button. |
| Label color | Color of the button text. |
| Background color | Color of the button background. |
{% hint style="info" %}
Setting **First appearance** to **Floating button** keeps the popup available without it opening on its own — the customer chooses when to open it.
{% endhint %}
***
## Signup Form Block
The first thing customers see. Build it from the sub-blocks below, in any order.
### Signup Form settings
| Setting | Description |
| ----------------------- | ---------------------------------------------------------------- |
| Content alignment | Aligns the text and blocks inside the form. |
| Show image on desktop | Shows or hides the side image on desktop. |
| Show image on mobile | Shows or hides the side image on mobile. |
| Image | The image shown next to the form content. |
| Mobile Image (optional) | A separate image for small screens. |
| Desktop position | Places the image on the left or right of the content on desktop. |
| Desktop / Mobile | Space between the stacked content blocks. |
### Signup Form blocks
* [Header](/helix/theme-blocks/basic/header.md)
* [Subheading](/helix/theme-blocks/basic/subheading.md)
* [Heading](/helix/theme-blocks/basic/heading.md)
* [Text](/helix/theme-blocks/basic/text.md)
* [Image](/helix/theme-blocks/basic/image.md)
* [Social media links](/helix/theme-blocks/links/social-media-links.md)
* [Email signup](#email-signup)
* [Divider](/helix/theme-blocks/layout/divider.md)
* [Countdown timer](/helix/theme-blocks/basic/countdown-timer.md)
#### Email Signup
Collects the visitor's email and adds them to your Shopify customer list. Every signup form needs one.
Two settings set it apart from the standard block:
* **Form layout** — four ways to arrange the email field and button, from side by side to a borderless underlined row. See [Form layout](/helix/theme-blocks/forms/email-signup.md#form-layout).
* **Subscription preferences** — show checkboxes so customers pick the topics they want (up to five, with a title). Each customer's choices are saved to the **Notes** field of their profile in **Shopify Admin → Customers**, so you can segment or filter by them later. Leave it off for a plain email-only form.
See [Email signup](/helix/theme-blocks/forms/email-signup.md) for the remaining settings.
{% hint style="info" %}
Collected emails are stored in **Shopify Admin → Customers**. Check that your store's marketing consent settings meet local rules such as GDPR or CAN-SPAM before collecting emails.
{% endhint %}
***
## Success Message Block
Shown automatically after a customer subscribes. Its layout is fixed — a heading with text, followed by the coupon code. Set the wording in its sub-blocks.
### Success Message settings
| Setting | Description |
| ---------------- | ---------------------------------------------- |
| Desktop / Mobile | Space between the message and the coupon code. |
### Success Message blocks
* [Header](/helix/theme-blocks/basic/header.md)
* [Coupon code](#coupon-code)
#### Coupon Code
Holds the reward code and an optional button below it.
| Setting | Description |
| -------------------- | --------------------------------------------------------------------------------------------------- |
| Coupon code | The discount code shown to the customer. This field only displays the code — it does not create it. |
| Label | Text on the button below the code. |
| Link | Where the button sends the customer. |
| Open link in new tab | Opens the button link in a new browser tab. |
| Desktop / Mobile | Space between the code and the button. |
{% hint style="warning" %}
The **Coupon code** field does not create a discount. Create the code in **Shopify Admin → Discounts** first, then enter it here exactly as written — otherwise customers will copy a code that fails at checkout.
{% endhint %}
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}