Popup

Overview

A customizable popup modal component that displays content in an overlay triggered by a button. Provides smooth animations, responsive behavior, and extensive styling options through block settings.

Common use cases

• Use semantic HTML within popup content for better accessibility

• Keep popup content concise to avoid overwhelming users

• Consider mobile viewports when designing popup content

• Test keyboard navigation and screen reader compatibility

• Use appropriate color contrast for overlay background

Compatible blocks

The following blocks can be nested within this block:

• Container (for popup content)

Block settings

General

Setting	Description	Options
Show advanced settings	Reveals close button, full background, colors, inheritance, margin, width, and device visibility	Checkbox (default: false)

Content

Setting	Description	Options
Overlay preset	Select a preset overlay ID or use a custom one	• Account • Search • Menu • Primary cart • Alternative cart • Age verification • Quick buy • Quick edit • Custom (default)
Overlay ID	Custom identifier for the overlay (used to trigger it programmatically)	Text input Visible when overlay preset is Custom
Show close button	Displays a close button in the popup	Checkbox (default: false) Visible when Show advanced settings is on
Enable full background	Makes the popup background cover the entire viewport	Checkbox (default: false) Visible when Show advanced settings is on

Color

Setting	Description	Options
Type	Custom scheme vs preset surface colors	• Custom • Base (default) Visible when Show advanced settings is on and Enable inheritance is off
Color scheme	Background and text pairing	Color scheme picker Visible when type is Custom, Show advanced settings is on, and Enable inheritance is off
Color scheme	Background and text pairing	• Body background (default) • Body foreground • Accent 1–3 • Shade 1–3 • Blur • Transparent Visible when type is Base, Show advanced settings is on, and Enable inheritance is off
Border color	Popup border	• Subtle (default) • Strong • None Visible when Show advanced settings is on, type is Base, and Enable inheritance is off
Enable inheritance	Inherit colors from the closest parent with a set scheme	Checkbox (default: false) Visible when Show advanced settings is on

Layout

Setting	Description	Options
Margin	Outer margin around the popup	• Default • Narrow • Standard • Wide • Full • None (default) Visible when Show advanced settings is on
Enable custom width	Enables a custom width percentage	Checkbox (default: false) Visible when Show advanced settings is on
Width	Popup width	0–100 % (default: 100 %) Visible when Enable custom width and Show advanced settings are on

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only Visible when Show advanced settings is on