> 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/theme-blocks/links/popup.md).

# Popup

A button that opens an overlay — a popup, drawer, or mobile bottom sheet — holding the blocks you nest inside. Ideal for video lightboxes, size guides, or expanded campaign details.

## Settings

| Setting                          | Description                                                                                  |
| -------------------------------- | -------------------------------------------------------------------------------------------- |
| Label                            | Text on the trigger button.                                                                  |
| Style                            | Primary, Secondary, Outline, Subtle, or Text.                                                |
| Show icon                        | Display an icon alongside the label.                                                         |
| Icon / Icon position / Icon size | Icon choice, side, and size.                                                                 |
| Button height                    | Trigger button height, per device.                                                           |
| Button typography                | Font, font size, and letter spacing for the label.                                           |
| Popup layout                     | **Desktop layout** (Popup or Drawer) and **Mobile layout** (Bottom sheet, Popup, or Drawer). |
| Max width                        | Maximum width of the opened overlay.                                                         |
| Content layout                   | Direction and alignment of the blocks inside the overlay, with independent mobile alignment. |
| Content gap                      | Space between the nested blocks — set separately for desktop and mobile.                     |

## Available blocks

Blocks you can add inside the overlay.

| Block                                                             | Description                                         |
| ----------------------------------------------------------------- | --------------------------------------------------- |
| [Heading](/helix/theme-blocks/basic/heading.md)                   | Main headline.                                      |
| [Subheading](/helix/theme-blocks/basic/subheading.md)             | Small label above or below the heading.             |
| [Text](/helix/theme-blocks/basic/text.md)                         | Rich-text paragraph for supporting copy.            |
| [Button](/helix/theme-blocks/basic/button.md)                     | Single call-to-action with label, link, and style.  |
| [Image](/helix/theme-blocks/basic/image.md)                       | Inline image.                                       |
| [Video](/helix/theme-blocks/basic/video.md)                       | An uploaded or external video.                      |
| [Icon](/helix/theme-blocks/basic/icon.md)                         | An icon from the theme library.                     |
| [Page](/helix/theme-blocks/basic/page.md)                         | Pulls the content of a Shopify page into the block. |
| [Collapsible text](/helix/theme-blocks/basic/collapsible-text.md) | Long text with a show-more toggle.                  |
| [Countdown timer](/helix/theme-blocks/basic/countdown-timer.md)   | A live countdown to a set date.                     |
| [Coupon code](/helix/theme-blocks/basic/coupon-code.md)           | A copyable discount code.                           |
| [Colors](/helix/theme-blocks/basic/colors.md)                     | A row of color swatches.                            |
| [Image card](/helix/theme-blocks/cards/image-card.md)             | Media card with overlaid, positioned content.       |
| [Product card](/helix/theme-blocks/cards/product-card-compact.md) | A compact product card.                             |
| [Contact form](/helix/theme-blocks/forms/contact-form.md)         | A customizable contact form.                        |
| [Email signup](/helix/theme-blocks/forms/email-signup.md)         | A newsletter signup form.                           |
| [Group](/helix/theme-blocks/layout/group.md)                      | A container that arranges several blocks together.  |
| [Divider](/helix/theme-blocks/layout/divider.md)                  | A horizontal line between content blocks.           |
| [Spacer](/helix/theme-blocks/layout/spacer.md)                    | Empty block for adjusting vertical spacing.         |