Table of Contents
- Overview
- Key Features
- Integration Steps
- Schedule Exchange Rate Imports
- Configuration Steps
- Currency Conversion on the Frontend
Overview
Fixer.io is a powerful currency configuration tool designed for seamless currency conversion across countries, aligning prices with current foreign exchange rates. It supports global sales by converting prices into various currencies, ensuring businesses stay competitive worldwide. With real-time updates, Fixer.io keeps all prices accurate and up-to-date with the latest foreign exchange rates. Customers can easily view prices and make purchases in their preferred currency, enhancing the user experience. The integration steps involve setting up the base currency, configuring display preferences, and scheduling automatic exchange rate imports for consistent accuracy.
Key Features
- Currency Conversion: Fixer.io facilitates currency conversion to support worldwide sales, allowing businesses to display prices in different currencies to cater to international customers
- Up-to-Date Prices: Businesses can keep all prices up-to-date with foreign exchange rates, ensuring accuracy and transparency in their pricing strategy
- Customer Convenience: Enabling customers to view prices and make purchases in their currency of choice, enhancing the shopping experience and increasing conversion rates
Learn More about Fixer.io: https://fixer.io/
View Fixer.io Documentation: https://fixer.io/documentation
Integration Steps
Setting Up
Users begin the Fixer.io integration by visiting the Currency Configuration Integration page. Go to Tools → Apps & Addons → Currency Configuration.
From there, install settings related to Currency Configuration Integration.
There are three required fields:
- Base Currency: the currency wanted as the default currency. This is set to USD until another currency is selected.
- Default Display Currency: the currency wanted to display by default on the users page. This is required.
- Allowed Currencies: all other currencies users would like to allow customers to use.
Schedule Exchange Rate Imports
The Fixer.io integration can import the latest exchange rates to ensure all prices are up-to-date. This requires regular updates, which can be scheduled to run automatically.
From the Currency Configuration Integration page, scroll down to Scheduled Import Settings. This will allow users to enable scheduled imports for currency rates.
There are five required fields here:
- Enabled: Enable or disable scheduled import for currency rates.
- Service: Select the services desired. The default value is Fixer.io.
- API Key: The API key for the selected service’s account.
- Start Time: The time users want the import to run, set in hh:mm:ss. It is set to 00:00:00 by default.
- Frequency: The frequency for the imports. This can be set to daily, weekly, or monthly, and is set to daily by default.
Configuration Steps
Fixer.io can be configured to display different currencies on a Storefront either by adding a widget or by editing the HTML for the website directly.
Add Via Widget
To add a widget for converting currencies, go to the Themes page on the Storefront dashboard and click the Edit button.
From there, go to the Header tab and click the Add Widget button on the top right corner.
The option of adding a widget will appear. Select the Currency widget, and it will be added to the list of available widgets.
Add Via HTML
Users can manually add currency configuration options via HTML. To begin, go to the Themes page in Storefront, select the currently active theme, and click Edit.
From there, add currency configuration to multiple pages, including:
- Product Details
- Shopping Cart
- Checkout
- Order Invoice
- Order History
- Order View
Product Details
Go to Product Details → HTML Editor and add “CustomConvertPrice” in class “ProductDetailsPricing.”
Shopping Cart
Under Theme, go to Header → Widgets and select the Edit icon under SideCart.
Select the Layout tab and add “CustomConvertPrice” in class “smallCart-subAmount’ and ‘smallCart-shippingAmount fw-normal.”
Then go to Shopping Cart → Widgets and click the edit icon.
From there, go to the Layout tab and add “CustomConvertPrice” in class “badge badge-pill badge-secondary float-end.”
Checkout
Select the Theme Files tab and use the Search bar to find “Checkout.js.” Select the checkout file for the active theme and click Edit.
From there, add the following:
- Add “CustomConvertPrice” in class “shipping-cost.”
- Add code to handle the trigger at the method:
if (typeof triggerConvertPriceWithCurrencyCode !== 'undefined') {
triggerConvertPriceWithCurrencyCode();
}
Order Invoice
To add currency conversions to order invoices, go to Order Invoice → HTML Editor.
Then add “CustomConvertPrice” in classes “OrderDetailsItemPrice,” “ReceiptItem-total,” “ReceiptItemSubtotal-text OrderPricing no-border,” “ReceiptItemShipping-text OrderPricing no-border,” “ReceiptItemTax-text OrderPricing no-border,” and “ReceiptItemTotal-text OrderPricing no-border.”
Order History
To add currency conversions to Order History page, go to Order History → HTML Editor
Then add “CustomConvertPrice” in every class “OrderHistoryTotal,” “OrderHistoryOrdersItem-amount,” and “OrderHistoryPaymentAmount.”
Order View
To add currency conversions to Order View pages, go to Order View / Confirmation → HTML Editor.
From there, add “CustomConvertPrice” to class “OrderDetailsItemPrice” everywhere it appears.
Currency Conversion on the Frontend
Once users have added Fixer.io currency conversions, they will be able to select all the currencies enabled in the Settings page from a dropdown menu:
When a user selects a currency from this menu, the prices of all listed items will be adjusted in accordance to the exchange rate, including in the product view pages, shopping cart, checkout, and invoice.
Shipping prices, account balances, and all other costs will also be displayed in the selected currency.
This will allow users to shop, view prices, and track their purchases in the currency of their choice, enabling smoother sales around the world.