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.
Supported Languages
The popup automatically displays in the shopper's language based on your Shopify store's locale settings. No configuration needed — the correct language is detected and applied automatically.
Translations
| Field | English | Arabic | Bulgarian | Dutch | French | German | Italian | Spanish | Swedish |
|---|---|---|---|---|---|---|---|---|---|
| Title | Your Special Discount Awaits | خصمك المميز بانتظارك | Специална отстъпка само за теб! | Uw speciale korting wacht op u | Votre Réduction Spéciale Vous Attend | Dein exklusiver Rabatt wartet | Il Tuo Sconto Speciale Ti Aspetta | Tu Descuento Especial Te Espera | Din Speciella Rabatt Väntar |
| Description | Complete your checkout now without leaving the site and get [discount] off for your order. | أكمل عملية الشراء الآن دون مغادرة الموقع واحصل على خصم [discount] على طلبك. | Завършете плащането си сега, без да напускате сайта, и получете [discount] за поръчката си. | Rond uw bestelling nu af zonder de site te verlaten en ontvang [discount] korting op uw bestelling. | Finalisez votre achat maintenant sans quitter le site et obtenez [discount] de réduction sur votre commande. | Schließe deine Bestellung jetzt direkt hier ab und sichere dir [discount] Rabatt. | Completa ora il tuo acquisto senza uscire dal sito e ottieni [discount] di sconto sul tuo ordine. | Completa tu compra ahora sin salir del sitio y obtén [discount] de descuento en tu pedido. | Slutför din kassa nu utan att lämna webbplatsen och få [discount] rabatt på din beställning. |
| Apply Button | Apply & Checkout | تطبيق الخصم والدفع | Приложи и продължи към плащане | Toepassen & Afrekenen | Appliquer et Payer | Anwenden & zur Kasse | Applica & Acquista | Aplicar y Pagar | Ta Mig Till Kassan |
| Decline Button | No, Thank You | لا، شكراً | Не, благодаря | Nee, bedankt | Non, Merci | Nein, danke | No, grazie | No, Gracias | Nej, Tack |
| Coupon Label | YOUR COUPON CODE | كود الخصم | ВАШИЯТ КОД ЗА ОТСТЪПКА | UW KORTINGSCODE | VOTRE CODE PROMO | Dein Rabattcode | IL TUO CODICE PROMO | TU CÓDIGO DE DESCUENTO | DIN KUPONGKOD |
| Validity Notice | Valid for this visit only! | صالح لهذه الزيارة فقط! | Валидно само за това посещение на сайта! | Alleen geldig tijdens dit bezoek! | Valable uniquement pour cette visite ! | Nur für diesen Einkauf gültig | Valido solo per questa visita! | ¡Válido solo durante esta visita! | Missa inte chansen - rabatten gäller enbart under detta besök! |
| Single Product | Because you picked [product]! | !لأنك اخترت [product] | Защото избрахте [product]! | Omdat u [product] hebt gekozen! | Parce que vous avez choisi [product] ! | Weil du [product] ausgewählt hast! | Perché hai scelto [product]! | ¡Porque elegiste [product]! | För att du valde [product]! |
| Multiple Products | Because you picked [product] and others... | ...لأنك اخترت [product] ومنتجات أخرى | Защото избрахте [product] и други... | Omdat u [product] en andere hebt gekozen... | Parce que vous avez choisi [product] et d'autres... | Weil du [product] und weitere Produkte ausgewählt hast... | Perché hai scelto [product] e altro... | Porque elegiste [product] y otros... | För att du valde [product] med flera... |
Customization & New Languages
If you need to customize any translation text, or if your store's primary language isn't listed above, contact us at support@navona.ai. We can add new languages or adjust existing translations to match your brand voice.
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.