Designing the wheel

The Wheel screen has two halves. On the left, the prizes — each row is one slice — and below them the appearance: the design, the heading and description shown beside the wheel, the spin button, the panel colours, the wheel rim, dots, centre hub and pointer, and an optional centre logo. On the right, the preview, which updates as you type.

The eight designs#

Design at the top of the Appearance panel chooses the shape of the popup. There are eight, and they all use the colours you set underneath, so trying one never changes them:

• Card — the wheel beside the words, in a rounded panel. What the plugin has always looked like, and what a shop that has never chosen keeps.
• Stack — one narrow column, the wheel on top and the words and form under it. The narrowest of the eight, and the one that reads the same on a phone as it does on a desktop.
• Ticket — a cloakroom ticket: square corners, a torn perforation between the wheel and the form, and a notch punched out of each end of it, so the page shows through the holes. The perforation runs across rather than down on a phone, and the notches are left off there.
• Strip — a wide, low band with a small wheel and the form fields side by side. It suits a page more than a popup, and is the one to reach for with the shortcode.
• Split — two halves: the wheel on a side tinted a shade off your panel colour, a hairline, and the words and form on the other. The wheel is the largest of the eight here.
• Dome — one column under an arched, tinted top, the wheel in the dome and the words centred beneath it.
• Frame — square corners, a fine double line drawn just inside the edge and a serif heading. An invitation card.
• Sheet — rises from the bottom of the screen, the full width of it, with a small wheel on one side and the fields in a row. The shape a phone shopper knows from every app; on a page it is a wide card like Strip.

Every one of them stacks to a single column on a phone, mirrors on a right-to-left shop, and holds still for a visitor whose system asks for reduced motion.

The preview there is the wheel on its own. To see the whole popup, with its panel, heading, form and colours, press Preview on site, on this screen or on the dashboard. It opens your shop's home page in a new tab with the popup already open, even while the wheel is switched off, and whatever the display rules and your own "seen it" cookie would say. Only you see it: the link works for someone signed in who can manage the wheel, and the page is never cached. Spins in a preview draw a slice by the real odds and show the real message, with a sample code instead of a coupon; no lead, coupon, email or stock change is made, so they never reach the dashboard.

Colours that stay readable#

The design decides the shape; these decide the colours, and the two never overlap. You choose the panel background and the panel text. The parts you do not choose are worked out from those two every time the popup is drawn: the edge of each form field, the close button, the coupon's dashed border, the focus ring and the colour of an error message. Each is checked against the panel it sits on, to the contrast WCAG AA asks for, so a white panel on a white shop still has fields you can see and an error you can read. The inline wheel uses the same colours as the popup.

"No thanks"#

Decline link text puts a small link under the Spin button. A visitor who presses it closes the popup and does not see it again in that browser, nor the launcher, for a year. Leave it blank for no link. New shops start with "No thanks"; a shop that saved its wheel before 1.4.33 keeps its popup as it was until a label is entered.