Docs / Building

Spin-to-win and scratch-card prize popups

Gamified popups turn a plain email capture into a game. A shopper enters their email, then spins a wheel or scratches a card to reveal a prize, usually a discount code. The moment of play lifts sign-ups, and the reward gives them a reason to buy. SupaPop has two formats: Spin to Win (a spinning wheel) and Scratch & Win (a scratch-off ticket).

Both run on the same building block, a Prize Reveal section, so everything in this guide applies to either game.

How the game stays fair and tamper-proof

The winning prize is decided on SupaPop’s server using the odds you set, not in the shopper’s browser. The wheel or scratch card only animates to the result the server already chose. That means a shopper cannot inspect the page, re-roll, or rig the outcome, and your rare prizes stay rare. Each visitor gets one play by default (you can allow more, see below).

The fastest way to start: a template

  1. From your popups list, create a new popup to open the template picker.
  2. Open the Email & SMS tab, then choose Spin to Win or Scratch & Win (both carry a Gamified tag).
  3. You get a ready two-step popup: an email capture step, then the game step. Open it in the editor to customize.

You can also add a game to any popup yourself: on a step, click + Add section and choose Prize Reveal.

Building your prize pool

Select the Prize Reveal section to open its settings. Under Prizes, each prize has:

  • Label: what shows on the wheel wedge or the scratched ticket, for example “15% OFF”.
  • Weight: how likely this prize is, relative to the others. Weights do not need to add up to anything in particular. SupaPop shows each prize’s real odds as a percentage right above it (”= 50% odds”), updating as you type.
  • Discount code: the code revealed when this prize is won. Leave it blank to make that prize a “no win”.
  • Color: the wedge color on the wheel, and the reveal color on a scratch card. New prizes are given a distinct color automatically.

Click + Add prize to add as many tiers as you like (there is no limit). To remove one, click Remove on its row. If no prize has a weight above zero, the editor warns you, because the game cannot go live without at least one winnable prize.

Consolation (fallback): the Consolation message and optional code are used only if something goes wrong on the server (for example a momentary database hiccup), so the popup always shows something graceful instead of breaking. By default it carries no code.

Choosing the game and the flow

  • Game: Spin the wheel or Scratch card.
  • When to capture email/SMS:
    • Before playing (default): the shopper enters their email on the step before the game, then plays and sees the code right away. This is the usual setup.
    • After playing: the shopper plays first, sees what they won, then enters their email to unlock the code. The code stays hidden until they provide a valid email or phone.
  • How often can a visitor play? One play per visitor, ever (default), Once a day, Once a week, or a Custom window in seconds. A returning visitor sees the same result until their window resets.

Styling the game

In the same Prize Reveal panel:

  • Button & copy: the play button text and colors, the Win heading (“You won!”), the No-win heading, and the Copy-button label.
  • Per-prize colors: set on each prize row (above).
  • Scratch cover color (scratch only): the color of the foil the shopper scratches off. It looks best as a brand color. The “SCRATCH HERE” text and dashed border switch to white or dark automatically for contrast.
  • Card edge (scratch only): Ticket (a scalloped, postage-stamp edge, the default) or Solid (a plain rounded card).
  • Effects:
    • Sound: on or off. The scratch card plays a soft scratching sound while it is rubbed; the wheel plays a spin sound.
    • Sound volume (%): defaults to 50%, since full volume can be jarring.
    • Confetti on win: a confetti burst when a prize with a code is revealed.

A must-know about the discount codes

SupaPop reveals the code you type, but it does not create the discount inside Shopify, and the same code is shared by everyone who wins that prize. So before you go live, create each discount under Shopify > Discounts and protect it:

  • Turn on Limit to one use per customer.
  • Add a total usage limit (a cap on redemptions).
  • Set an expiry date.

This stops a winning code from being posted publicly and drained. The editor shows this same reminder under the prize pool.

Publish and test

  1. Click Publish to push your draft live.
  2. Use Preview to open the game on your storefront and play it. Check that the wheel lands on the prize you expect, the code reveals, and (for “After playing”) the email gate works before the code shows.
  3. The center preview in the editor mirrors the live look (the wheel with its pointer and hub, or the scratch ticket), so you can style without leaving the editor.

A few tips:

  • Keep wheel labels short so they fit the wedges.
  • Give at least one prize a high weight so most shoppers feel rewarded. That is why the starter templates ship as guaranteed-win pools.
  • Test on your phone too. The game is built mobile-first.