Pop-Up Customization
Customize your prevention pop-up colors, fonts, and layout in the Shopify theme editor
Pop-Up Customization
NavonaAI's prevention pop-up is fully customizable through the Shopify theme editor. You can adjust colors, typography, and layout to match your store's brand without writing any code.
How to Access
Go to Shopify Admin → Online Store → Themes
Find your active theme and click "Customize" (or "Edit theme")
In the left sidebar, navigate to Header → Apps → "Popup Customization"
You'll see a live preview of your store with the NavonaAI customization panel open on the left.
Quick Access from Dashboard — You can jump directly to the theme editor's popup customization from your NavonaAI dashboard settings page. Look for the "Customize Popup Design" button.
Note: Pop-up design customization is currently only available through the Shopify theme editor. In-dashboard customization is planned for a future release.
Preview Settings
At the top of the customization panel you'll find a Show Popup Preview toggle. Enable this to display the pop-up in the theme editor preview so you can see your changes in real time as you make them.
Always enable the preview before making changes — it's much easier to see the effect of color adjustments when the pop-up is visible.
Colors
The pop-up has several distinct color zones, each independently customizable.
Modal & Controls
| Setting | What It Controls |
|---|---|
| Modal Background | The background color of the entire pop-up card |
| Close Button Background | The background of the × close button in the corner |
| Close Button Icon | The color of the × icon itself |
Accent Gradient
The accent gradient is used for the icon box at the top of the pop-up, the coupon code area, and the copy button. It's a two-color gradient:
| Setting | What It Controls |
|---|---|
| Accent Gradient Start | Left/top color of the gradient |
| Accent Gradient End | Right/bottom color of the gradient |
Use your brand's primary color for the accent gradient. This is the most visually prominent element of the pop-up and immediately signals brand recognition to your shoppers.
Text Colors
| Setting | What It Controls |
|---|---|
| Title Color | The main headline text (e.g., "Wait! Don't leave yet...") |
| Description Text | The body copy describing the offer |
| Description Discount Highlight | The inline text highlight around the discount amount in the description |
| Discount Code Text | The actual coupon code displayed in the code box |
Validity Notice
The validity notice is the small banner below the coupon code that communicates urgency (e.g., "Valid for this visit only").
| Setting | What It Controls |
|---|---|
| Validity Notice Text | Color of the notice text |
| Validity Notice Background | Background of the notice banner |
| Validity Notice Border | Border color around the notice banner |
Buttons
| Setting | What It Controls |
|---|---|
| CTA Button Gradient Start | Left color of the primary "Apply & Checkout" button |
| CTA Button Gradient End | Right color of the primary "Apply & Checkout" button |
| CTA Button Gradient Hover | Color when hovering over the CTA button |
| Secondary Button Text | Color of the "No thanks" secondary button text |
How to Change a Color
Click any color field to open the color picker. From there you can:
- Drag the selector across the gradient spectrum
- Enter a hex code directly (e.g.,
#FF6B35) - Pick from your recently used colors shown at the bottom of the picker
Typography
Popup Font
The font used for all text in the pop-up except the coupon code. Defaults to Poppins.
You can select from a range of fonts. Keep in mind:
- System fonts (like San Francisco on Mac/iOS or Segoe UI on Windows) load instantly with no additional download
- Other fonts are fetched from Google Fonts on the shopper's first visit, which adds a small load time
If your store already uses a specific font in its branding, use the same font here for a cohesive experience.
Coupon Code Font
The font used specifically for the discount code displayed in the code box. Defaults to SF Mono.
A monospace font is recommended for coupon codes — the fixed-width characters make the code easier to read and visually distinct from surrounding text.
Layout
Border Radius
Controls how rounded the corners of the pop-up card are. Range: 0–30px.
| Value | Effect |
|---|---|
0px | Sharp, squared corners |
12px | Modern, subtly rounded corners |
24px | Soft, pill-style corners |
Match this to your store's overall design language. If your buttons and product cards have sharp corners, use a lower value. If your store has a soft, rounded aesthetic, use a higher value.
Overlay Opacity
Controls how dark the background overlay is when the pop-up is showing. Range: 0–100%.
40–60% opacity is the recommended range. Below 40% the overlay is too subtle and the pop-up may feel like part of the page. Above 60% it can feel heavy and intrusive. Find the balance that focuses attention on the pop-up without feeling overwhelming.
Saving Customizations
Changes in the Shopify theme editor are saved when you click Save in the top-right corner of the editor. Your customizations go live immediately for all visitors once saved.