Modal
The dialog's layout, colors, animation and how shoppers close it.
- Layout, Appearance, Behavior, Responsive and Scrollbar cards
- Arrangement choices: Image left, Image right, Stacked
Layout
| Setting | Default | Options |
|---|---|---|
| Arrangement | Image left | Image left, Image right, Stacked (image above details) |
| Maximum width (px) | 920 | 480–1400 |
| Image column width (%) | 50 | 30–70, shown for Image left and Image right |
| Inner spacing (px) | 32 | 0–80, also the gap between image and details |
Appearance
| Setting | Default |
|---|---|
| Background · Text | #ffffff · #1f2937 |
| Page overlay | rgba(17, 24, 39, 0.6); use the opacity slider to show more or less of the page |
| Close button | #374151 |
| Window shape · Corner radius (px) | Rounded · 12 (0–40). Square gives sharp corners and hides Corner radius |
Pro adds 5 modal templates and one shape for the whole modal.
Behavior
Opening animation
None, Fade, Zoom or Slide up. Visitors who prefer reduced motion always get no animation.
Close when clicking outside
Close with the Escape key
Responsive
Full-screen on phones
On screens 600 px or narrower the modal fills the screen. When off, phones get a floating dialog with a small margin around it. The image and details always stack at 768 px and narrower.
Scrollbar
For products whose details are taller than the screen.
| Setting | Default |
|---|---|
| Style | Custom (slim, your colors). Or Browser default, or Hidden (still scrolls) |
| Width (px) | 6 (2–16). Firefox draws its own thin bar in your colors |
| Bar color · Bar color on hover | rgba(17, 17, 17, 0.25) · #2563eb |
| Track color | rgba(17, 17, 17, 0), invisible. Raise the opacity to show a track |