Modal design
Theming and copy for the storefront verification modal.
The storefront modal is fully themeable from Modal design, with a live preview. Settings are stored per shop as JSON.
Palette
The default palette is a warm-neutral stone scale with ink (#1c1917) as the only strong colour and a single emerald accent (#0f7b5f) reserved for savings and discounts. This is a deliberate choice: neutral surfaces let one modal sit convincingly on thousands of different themes.
Derived states — hover, focus, tints — are computed with color-mix(), so changing the primary colour re-derives the entire palette rather than leaving you to match six values by hand.
What you can change
- Overlay — colour and opacity.
- Modal — background, radius, padding, max-width, shadow.
- Typography — font family, title and body size, weight, colours.
- Inputs — field styling.
- Buttons — primary and secondary styling.
- Errors — error colour.
- Logos — header and "powered by" logo URLs.
- Copy — every step title, subtitle, emoji and button label.
Default copy
Step 1 — 📱 Verify your mobile number "Enter your mobile number to receive a one-time verification code before checkout."
Step 2 — 🔐 Enter verification code
Buttons — Send OTP · Verify & Proceed · ← Change Number · Resend OTP · Cancel
Writing modal copy
Say what will happen and why in one sentence. The most common mistake is explaining the security rationale; shoppers do not need it and it makes the step feel heavier than it is. "Enter your number to get a code" is enough.
Keep the button labels as verbs. "Verify & Proceed" tells the shopper the step ends and checkout continues; "Submit" does not.