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.
- 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.