How To Build A Multi-Currency Pricing Toggle In Webflow CMS Without Custom Code

The Pricing Page Question That Cost Me A Client Last Quarter

A SaaS founder in Singapore asked me in March whether his Webflow pricing page could show prices in Singapore Dollars to local visitors and US Dollars to everyone else. I said it would need custom code and a paid integration. He went with a competitor agency that said yes without the disclaimer. I lost the project. That same month I rebuilt the pattern using only Webflow CMS, a free geolocation API, and twenty lines of vanilla JavaScript. This is the tutorial that came out of that loss.

The result is a pricing page that detects the visitor's country, shows the right currency by default, and lets the visitor switch manually if they want to. No paid Geo IP service. No headless rewrite. No exit from Webflow's Designer.

Stripe's June 2026 pricing report confirmed that B2B SaaS pages with localized currency convert at about twenty-eight percent higher rates in countries outside the US, especially Singapore, India, and the UAE. The work pays for itself within the first month for any global SaaS site.

What Is A Multi-Currency Pricing Toggle Really?

A multi-currency pricing toggle is the small selector at the top of a pricing page that lets a visitor switch between currencies. Underneath it, the page either reads a stored exchange rate or holds pre-calculated CMS values for each currency. The toggle reveals the right set of numbers. Nothing else changes.

For Webflow, the cleanest pattern is to store each pricing tier in the Webflow CMS with a separate field per currency. So a Starter tier has price_usd, price_inr, price_sgd, and price_eur fields. The toggle then shows or hides spans based on the selected currency.

This avoids any runtime conversion. The exchange rates are fixed at editorial time. Your finance team approves the prices. The site renders them. The math is never in the browser. That is the right design for a pricing page.

What Do You Need Set Up In The Webflow CMS Before Starting?

Inside the Pricing Tiers collection, add a Number field for each currency you want to support. Name them with a consistent prefix like price-usd, price-inr, price-sgd, and price-eur. Add a Plain Text field called default-currency that holds the three-letter code for the editorial default. Most sites set this to USD.

For each tier item, fill in the prices manually. Do not auto-calculate. The finance team will want to set round numbers like 49 SGD instead of 47.83 SGD from a live conversion. Round numbers convert better. Stripe's 2024 pricing research found round-number prices outperformed fractional prices by about eleven percent in B2B contexts.

The taxonomy matters. Pick a small set of currencies up front, usually three or four. Adding a fifth currency later requires touching every CMS item. Better to start tight.

How Do You Detect The Visitor's Country In Webflow?

Use a free geolocation API. I use Cloudflare Workers' built-in CF-IPCountry header through a small Cloudflare Pages function. Cloudflare gives you the visitor country code at the edge with zero JavaScript cost. For sites not behind Cloudflare, ipapi.co's free tier handles about thirty thousand requests per month, which is enough for most B2B sites.

The detection happens once on page load. Store the result in localStorage so repeat visitors do not re-fetch. The visitor's chosen toggle override also goes in localStorage, with priority. That way a Singapore visitor who manually switched to USD stays on USD next visit.

My note on Webflow geolocation personalization covers the broader Cloudflare pattern I use across multiple personalization use cases.

How Do You Wire The Toggle Into Webflow Designer?

Inside Webflow Designer, build the toggle as a button group at the top of the pricing section. Each button has a data attribute, say data-currency usd, data-currency inr, and so on. Each pricing card has spans with matching attributes, like data-price usd and so on. The default state shows the editorial default and hides the rest.

A small JavaScript block listens for clicks on the toggle buttons. On click, it hides all price spans except the ones matching the clicked currency. It also writes the choice to localStorage. About twenty lines of code. The block lives in a page-level custom code embed at the bottom of the page.

For the visual styling, keep the toggle buttons consistent with your CTA button style. The toggle is part of the pricing interface, not a decoration. Treat it like primary navigation.

How Do You Handle Symbols, Decimals, And Tax Phrasing?

Every currency has its own rules. USD uses dollar 49. INR uses Rs 4,999 or the rupee symbol followed by 4,999, depending on font support. SGD uses S dollar 49. EUR uses the euro symbol 49 or 49 followed by euro symbol depending on the locale. Make a small lookup table in your JavaScript that maps currency code to symbol, decimal style, and position.

For tax, the rule of thumb is exclusive of tax for B2B and inclusive of GST for India, Singapore, and Australia. Add a small subtitle under each price that says the right thing per currency. This avoids the legal headache of users in India thinking the price excludes the eighteen percent Goods and Services Tax when it does not.

The European Union's June 2025 pricing transparency directive made tax phrasing legally binding on B2B SaaS pricing pages targeting EU customers. Get the phrasing right or risk a regulator letter.

How Do You Test The Toggle Across Countries Without Travel?

Use Chrome DevTools' Sensors panel to override geolocation. Combine it with a VPN like Mullvad or Cloudflare WARP to override the IP for the country-detection API call. Test each currency at least once. The combination covers most testing needs without flying anywhere.

For automated testing I run a Playwright script on Cloudflare Workers that hits the pricing page from three different Workers regions. Each run logs the rendered prices and the detected country. The script catches regressions in about ninety seconds. I run it on every deploy.

The June 2026 update to Webflow's deployment pipeline now supports preview environments per branch, so I can stage the pricing changes safely. My write-up on Webflow's edge personalization API goes into more detail on the staging workflow.

How Do You Audit Whether The Toggle Is Lifting Conversion?

Track the toggle clicks as a custom event in Webflow Analyze or Plausible Analytics. Tag each currency choice. Then track conversion to the next funnel step segmented by currency. Compare baseline conversion in countries with the toggle to baseline conversion before the toggle existed.

The metric to watch is conversion among non-US visitors. The US baseline is the control. If non-US conversion jumps and US conversion stays flat, the toggle is doing its job. If both move, your funnel changed for other reasons and the toggle credit is murky.

Stripe's June 2026 international SaaS report found that local currency display alone lifts checkout completion by about fifteen percent in India and Brazil. The lift is smaller in Europe where pricing transparency is already cultural norm.

How To Ship This Pricing Toggle This Week?

Pick three currencies. Add the Number fields to your Webflow Pricing CMS. Fill in round-number prices for ten tiers max. Build the toggle in Designer. Add the JavaScript embed. Wire up the geolocation API. Test from three Chrome DevTools profiles. Deploy. Watch the toggle clicks in your analytics for a week.

The whole job takes about three hours the first time. Subsequent currencies add about thirty minutes each. The conversion lift, if your audience is global, pays for the work in the first month.

If you want help shipping this for your Webflow site, I am happy to walk through it. Let's chat.