The section types: a reference for every block

You build every SupaPop popup and quiz out of sections. A section is one block on the page: an image, a line of text, a form, a button, and so on. You add them with the Add Section picker, then style and arrange them in the editor. This page lists every block you can add, what it does, and the settings that matter most. Use it when you are deciding which block to reach for, or when a block you expect is missing from the picker.

There are 23 block types under the hood. Two of them share the same name in the editor (both show as “Answer Choice”), so you will see 22 distinct names in the picker. You will usually see fewer than that on any one step, because the picker only shows blocks that make sense for that step (more on that below).

The blocks

Each entry below shows the name as it appears in the Add Section picker, the short description shown under it, and the main settings.

Image (Add a photo or graphic). A photo or graphic. Set alt text, how the image fills its box (cover, contain, or fill), corner rounding, alignment, and width. You can also place text overlays on top of the image, positioned anywhere by percentage.
Text (Heading, body text, or formatted copy). Any heading or paragraph. Control font size (8 to 120 px), weight, font family, color, background, padding, line height, alignment, and width. Inside the Content box you can format individual words: wrap them in **double asterisks** for bold or ==double equals== to color them, then set the Highlight color and Bold color just under Text color. Wrap a word both ways, ==**like this**==, to make it bold and colored at once. Text can also show dynamic dates: type a token like a date 30 days from now and it renders the real date at display time.
Form (Email, phone, or custom field inputs). Collects contact details. Each field is Email, Phone, or a custom text field, with its own label, placeholder, required toggle, and optional Klaviyo mapping. A form must always contain at least one email or phone field. You can drag fields to reorder them and set the submit button text and colors.
Button (Call-to-action or navigation button). A clickable button. The action dropdown offers “Go to next step”, “Close popup”, or “Open URL”. A Link URL field appears only when you choose Open URL. Style the background, text color, rounding, size, alignment, and width.
Spacer (Vertical spacing between sections). Adds blank vertical space between blocks. One setting: height, from 1 to 200 px (default 24).
Logo (Your brand logo). Shows your brand logo. Set the width, a maximum height (default 60 px), and alignment.
Answer Choice (Multiple choice answer option, or Quiz answer that can route or score). A selectable answer. Set its stored value and display label, colors, hover state, rounding, size, alignment, and an optional answer image. On a multi-select quiz question you can also show a checkbox on each answer to signal that more than one pick is allowed. Under the Routing disclosure you can send a visitor somewhere specific based on their pick, and under the Scoring disclosure you can give the answer a score weight and category. See the note below about the two kinds of Answer Choice.
Dismiss Link (the “No thanks” close link). A soft close link, default text “No thanks”. Set its text, color, size, and alignment.
Disclaimer (Legal or compliance text). Small print for consent or compliance, with optional Terms and Privacy links. Important: it ships with a long default SMS marketing consent paragraph, so edit the text before you publish.
Loader (Animated transition between steps). An animated screen shown between steps. Set a heading and body (with their own colors), how long it stays (500 to 30000 ms, default 2000), the spinner or a circular progress ring that fills as it counts down, and optional progress items that tick through one at a time. It can either advance to the next step or redirect to a URL.
Expander (Collapsible content block). A collapsible “tap to reveal” block, default label “Why we ask”. Set the label, the hidden body text, and whether it starts open.
Footer (Fixed bottom content). Fixed content at the bottom, with copyright text and Terms and Privacy links.
Coupon Code (Discount code with copy button). Shows a discount code. Choose an outlined or filled style and, by default, a copy-to-clipboard button so visitors can grab the code in one tap.
Countdown Timer (Urgency timer counting down). A live countdown for urgency. Set the duration (1 second up to 24 hours, default 10 minutes), the clock format, and optional text to show when it expires.
Product Results (Product cards from your Shopify store). Shows product cards pulled from your Shopify store, matched to a visitor’s quiz score. Choose grid or list, image shape, and whether to show price, description, match score, and an explanation. Used on results steps.
Prize Reveal (Scratch or spin game with a weighted prize pool). A spin-to-win wheel or scratch card with a weighted prize pool, drawn on the server so the odds are enforced. Set the prizes, their weights and codes, a reveal gate, and a per-visitor cooldown. See Spin-to-win and scratch-card games for the full setup.
Meter / Gauge (Gradient bar gauge with a marker). A horizontal gradient bar with a labeled marker, for showing a result on a scale, for example a severity or readiness score. Set the title, the value badge, where the marker sits, and the labels at each end. Used on results screens.
Media (Tap-to-play audio, native video, or a YouTube/Vimeo embed). One block with a Media type setting. Audio shows a tap-to-play button (browsers block autoplay with sound). Video is a native player that can also be a muted, looping background clip. Embed is a lazy-loaded iframe, and for safety only youtube-nocookie.com (use the share/embed URL) and player.vimeo.com are allowed. Playback stops when the visitor moves to the next step.
Testimonial (Avatar, star rating, quote, and attribution). A customer-quote card with an optional avatar, a 0 to 5 star rating, the quote, and a name plus subtext line (e.g. “Verified Customer”). Set the colors, alignment, and an optional card background. For a plain quote with no stars, a styled Text block also works.
Tag / Chip Row (A row of label pills). A decorative, non-interactive row of small pills (e.g. “Gluten-free”, “Vegan”, “Non-GMO”), one per line. Set the pill background, text color, size, corner radius, and alignment. For selectable answers that route or score, use Answer Choice instead.
Comparison (Two-column before/after or us-vs-them list). Two labelled columns, each with its own list of items, an icon, and an accent color (red ✕ on the left, green ✓ on the right by default). Stacks to one column on mobile. Good for before/after or you-vs-the-alternative.
Chart (A simple bar or donut chart). A small data chart you fill in by hand: add data points with a label, value, and color. Choose Bar (proportional horizontal bars) or Donut. Optional value suffix (e.g. ”%”) and a title. Best for a handful of points, not large datasets.

