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) | |
Full version — $168 once · the checkout and withdrawal screens: order button, "Withdraw from contract here", withdrawal form, add-on consent, 14-day bar, receipts, order card (6 components, 22 more variants). One payment, not a subscription.
Get the full kitYour 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.
Get the complete version $168
This page is the working piece. The full pack has everything below.
Ecommerce UI kit for EU shops: a "−38%" badge against €79 is really −17% when the 30-day low was €59. 8 components, 29 variants, withdrawal button required from 19 June 2026.
Directive 2011/83/EU Art. 24(3), as amended by Directive (EU) 2019/2161: 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
Buy the full version — $168
Questions people ask
What does this ecommerce UI kit do?
It gives you 8 Figma components with 29 variants for the EU checkout: the sale price badge with the 30-day prior price (Art. 6a), the order button labelled "Order with obligation to pay", the "Withdraw from contract here" and "Confirm withdrawal" buttons required from 19 June 2026, the withdrawal form, add-on consent, the 14-day period bar, alerts and the order card.
Who is it for?
Product designers, Shopify and WooCommerce agencies and in-house teams who design product pages and checkouts for shops selling to EU consumers. If your shop shows sale prices, takes orders online and must add the online withdrawal function required from 19 June 2026, the states are already drawn. Sketch users open the same .sketch file.
Why not use a free ecommerce UI kit?
Free ecommerce kits label the button "Buy now" and put a crossed-out list price on the sale badge. Under Directive 2011/83/EU Art. 8(2) a wrong order button label means the consumer is not bound by the contract, and Art. 6a of Directive 98/6/EC makes the prior price the lowest price of the last 30 days. A chatbot cannot hand you Figma variants.
What is free?
The sale price badge and the prior-price tooltip, 7 variants, as Figma plugin, .sketch and SVG, plus the browser prior-price calculator. Example: the price was €79, dropped to €59 from 12 to 18 September 2026, and the sale at €49 starts 1 October 2026. The prior price is €59, so the badge reads −17%, not −38%.
What does it cost compared to the alternative?
The full kit is $168, paid once, not a subscription. It adds the 6 checkout and withdrawal components: order and withdrawal buttons, the withdrawal form, add-on consent, the 14-day period bar, receipt alerts and the order card. The risk you design against is a fine of at least 4% of annual turnover under coordinated EU enforcement.
Ask about this tool
One question, answered by the person who built it. Your email only if you want the answer sent.