How to change fonts, colors, and spacing in your popup
Customize typography, theme colors, and spacing in the Nudgesmart visual editor — match your brand's look across every popup.
Every design control lives in the Style tab of the visual editor. Use theme colors instead of one-off hex codes and your popups stay on-brand even after you rebrand.
TL;DR
Click any element on the canvas and open the Style tab on the right. Adjust typography (Font Size, Font Weight, Font Family, Text Align, Text Transform, Text Decoration, Font Style, Line Height, Letter Spacing), pick colors via Theme Color Links (Primary, Secondary, Text, Background, or Custom Color), and tune spacing with padding and margin controls. Use theme colors over custom hex codes so every popup stays on-brand.
Open the design panel
In the visual editor, click the element you want to style — a heading, a button, an input, an image — and look at the right-hand panel.
Visual editor canvas with a popup heading selected and the right-hand property panel showing Content and Style tabs
Screenshot coming soon
The right panel has two tabs:
- Content — words, image source, button link, and other element data.
- Style — everything visual: typography, colors, spacing, borders.
If you don't see the panel, you haven't selected anything. Click a heading, button, or image — the selected element gets a blue outline and its properties appear on the right. Changes save automatically; there's no Apply button.
Change typography
With a text element selected, scroll to the typography section in the Style tab. Nine controls cover everything you need to set the look and rhythm of your copy.
The nine typography controls and when each one matters:
- Font Size — slider, 8-80px. Use 32-48px for headlines, 14-16px for body, 12-14px for fine print.
- Font Weight — dropdown: Normal (400), Medium (500), Semi-Bold (600), Bold (700), Black (900). Pair a heavier headline (700) with lighter body (400-500) for hierarchy.
- Font Family — free text field for the CSS font-family value (for example,
Inter, sans-serif). There isn't a curated picker yet, so use any web-safe stack or any Google Font you've already loaded into your store theme. If you're choosing a typeface, the Google Fonts guide to choosing a typeface is a good 10-minute read. - Text Align — left, center, right, or justify. Center for short headlines; left for longer body copy.
- Text Transform — none, uppercase, lowercase, or capitalize. Uppercase suits short labels but punishes readability on full paragraphs.
- Text Decoration — none, underline, or line-through. Line-through is useful for struck-out original prices.
- Font Style — normal or italic. Italic works for emphasis inside a sentence, not full headlines.
- Line Height — a multiplier. 1.2 for tight headlines, 1.5-1.6 for body paragraphs that need to breathe.
- Letter Spacing — useful for uppercase labels (try 0.05em-0.1em); rarely useful for body text.
A general principle: stop at two typefaces per popup. One for headings, one for body.
Typography section in the Style tab with Font Size slider, Font Weight dropdown, and Font Family text field visible
Screenshot coming soon
Change colors
In the Style tab, find the Theme Color Links section. Each color property — text color or background color — has a source dropdown plus a color picker.
Two controls handle most color decisions:
- Text Color Source — the color of text inside the selected element.
- Background Color Source — the fill behind it (button, card surface, badge, etc.).
Each dropdown has the same five options:
- Primary Theme Color — your store's main brand color (the one on CTA buttons).
- Secondary Theme Color — your secondary brand accent.
- Text Theme Color — the default text color across your popups.
- Background Theme Color — the default popup background.
- Custom Color — opens a color picker for one-off picks that don't follow the theme.
When you pick one of the four theme options, the element's color is linked to your store's theme. If you later update your brand colors centrally — a rebrand, a seasonal palette swap — every popup using those theme links updates automatically. Custom Color pins a fixed hex value that won't follow theme changes.
Background Color Source has one fewer option (no "Text Theme Color," since that's a foreground value). Otherwise the two work identically.
Theme Color Links section showing Text Color Source dropdown set to Primary Theme Color above an inline color picker
Screenshot coming soon
Adjust spacing and padding
Scroll further down the Style tab to find the spacing controls. Each side — top, right, bottom, left — has its own input.
Two concepts handle space around an element:
- Padding — the inner space between the element's edge and its content. Add padding to a button to give the label breathing room, or to a card to push content away from the edges.
- Margin — the outer space between the element and its neighbors. Add margin to push elements further apart.
If a button looks cramped, add padding. If it's too close to the heading above, add margin. Common patterns: 32px padding on a modal card, 12px/24px (top-bottom/left-right) padding on a button, 16-24px of vertical margin between major sections.
After changing desktop spacing, toggle to mobile — what's balanced at 1200px wide can feel oversized inside a 360px popup.
Use theme tokens for consistency
When choosing colors, prefer the four theme options over Custom Color whenever you can.
The four theme options pull from your store's brand colors, so every popup using them shares the same palette. Update the palette once and every popup follows.
Custom colors fit one-off campaigns that need their own palette — a Halloween popup, a Black Friday teaser. For everyday popups (email capture, exit-intent, welcome offer), theme colors are safer.
The same logic applies to typography: stick to one or two font families across your popups and they'll feel like one product instead of a patchwork.
Common pitfalls
- A heading reads as one solid block. Font Size is too large or Line Height is too tight. Bring Font Size down a notch, or push Line Height to 1.3-1.4.
- A button looks unstyled. Background Color Source is Custom Color set to white or transparent. Switching to Primary Theme Color usually fixes it.
- Mobile spacing feels off after editing desktop. Spacing can be set independently per breakpoint — toggle to mobile and adjust there.
- A custom font isn't rendering on the storefront. Font Family is a CSS value — the font has to be loaded on the page. If your theme doesn't load it, the browser falls back to the next entry in the stack. Load the font in your theme or pick one already included.
Frequently asked questions
Can I change the default colors used across all popups?
Yes. Open Campaign Theme settings and update the Primary, Secondary, Text, and Background colors. Every popup using theme colors (instead of Custom) will follow.
Does the Font Family field accept Google Fonts?
It accepts any CSS font-family value, Google Fonts included. The font has to be loaded on the storefront for it to render — usually by adding the Google Fonts link to your store theme.
What's the difference between linking a color to a theme color and typing a hex code?
A linked color updates whenever the underlying theme color updates. A custom hex stays fixed. If you rebrand or seasonally swap your palette, theme-linked colors save manual editing.
Can I copy styling from one element to another?
Not directly today — note the values on the source element and re-enter them on the target. We're tracking this as a feature request; mention it in your next feedback message to add weight.
What to read next
How to use the Nudgesmart visual editor
Drag-and-drop canvas with element-tree navigation, live property panel, desktop/mobile viewport switching, and a 6-step onboarding tour.
How to upload and replace images in a Nudgesmart popup
Add product photos, hero images, and logos to your popup — at the right size for fast loading and a sharp display.