Multi Currency Auto Switcher

Installation

Help

This app comes with FREE installation by the MageWorx Shopify professionals. All you need to do to get the app on your store is to submit a request by hitting the button below. Please, bear in mind that usually, we install the app within 24 hours (on business days). Alternatively, you can install the extension on your own, following the instructions in this user guide.

Free installation request

Modify currency formatting to make you prices convertible into other currencies

In your Shopify admin panel navigate to Settings → General. On that page scroll down and in the Store currency section click on the Change formatting link.

In the text boxes titled HTML with currency and HTML without currency add the following html code around the content of the text boxes to correspond to this logic:

<span class=mw-price>CONTENT</span>

As an example, if your store currency is USD, after you make the edit, the content of those text boxes should look like that:

1. HTML with currency

   <span class=mw-price>${{amount}} USD</span>
   

2. HTML without currency:

   <span class=mw-price>${{amount}}</span>
   

When finished, click Save.

Add a currency dropdown to your site

Navigate to Online Store → Themes. On that page from the Actions dropdown of the chosen theme select Edit code.

You can insert the currency dropdown into almost any part of your website with placing this snippet into your template:

<span class="mw-switcher"></span>

Below is an example of a dropdown placement in the header of the page by the shopping cart icon. We’ll be using the default Shopify theme called Launchpad Star.

Choose the theme.liquid file and scroll down to the toolbar-wrapper class. It contains the code for the site search and shopping cart icon link. Since those elements are coded using list tags <li> we need to wrap a <li> tag around our dropdown snippet so that it would look like that:

<li><span class="mw-switcher"></span></li>

Here the result in the code:

... and on the website front-end:

Note

It is clear that the currency dropdown does not align properly, so we are going to adjust some CSS styles via the app's setting page.

On the Apps → Multi Currency Auto Switcher page you will see an input box called Custom CSS for the drop down select box — this is where we are going to specify our custom CSS styles. By default it only has one attribute specified — the one for the currency dropdown width: max-width: 100px;. We are going to add two more: margin-top: 20px; and margin-left: 20px; so that in the end it would look like that:

The end result on the site’s front-end would look like that:

The Extension's Configuration

Shopify Multi Currency Auto Switcher adds the global flexibility to your Shopify store. The extension allows you to automatically switch currency based on user location, convert prices to customers’ local currencies and edit the currency rates according to your business needs.

The customer can reload the prices and the new currency will be applied automatically without the reloading of the page:

To change the extension configuration, log into the backend and go to Apps > Multi Currency Auto Switcher. The configuration cosists of 3 tabs.

General Settings

To display the currency selection dropdown, enable the Show currency selection drop-down on the front-end configuration. This dropdown can have the custom style so that it will match the website design. To change the custom style, edit the Use this style attribute to customize the look of your currency switcher on the front-end field.

The design of the dropdown (The Display Mode) can be different: it can show the currency code (Label), the currency code with the flag (Flag+Label) or just the Flag.

For the sake of the convenience, the decimals (like cents) can be skipped. For this, enable the Display price without decimals configuration.

The converted prices can be rounded up according to the Math principle (1.49 will be rounded up to 1 and 1.51 will be rounded to 2); Greater Value (1.01 will be rounded up to 2) and the Lower Value (1.99 will be rounded to 1).

Currency Setings

The store owner can show all the available currencies (a whole lot of 248 currencies available by Shopify) or limit their number.

This example shows the display of the currency dropdown if you select the Convert to currency that corresponds to visitor’s country of origin configuration.

However,if Specify allowed currencies, with corresponding countries is selected, you can manually link the desired currency to the appropriate country. For any countries not associated with a currency, the store’s base currency will be shown.

The new currency can be added or deleted, the countries assotiated with this currency can be edited in the Country field.

Currency Rates

This configuration allows specifying the custom currency rates. The rates are calculated to your base currency. To find the available currency, you can use the search box. The current Shopify rate is shown near each currency.

Questions?

For any technical and pre-sale questions, feel free to contact us at apps@mageworx.com.