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)?

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.