Webflow sync, pageviews & more.
NEW

How can I display package/product pricing on my Webflow website with an option for visitors to change the displayed price into different currencies like Dollars, Euros, Pounds, and South African Rand (ZAR)?

TL;DR
  • Store base prices in USD in Webflow CMS and add custom data attributes (data-base-price) to price elements.
  • Create a currency switcher UI and use JavaScript (or Finsweet) to fetch conversion rates, convert prices, and format them with correct currency symbols.

To display package/product pricing with currency switching on your Webflow site, you can use a combination of Webflow CMS, custom attributes, and a third-party JavaScript solution or integration like Finsweet's Currency Converter or Shopify Buy Button SDK.

1. Set Up Base Prices in Webflow CMS

  • Create a CMS collection (e.g., “Products” or “Packages”) that includes your price field.
  • Store the base price in USD only (or your primary currency).
  • This single base will be used for dynamic conversion.

2. Add Custom Attributes to Price Elements

  • For each pricing element on your site (e.g., inside a collection list), add a custom attribute:
  • Attribute name: data-base-price
  • Attribute value: Use the dynamic value from the USD price field (e.g., 299).
  • This allows JavaScript to read and convert the price for each item.

3. Add a Currency Switcher UI

  • Create a simple dropdown or buttons for users to select a currency.
  • Give each option a data-currency attribute, e.g.:
  • USD => data-currency="USD"
  • EUR => data-currency="EUR"
  • GBP => data-currency="GBP"
  • ZAR => data-currency="ZAR"

4. Use a JavaScript Converter (e.g. Finsweet’s Currency Converter)

  • Use a JavaScript snippet that:
  • Listens for the user’s selected currency.
  • Fetches live exchange rates using a service like exchangerate.host or [Fixer.io], or use a static rates object.
  • Converts the base USD price using data-base-price.
  • Updates the displayed text content of the price element.

Popular options:

  • Finsweet's Attributes Currency Converter (no-code friendly): https://finsweet.com/attributes/currency
  • It supports dynamic products and live exchange rate APIs.
  • Requires Attributes script and setup via their UI.

If you’re comfortable with code, you can also:

  • Use a JavaScript function to convert currencies using browser fetch APIs and update DOM elements accordingly.

5. Handle Currency Symbols and Formatting

  • Use JavaScript’s Intl.NumberFormat() to handle correct currency symbols and number formatting (e.g., thousand separators for ZAR).
  • Example: new Intl.NumberFormat('en-ZA', { style: 'currency', currency: 'ZAR' }).format(price)

6. Optional: Cache Exchange Rates

  • To speed up performance, store exchange rates in localStorage to avoid unnecessary API calls.
  • Refresh them every X hours to keep it updated.

Summary

To allow dynamic currency switching on your Webflow product pricing, store a single base price (e.g., USD) and use JavaScript (or Finsweet’s tools) to fetch conversion rates and update the prices in real-time. Add a currency switcher UI, set up data attributes on elements, and use formatting to ensure correct symbols are shown.

Rate this answer

Other Webflow Questions