> 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/custom-popup.md).
# Custom popup
A flexible popup you build from scratch using any mix of content blocks. Unlike the Newsletter Popup, it has no fixed sections — you add and arrange the blocks yourself.
***
## Structure
```
┌──────────────────────────┐
│ Custom Popup │
│ ┌────────────────────┐ │
│ │ [ Block ] │ │
│ │ [ Block ] │ │
│ │ [ Block ] │ │
│ └────────────────────┘ │
└──────────────────────────┘
```
Blocks inside the popup can be stacked or placed side by side, set in [Layout](#layout).
***
## Settings
### Style
| Setting | Description |
| -------------- | ---------------------------------- |
| Popup width | Sets how wide the popup can be. |
| Popup position | Where the popup appears on screen. |
### Layout
Controls how the blocks inside the popup are arranged.
* **Vertical** — blocks stack top to bottom.
* **Horizontal** — blocks sit side by side. Use **Vertical on mobile** to restack them on small screens.
| Setting | Description |
| ------------------ | --------------------------------------------------------------------------- |
| Direction | Whether blocks stack top to bottom or sit side by side. |
| Alignment | Aligns the blocks inside the popup; the choices match the chosen direction. |
| Vertical on mobile | When Horizontal is selected, stacks the blocks on mobile. |
| Alignment (mobile) | Aligns the stacked blocks on mobile. |
| Desktop / Mobile | Space between blocks inside the popup. |
### 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.
### 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 %}
***
## Available Blocks
Every block inside the Custom Popup is a global block shared across the theme. Add them in any order and combine freely.
| Block | Description |
| ----------------------------------------------------------------- | ------------------------------------------------------ |
| [Heading](/helix/theme-blocks/basic/heading.md) | A standalone heading line. |
| [Text](/helix/theme-blocks/basic/text.md) | A rich-text content block. |
| [Subheading](/helix/theme-blocks/basic/subheading.md) | A smaller label above or below a heading. |
| [Image](/helix/theme-blocks/basic/image.md) | An inline image. |
| [Icon](/helix/theme-blocks/basic/icon.md) | An inline icon from the built-in library. |
| [Button](/helix/theme-blocks/basic/button.md) | A call-to-action button. |
| [Divider](/helix/theme-blocks/layout/divider.md) | A horizontal line. |
| [Video](/helix/theme-blocks/basic/video.md) | An inline video. |
| [Coupon Code](/helix/theme-blocks/basic/coupon-code.md) | Shows a discount code with a one-tap copy button. |
| [Countdown Timer](/helix/theme-blocks/basic/countdown-timer.md) | A live timer counting down to a set date. |
| [Collapsible Text](/helix/theme-blocks/basic/collapsible-text.md) | A text panel that expands and collapses. |
| [Contact form](/helix/theme-blocks/forms/contact-form.md) | A form for collecting customer enquiries. |
| [Email signup](/helix/theme-blocks/forms/email-signup.md) | An email capture field for newsletter sign-ups. |
| [Spacer](/helix/theme-blocks/layout/spacer.md) | Adds blank vertical space between blocks. |
| [Group](/helix/theme-blocks/layout/group.md) | A container for grouping blocks into columns or rows. |
| [Colors](/helix/theme-blocks/basic/colors.md) | A row of color swatches built from nested Item blocks. |
***
{% 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 %}