Ecommerce UI kit: the price label each country asks for

For product designers and agencies building one store that sells into the UK, Germany, California, Japan, Australia and Canada. Type your own price, mandatory fee and VAT rate. Every label below updates.

Full version — $168 once: product card per market, price breakdown tooltip, price display check alerts, add-to-cart states, cart fields and market switcher (8 components, 30 variants, Figma plugin + .sketch + SVG). Get the full kit
One payment, not a subscription. The labels on this page stay free.
MarketLabel on the cardRule

Why the one-price card fails

Free ecommerce UI kits draw one price, “$40.00”, and add the fee at checkout. In the UK that drip pricing is banned since 6 April 2025 (Digital Markets, Competition and Consumers Act 2024), and the CMA can fine up to 10% of global turnover. California SB 478 has required every mandatory fee in the advertised price since 1 July 2024; tax and shipping may stay out. Germany wants the price incl. MwSt. and a note that delivery is added. Japan has required the tax-inclusive total since 1 April 2021.

How to get the kit into Figma

  1. In Figma, drag the .sketch file onto the file browser. Figma imports .sketch files; Sketch users open the same file.
  2. For one vector, open an .svg, copy it and paste it into Figma: it lands as an editable vector.
  3. 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 keeps each variant as a named, colored shape; part of the component structure is simplified and the text labels come through the SVGs and the plugin.

A design file and a label calculator. It does not calculate tax in your store and is not legal advice. VAT rates differ by product — type the rate that applies to yours.

Get the complete version $168

This page is the working piece. The full pack has everything below.

Ecommerce UI kit for stores selling into several countries: a £40.00 item with a £5.00 service fee must read £54.00 incl. VAT in the UK (drip pricing banned since 6 April 2025, CMA fines up

UK: Digital Markets, Competition and Consumers Act 2024 — drip pricing (mandatory fees left out of the headline price) is banned and the CMA can fine up to 10% of global turnover, since 6 April 2025. EU: the selling price is the f

Buy the full version — $168
ENDEJAESPT

Find a tool

· ReadyStack

Worked example

Real numbers from this tool, line by line.

Ecommerce UI kit: the price label each country asks for

Card reads £54.00, not £40.00. That is the finished product card for one linen shirt sold in the UK: 40.00 before tax, a mandatory 5.00 service fee, VAT at 20%. The label says £54.00 incl. VAT, and the fee is not added later at checkout.

MarketLabel the kit drawsNot this
UK (VAT 20%)£54.00 incl. VAT£40.00 + £5.00 fee + VAT
Germany (MwSt. 19%)53,55 € inkl. MwSt., zzgl. Versand40,00 € zzgl. MwSt.
California$45.00 + tax · service fee included$40.00 + $5.00 service fee
Japan (10%)¥4,950 (tax incl.)¥4,000 + tax
Australia (GST 10%)A$49.50 incl. GSTA$40.00 + A$5.00 fee + GST
CanadaC$45.00 + tax · service fee includedC$40.00 + C$5.00 fee

Why one price does not fit six countries

Most ecommerce UI kits draw a single price, usually "$40.00", and leave fees and tax to the checkout. That works nowhere in particular. In the UK, the Digital Markets, Competition and Consumers Act 2024 has banned drip pricing since 6 April 2025: a mandatory fee belongs in the headline price, and the CMA can fine up to 10% of global turnover. Consumer prices there include VAT, so the shirt reads £54.00: £45.00 plus £9.00 VAT.

In Germany the selling price is the final price including VAT (Price Indication Directive 98/6/EC Art. 2), and the PAngV also asks you to say whether delivery is added. The same shirt reads 53,55 € inkl. MwSt., zzgl. Versand: 45,00 € plus 8,55 € MwSt. Directive (EU) 2019/2161 set maximum fines of at least 4% of annual turnover for widespread infringements.

California is the opposite on tax. SB 478, in force since 1 July 2024, says the advertised price must include every mandatory fee, but government taxes and shipping may stay out. So the label is $45.00 + tax, with the service fee already inside. Canada treats drip pricing as deceptive marketing under the Competition Act since 23 June 2022, and taxes may still be added: C$45.00 + tax.

Japan has required the tax-inclusive total since 1 April 2021 (Consumption Tax Act Art. 63). A ¥4,000 shirt with a ¥500 fee at 10% reads ¥4,950 (tax incl.). Australia asks for a single price including GST and every quantifiable mandatory charge (Australian Consumer Law s.48): A$49.50 incl. GST, delivery shown on its own.

What the kit draws

The kit has 8 components and 30 variants. The two free components are the price labels: four tax-included labels (UK, Germany, Australia, Japan) and four plus-tax labels (California, Canada, the US shipping note and the drip-fee error). The full kit adds the product card per market, a price breakdown tooltip ("Base £40.00 · service fee £5.00 · VAT 20% £9.00 = £54.00"), price display check alerts, add-to-cart states, cart fields and a market switcher.

It ships three ways: a Figma plugin that rebuilds the variant sets, 30 SVG files you paste straight into Figma, and one .sketch file that Figma imports and Sketch opens. The .sketch keeps each variant as a named, colored shape; part of the component structure is simplified, and the text labels come through the SVGs and the plugin.

Try it with your own numbers

The free calculator on the product page takes your price before tax, your mandatory fee, your shipping and your VAT rates. Set the fee to zero and the UK label drops to £48.00 incl. VAT; set Germany to 7% for books and it reads 42,80 € inkl. MwSt. Nothing is uploaded. VAT rates differ by product, so type the one that applies to yours, and agree the final wording with your counsel.

15 seconds — what it actually does

Questions people ask

What does this ecommerce UI kit do?

It gives you 8 Figma components with 30 variants for product cards and carts, with the price drawn the way each market's rule asks: tax-included labels for the UK, Germany, Australia and Japan, plus-tax labels with fees included for California and Canada, a price breakdown tooltip, price display check alerts, add-to-cart states, cart fields and a market switcher.

Who is it for?

Product designers and Shopify or WooCommerce agencies building product pages for stores that sell into more than one country. If the same shirt is sold in London, Berlin and Los Angeles, each page needs a different price label: £54.00 incl. VAT, 53,55 € inkl. MwSt., $45.00 + tax, ¥4,950 (tax incl.), A$49.50 incl. GST or C$45.00 + tax. Sketch users open the same file.

Why not use a free ecommerce UI kit?

Free kits draw one price and add fees at checkout. The UK has banned that drip pricing since 6 April 2025 and the CMA can fine up to 10% of global turnover; California SB 478 has required mandatory fees in the advertised price since 1 July 2024. A chatbot cannot hand you Figma variants for each market.

What is free?

The price label: 8 variants covering the UK, Germany, Australia, Japan, California and Canada plus the drip-fee error, as Figma plugin, .sketch and SVG, and the browser calculator. Example: 40.00 before tax with a 5.00 service fee reads £54.00 incl. VAT in the UK and $45.00 + tax in California.

What does it cost compared to the alternative?

The full kit is $168, paid once, not a subscription. It adds the 6 components you need after the label: product card per market, price breakdown tooltip, price display check alerts, add-to-cart states, cart fields and the market switcher. Paid ecommerce UI kits on the market cost up to $168 (shelf measured September 2026).

Ask about this tool

One question, answered by the person who built it. Your email only if you want the answer sent.