How to use the Nudgesmart visual editor

TL;DR

Open any campaign and the visual editor loads with three panes: canvas in the center, element tree on one side, property panel on the other. Click an element on the canvas — a headline, a button, an image — and the property panel opens to its Content and Style tabs. Switch between Desktop and Mobile at the top to tune each viewport. First-time editors get a six-step guided tour. When it looks right, save, preview, and publish — no code required.

The canvas, sidebar, and property panel

The editor is a three-pane layout designed around direct manipulation — click what you want to change, and you change it in place.

• The canvas sits in the middle and shows a live preview. What you see is exactly what shoppers see on the storefront — fonts, colors, spacing, and animations included.
• The element tree sidebar lists every element as a hierarchy. Click an item in the tree to select the matching element on the canvas — and vice versa. Selection is bidirectional.
• The property panel opens on the right whenever an element is selected, exposing its text, images, links, colors, fonts, and spacing.

With nothing selected, the property panel shows campaign-wide settings: name, theme colors, default fonts, animations, and positioning.

Visual editor with the canvas in the center, element tree on the left, and property panel open on the right showing a selected button

Screenshot coming soon

The element tree

Every popup is built from four levels:

• Page — the top-level frame. Multi-step popups (e.g. an email-capture step followed by a thank-you step) have multiple pages.
• Row — a horizontal slice of the page. Rows stack vertically.
• Column — a vertical slice within a row. Columns place content side-by-side on desktop and usually stack on mobile.
• Element — the actual content inside a column.

You can drag the following elements into a column:

• Text — headlines, subheadings, and body copy.
• Image — hero images, logos, or illustrations.
• Button — the call-to-action.
• Input field — capture an email, phone number, or name.
• Textarea — longer free-text answers (a survey response, for example).
• Divider — a horizontal line that separates sections.
• Spacer — empty vertical space without a visible line.

Richer interactive elements — survey questions, spin-wheel slices, social-proof cards, countdown timers — come pre-configured inside the templates that use them, rather than as drag-in primitives. You customize them through the same property panel.

Element tree expanded showing Page, Row, Column, and child Text and Button elements with selection state

Screenshot coming soon

Content tab vs Style tab

When an element is selected, the property panel splits its options into two tabs:

• Content — what the element says. Text, button labels, link destinations, image sources, placeholders, helper text.
• Style — what the element looks like. Typography, colors, spacing, borders, corner radius, shadows, alignment.

This split lets you rewrite a headline without touching the design, or restyle a button without rewriting the label.

Desktop and Mobile viewport toggle

A two-button toggle at the top switches between Desktop and Mobile preview. The canvas resizes to the device, and changes you make while on Mobile apply to the mobile breakpoint only.

This is desktop-first inheritance. Anything set on Desktop becomes the default on Mobile. Untouched mobile properties inherit the desktop value. Override one on Mobile (smaller font, tighter padding) and that override applies to phones only.

Patterns merchants use most:

• Reduce headline font size on mobile. A 40px desktop headline often overflows a 320px phone — drop it to 16-20px.
• Stack columns on mobile. Two-column desktop layouts usually read better stacked.
• Hide non-essential elements on mobile. A decorative side image can be removed from the mobile breakpoint to keep the popup compact.

Mobile viewport showing the same popup with smaller headline font and stacked columns vs the desktop version

Screenshot coming soon

The 6-step onboarding tour

The first time you open the editor, a six-step guided tour walks you through the interface in about a minute. The steps:

Onboarding tour overlay highlighting the property panel with a tooltip and Next button

Screenshot coming soon

If you skipped the tour earlier, restart it from the editor's help menu.

Save, preview, and publish

You can publish, edit, and republish freely. Every Save → Publish cycle pushes the new version to the storefront within seconds.

Common pitfalls

• Editing the wrong viewport. It's easy to make a change while Mobile is selected and not realize the override only applies to phones. If a desktop change "didn't stick," check which viewport was active.
• Forgetting to publish. Save keeps a draft; Publish goes live. If a campaign isn't appearing on the storefront, the most common reason is that changes were saved but never published.
• Breaking inheritance with unintended overrides. A property set on Mobile that you didn't mean to override blocks the desktop value from flowing down. If a mobile change feels off, look for stray overrides and reset them.
• Designing only on desktop. Most ecommerce traffic is mobile. Always check Mobile before publishing — confirm headlines fit, buttons are tappable, and inputs aren't covered by the on-screen keyboard.

Frequently asked questions

Do I need to know HTML or CSS to use the editor?

No. The editor is fully no-code — every option is a number input, color picker, or dropdown. There is no code editor.

Can I undo a change?

Yes. Standard undo (Cmd+Z / Ctrl+Z) and redo (Cmd+Shift+Z / Ctrl+Shift+Z) both work.

What happens if I close the tab without saving?

The editor warns you before navigating away with unsaved changes. If the browser closes unexpectedly, you'll lose changes since the last save — so save often.

Can two people edit the same campaign at the same time?

Not concurrently. The editor doesn't merge simultaneous edits — two staff members in different tabs will overwrite each other on save. Coordinate handoffs, or have one person edit at a time.

What to read next

• Help

  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.

• Help

  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.

• Help

  How to customize the mobile layout of a Nudgesmart popup

  Override fonts, sizes, and spacing for mobile shoppers using desktop-first inheritance — without breaking your desktop design.