Components

The parts.

Every class lives in assets/css/prefstore.css. Copy the markup from this page’s source.

Buttons

One primary action per screen. On a shop’s page the primary button takes the shop’s colour.

The mark and the coin

Inline the SVG so the p takes currentColor. The coin is a group with the class coin: a rim circle and a face circle.

Motion

Two Lottie animations, nothing else moves. Files in animations/; helper in assets/js/prefstore-motion.js. Both show a still frame for people who have reduced motion turned on.

Coin drop · ink

Paid screen and sale alert on light grounds. Falls, turns once, settles, then one glint. Plays once, 1.2s.

Coin drop · white

Same, for dark and merchant colours. The helper picks ink or white from --ps-on-m.

Coin spin · loop

Only while a payment is processing, inside the Pay button. 0.67s per turn.

PrefstoreMotion.coinSpin(el)

Prefkey notice

Value and minimum in one sentence, at one size. Turns dark when the Prefkey applies.

Your $10 Prefkey works here on orders of $30 or more. Add $4.50 more to use it.

Prefkey applied. $10.00 comes off at checkout.

Receipt

Every number is set in the mono face so prices line up. The Prefkey row is the only coloured row.

* * *

1 × Salted honey, double9.50

1 × Pint, vanilla bean16.00

1 × Strawberry buttermilk6.90

Order total32.40

Prefkey−10.00

You pay$22.40

Salted honey, double

Cup or waffle cone

9.50

Pint, vanilla bean

Hand-packed

16.00

Status, chips and notices

Open till 9Busy · 25 minClosed · opens 12Pickup21+ Prefkey $10

Order sent. Sweet Scoops has it.

That card was declined. Nothing was charged. Try another card.

Forms and time slots

Name for the orderMobile number

That number looks short. Check it and try again.

Pickup time

Merchant tile

Set data-merchant-color on any wrapper. prefstore.js picks white or ink for the p.