Docs / Building

Building a quiz or popup with the editor

The SupaPop editor is where you build your popup or quiz, step by step, and watch it come together in a live preview. You drag and drop sections, style them, set up branching, and switch between mobile and desktop views, all on one screen. When it looks right, you publish it to your store. This guide walks you through the whole flow.

Before you start

You need a popup created in SupaPop first. From the popup detail page, click Edit design at the top of the page to open the editor. The editor opens on the popup you picked, with the heading “Edit Design: {popup name}”. To go back, use the Back to popup breadcrumb at the top.

If an A/B experiment is running on the popup, the editor is locked and shows a “Locked” banner. Stop the experiment first, or edit your variants from the experiment instead.

How the editor is laid out

The editor has three panels:

  • Left: the section list for the current step, with a step name field above it. A Sections label sits at the top, alongside Container, Tracking, and A/B Tests buttons. Each button opens its own panel on the right; close it to return to the section list.
  • Center: the live preview. Toggle between Mobile and Desktop, and use Expand to hide the side panels for a bigger preview.
  • Right: the config panel for whatever section (or the container) you have selected. With nothing selected it reads “Select a section to edit its settings”.

Mobile preview is a fixed 375px phone-style frame. Desktop preview renders at your container’s max width and scales to fit.

How to build your steps

Steps are the screens a visitor moves through. They appear as tabs above the preview.

  1. Click + Add Step at the end of the tab row. Pick a step type: Intro Page, Email Capture, SMS Capture, Quiz Question, Survey, Loading Screen, Results, or Thank You.
  2. A new step inherits the container look from your first step and comes seeded with sensible starter sections for that type.
  3. To reorder steps, drag a tab. To pause a step, use its pause toggle. To delete a step, use the × on its tab (you always keep at least one step).
  4. Give each step a clear name in the Step name (shown in analytics) field. Click Use suggested to auto-fill a name from the step’s first text.

Quiz Question, Loading Screen, and Results are quiz-only step types. They only appear in the + Add Step picker once the container display mode is set to Standalone page. If you do not see them, change the display mode first (see below).

How to add and edit sections

  1. With a step selected, click + Add section below the section list.
  2. Pick a section type. There are 22: Image, Text, Form, Button, Spacer, Logo, Answer Choice, Dismiss Link, Disclaimer, Loader, Expander, Footer, Coupon Code, Countdown Timer, Product Results, Prize Reveal, Meter / Gauge, Media, Testimonial, Tag / Chip Row, Comparison, and Chart. The picker only shows the types that fit your step and display mode, so some are hidden depending on context.
  3. Click any section in the list to edit it. Its settings open on the right under “{Section} Settings”.
  4. Every section has a Spacing control (top and bottom margins) and a Show when… control at the bottom for conditional display (Always show, Answer equals, Score greater than, Score less than).

A few sections to know:

  • Form collects contact info. Add Email, Phone, or Text fields and drag to reorder. You must keep at least one email or phone field, so the last one is marked (required) and cannot be removed.
  • Answer Choice (used on Survey and Quiz steps) has an answer value for routing plus a display label, optional scoring, and per-answer routing (Next step, Go to specific step, or Redirect to URL). You can copy one answer’s style to all answers on the slide or across the whole quiz.
  • Button does one of three things: Go to next step, Close popup, or Open URL.

How to format text

Inside a Text section’s Content box you can make individual words bold or give them a different color, without splitting them into separate sections:

  • Wrap words in double asterisks to make them bold: type **like this**.
  • Wrap words in double equals to color them: type ==like this==.

Set the two colors in the Text section’s settings, just under Text color:

  • Highlight color colors your ==…== words.
  • Bold color colors your **bold** words. Leave it blank to keep them the same color as the rest of the line.

You can combine them. Writing ==**like this**== makes a word both bold and colored. For the color to come from Highlight color, leave Bold color blank; if you set both, the bold color wins. The purple, bold headings on quiz result cards are built this way, with only Highlight color set.

To keep line breaks inside one text box, for example a bold heading on the first line and a description below it, turn on Render line breaks (multi-line) in the section’s Advanced group.

How to set up mobile and desktop

Mobile is your base. Build everything in Mobile first.

Switch to Desktop to make changes that only apply on wider screens (768px and up). Only the fields you actually change are saved as desktop overrides, shown in a Desktop Overrides box. You can also Hide on desktop, or use ↩ Reset all to mobile values to clear your overrides.

On desktop you can split into two columns. Open the Container panel while in Desktop preview, set Layout mode to “Two columns (split)”, then assign each section to a column. Switching to split bumps your max width up to 700px if it was under 600. Mobile always stays a single column.

How to choose popup or standalone page

Open the Container panel and set Display mode:

  • Popup overlay appears on top of your storefront pages. It needs the SupaPop app embed turned on in your theme, and it has overlay-only settings like opacity, animation, and a close button.
  • Standalone page lives at its own URL and does not appear on your storefront overlay at all. This mode unlocks the quiz step types, navbar, footer, progress bar, and the Get share link button.

For a standalone quiz, click Get share link to copy its URL. Until the popup is live, that URL returns a “Quiz not found” page, so set the popup live before sharing it.

How to publish

Section edits are saved as drafts. They do not go live until you publish.

  1. Make your section changes. An Unpublished changes badge appears when you have drafts.
  2. Click Publish changes. On success you see “Published to storefront”.

Note: container settings, adding or deleting steps, reordering, pausing, and step names save to the live popup right away. They skip the draft step.

Tips

  • Standalone pages never show on your storefront, even when live. Use the share link to reach them.
  • Deleting a step or section happens instantly with no confirmation, so double-check before you click ×.
  • Quiz step types are hidden until you set the display mode to Standalone page.
  • Publishing stops if routing has a dead end or a loop. Unreachable steps only trigger a warning and still publish, but they will never show.
  • Standalone quizzes and surveys default to showing again right away. Popups default to a 30 day wait, so you may not see your popup again while testing.
  • Preview links expire after 30 to 60 minutes, so an old preview tab can stop working.
  • Apply brand colors rewrites the colors on every section. You can undo with the per-section pickers, but it takes a while.