Ecommerce UI Kit — EU Checkout Compliance
For designers and agencies building product pages and checkouts for shops that sell to EU consumers. Your sale badge must count from the lowest price of the last 30 days, not from the list price.
| 30-day window checked | |
| Prior price (lowest in the window, Art. 6a) | |
| Honest discount vs prior price | |
| Your planned badge (vs your strike price) |
Your prices
The page runs in your browser; nothing is sent anywhere.
Free: the price block of a product page (Figma + Sketch + SVG)
The sale price badge (4 variants: discount vs prior price, prior price line, regular price, error) and the prior-price tooltip (3 variants) — 7 variants, complete for the price block. Download the free kit
What the full kit adds (8 components, 29 variants)
| Order and withdrawal buttons | "Order with obligation to pay" · "Withdraw from contract here" · "Confirm withdrawal" · disabled |
| Online withdrawal statement (Art. 11a(2)) | name · contract · confirmation email · error |
| Paid add-on consent (Art. 22) | unticked default · ticked by customer · error pre-ticked · disabled |
| Withdrawal period bar | open · last day · ended |
| Withdrawal receipt (Art. 11a(4)) | receipt sent · statement incomplete · info |
| Order summary card | summary · order placed · withdrawal received · on sale |
What you lose, and when
From 19 June 2026 an online shop must offer a withdrawal function labelled "withdraw from contract here" (Art. 11a, Directive (EU) 2023/2673). Without an order button labelled "order with obligation to pay" or an unambiguous equivalent, the consumer is not bound by the contract (Directive 2011/83/EU Art. 8(2)). In coordinated EU enforcement the maximum fine is at least 4% of the trader's annual turnover in the Member States concerned, or at least EUR 2 million where turnover is unknown (Art. 24(3)–(4), as amended by Directive (EU) 2019/2161).
Why not a free kit or a chatbot: free ecommerce kits label the button "Buy now" and strike through a list price; a chatbot cannot hand you Figma components with variants.
How to get it into Figma
- In Figma, drag the .sketch file onto the file browser; Figma imports .sketch files. Sketch users open the same file.
- Open an .svg, copy it and paste it into Figma: it lands as an editable vector.
- To rebuild the variant sets, import the plugin from manifest.json (Plugins > Development > Import plugin from manifest). Menu names differ by Figma version and UI language.
The .sketch carries each variant as a named, colored shape without its text label, and part of the component structure is simplified; the SVGs and the plugin carry the labels. This is a design file, not legal advice.