Appearance
Modal Styling
Style every visual detail of the Modal option type — the trigger button, the modal itself, the backdrop, the header, and the open animation — using per-type templates.
Overview
Read Types Settings first if you haven't created a template before. This page covers every setting available once you're editing a Modal template, grouped the same way they appear in the editor's left navigation.
What a Modal template styles — and what it doesn't
A Modal template styles the frame: the button, the panel, the backdrop and the header. It deliberately has no settings for the body text, because that content is written in the Rich text or HTML Block editor and keeps the shared styling those types already use. Style the body once there, and every modal follows.
A new Modal template starts from your shop's theme colors — button, text, background, and border — rather than fixed values, so it looks like your store before you change anything. Hover colors are derived to differ from their idle counterparts rather than starting identical.
Trigger Button
The only part visible before the modal opens.
| Setting | What it controls | Default | Options / Range |
|---|---|---|---|
| Button style | The overall look of the button. Also decides which settings below appear | Solid | Solid, Outline, Link |
In-app help: Solid fills the button, Outline shows only a border, Link renders it as underlined text.
Button colors
Edited via Idle and Hover state tabs. Each style shows only the colors it actually paints:
| Setting | What it controls | Shown for | Default |
|---|---|---|---|
| Text | Button label color for that state | All styles | Theme button text (Solid) / theme text (Outline, Link) |
| Background | Button fill for that state | Solid only | Theme button |
| Border | Border color for that state | Solid, Outline | Theme button |
Solid and Outline keep separate text colors
A Solid button's label sits on its own fill — often white. An Outline or Link button's label sits on the page. They're stored separately so switching between the two styles never leaves you with an invisible label, and each keeps its own color.
Button shape and text
| Setting | What it controls | Shown for | Default | Range |
|---|---|---|---|---|
| Font size | Button text size | All styles | 15px | 11–24px |
| Font weight | Button text weight | All styles | Medium (500) | Light (300) – Bold (700) |
| Corner radius | Button corner rounding | Solid, Outline | 6px (from your global button radius) | 0–40px |
| Border width | Border thickness | Solid, Outline | 1px | 0–6px |
| Shadow | Drop shadow under the button | Solid, Outline | None | None, Soft, Strong |
| Padding (per side) | Space inside the button | Solid, Outline | 10px top/bottom, 18px left/right | 0–40px |
| Full width button | Stretches the button across the options area | Solid, Outline | Off | — |
Link style ignores the box settings
A Link trigger is plain underlined text, so corner radius, border width, shadow, padding, and full width don't apply and aren't shown.
Modal
The panel itself.
| Setting | What it controls | Default | Options / Range |
|---|---|---|---|
| Size | Maximum width on desktop | Medium | Small (420px), Medium (560px), Large (800px), Custom |
| Maximum width (Custom size only) | Exact maximum width | 560px | 320–1200px, in steps of 20 |
| Corners | Corner rounding of the modal | Rounded | Square (0), Rounded (8px), Extra rounded (20px), Custom |
| Corner radius (Custom corners only) | Exact corner radius | 8px | 0–48px |
| Shadow | Elevation under the modal | Soft | None, Soft, Strong, Custom |
| Shadow blur (Custom shadow only) | How far the shadow spreads | 48px | 0–96px |
| Shadow distance (Custom shadow only) | How far the shadow falls | 16px | 0–48px |
| Shadow strength (Custom shadow only) | How dark the shadow is | 22% | 0–60% |
| Spacing | Padding around the title and content | Comfortable | Comfortable, Compact, Custom |
| Content padding (Custom spacing only) | Exact padding around the content | 16px all sides | 0–48px |
In-app help for Size: Maximum width on desktop. Every size fills the screen on mobile. Spacing: Controls the padding around the title and the content.
Colors
| Setting | What it controls | Default |
|---|---|---|
| Background | Modal fill (the body area — the header has its own) | Theme background |
| Border color | Color of the modal's border | Theme border |
| Border width | Thickness of that border — 0 means no border | 0px (0–6px) |
Size only caps the desktop width
Every size fills the screen on mobile. Pick the size for how much content you have on desktop — a size chart usually wants Large, a short note Small.
Backdrop
What the page behind an open modal looks like.
| Setting | What it controls | Default | Options / Range |
|---|---|---|---|
| Backdrop | The backdrop treatment | Dim and blur | None, Dim, Dim and blur |
| Backdrop color (Dim, Dim and blur) | The dim color | Black | — |
| Dim amount (Dim, Dim and blur) | How dark the page behind gets | 45% | 0–90%, in steps of 5 |
| Blur amount (Dim and blur only) | How blurred the page behind gets | 4px | 1–20px |
Blur degrades gracefully
In-app help: Blur is ignored by browsers that do not support it; the dim still applies. Customers on those browsers still get the dimmed backdrop, so the modal never loses its separation from the page.
Header
The title and close button at the top of the modal. Both live under the same group, in two sections.
Title
| Setting | What it controls | Default | Options / Range |
|---|---|---|---|
| Alignment | Title alignment | Left | Left, Center, Right |
| Font size | Title size | 18px | 12–36px |
| Font weight | Title weight | Semibold (600) | Light (300) – Bold (700) |
| Letter spacing | Spacing between letters | 0px | −1 to 4px, in steps of 0.5 |
| Letter case | Case transformation | As typed | As typed, UPPERCASE, Capitalize |
| Color | Title color | Theme text | — |
| Title background | Header bar fill — transparent matches the modal background | Transparent | — |
| Title padding (per side) | Space around the title | 16px top, 16px sides, 12px bottom | 0–48px |
| Divider under the title | Draws a line between the title and the content | On | — |
| Divider color (if divider on) | Color of that line | Theme border | — |
Tint the header independently
Title background is separate from the modal's Background so you can give the header bar its own color. Leave it transparent and the header simply matches the modal.
Close button
| Setting | What it controls | Default | Options / Range |
|---|---|---|---|
| Close button | The button's visual treatment. Also decides which settings appear below | Plain | Plain, Filled, Outline |
| Size | Button size — the X scales with it | Medium (32px) | Small (28px), Medium (32px), Large (40px), Custom |
| Button size (Custom size only) | Exact button size | 32px | 24–56px |
| Shape (Filled, Outline) | Button corner shape | Rounded | Square, Rounded, Circle, Custom |
| Corner radius (Custom shape only) | Exact corner radius | 4px | 0–28px |
In-app help: Plain shows only the icon, Filled adds a background shape, Outline adds a border.
Colors are edited per state, and each style shows only what it paints:
| Setting | What it controls | Shown for | Idle default | Hover default |
|---|---|---|---|---|
| Icon | The X color | All styles | Theme text | Slightly lighter than idle |
| Background | The shape's fill | Filled only | Light tint of theme background | A stronger tint |
| Border | The border color | Outline only | Theme border | Darker than idle |
Shape is hidden for Plain
Plain draws no shape — only a light tint on hover, whose corners are fixed — so there's nothing for Shape to change. The minimum custom size is 24px, which is the accessible minimum target size.
Motion
| Setting | What it controls | Default | Options |
|---|---|---|---|
| Open animation | How the modal appears | Fade | None, Fade, Slide up |
In-app help: Skipped automatically for shoppers who prefer reduced motion. Customers who've asked their device for reduced motion get the modal with no animation, whatever you pick here.
Contrast Warnings
While you edit, the editor flags combinations a customer would struggle to read — the button text against its own background or the page, the title against the header or modal background, and the close icon against whatever sits behind it. Text is checked against the text-contrast threshold and the close icon against the (lower) threshold for graphical controls.
A warning doesn't block saving. It tells you the pairing is hard to read so you can decide.
How to Style a Modal
- Open the Style Settings modal (see Customization Overview)
- Click Types → Modal
- Create a new template or click an existing one to edit it
- Use the left navigation to jump between Trigger button, Modal, Backdrop, Header, and Motion
- Click the trigger button in the Live Preview to open the modal — it opens over the preview area, with the button and product blurred behind it, and stays open while you edit
- Close it with the X, Escape, or a click on the backdrop, and click the trigger to reopen it
- Click Save in the contextual save bar
Style the trigger before you open it
The Live Preview starts closed, the same as the storefront — you see the button first. Get the trigger right, then open the modal and work on the panel, backdrop and header.
Related
- Modal (option type) — how to add and configure a Modal option
- Types Settings — how templates work and how to assign one to an option
- Sandbox & Live Preview — control what the preview shows while you style
- Accordion Styling
- Checkbox Styling
- Radio Styling
- Swatches Styling
- Tabs Styling
- File Upload Styling
- Slider Styling
- Date Range Styling
- Time Picker Styling