The two kinds of Answer Choice

This one trips people up. Two different blocks both appear in the picker as “Answer Choice”, and you cannot tell them apart by name. The difference is the step they belong to:

On a Quiz Question step, the Answer Choice adds an emoji field on top of the usual styling, routing, and scoring controls. Its picker description is “Quiz answer that can route or score”.
On a Survey step, the Answer Choice has the same styling, routing, and scoring controls, just no emoji field. Its description is “Multiple choice answer option”.

Both versions can route a visitor to a specific step and both can add a score weight, so the only real difference in the editor is the emoji field on the quiz version. Reach for the Quiz Question version when you want an emoji on each answer; the Survey version is fine when you don’t.

Where each block can go

You will not see all 23 blocks on every step. The Add Section picker filters by the step type and the display mode, so the wrong blocks stay out of your way. If you “can’t find” a block, the step type is almost always why. A few rules worth knowing:

Form only appears on capture steps (or in quiz mode).
Answer Choice (quiz) appears on quiz-question steps, and on any step when the popup is in quiz mode. Answer Choice (survey) only appears on survey steps.
Dismiss Link only appears on intro and capture steps, and never in quiz mode.
Disclaimer only appears on capture steps (or in quiz mode).
Expander and Product Results only exist in quiz mode.

If you want a block that is hidden, change the step type or display mode, then re-open the picker.

Nearly every visual block has two settings in common:

Width. Full, auto, or a custom width from 40 to 800 px.
Spacing. Top and bottom margin, from -50 to 200 px, to nudge a block closer to or further from its neighbors.

Many blocks also support display logic: show or hide the block based on a visitor’s earlier answer or their running quiz score. That lets one step react to what the visitor told you on a previous step.

Tips

A form must always keep at least one email or phone field. The editor will not let you delete the last contact field (the Remove button disappears on it), and a text-only form will not save. The error reads: “Form must contain at least one email or phone field.”
Open the Routing disclosure on an Answer Choice to branch. The helper text explains it: “Route visitors to different steps based on their answer. If no routing is set, visitors advance to the next step in order.”
The Loader can redirect instead of advance. If you set a redirect URL on it, the visitor is sent to that URL after the timeout rather than moving to the next step.
A few blocks default to brand orange (the Loader spinner, Expander text, Coupon background, and progress bars). Recolor them if orange clashes with your store.
Edit the Disclaimer text before publishing. Left untouched, it publishes a long SMS marketing consent paragraph word for word.

Post-purchase popups are limited