Warning!
This article requires technical knowledge and prior experience with liquid code. If you are not comfortable with this, please Request a Multi-Currency Installation for help. As well, any other currency conversion apps or software should be disabled on your site before using Multi-Currency. Using two conversion apps at the same time can cause conflicts with how the currency displays on the site.
Before you begin, review Notes Before Installing Apps. This article will help get you prepared and answers many common questions.
Select each step below to view the instructions.
- From Shopify's admin, select Settings.
- Select General.
- Under "Standards and formats", select Change formatting.
-
Replace the HTML with currency code with:
Note: The currency symbol and abbreviation should match your store's currency. If you're using the Japanese Yen as your default currency, please use {{amount_no_decimals}} for your currency formatting.
<span class=money>$ {{amount}} USD</span>
-
Replace the HTML without currency code with:
Note: The currency symbol should match your store's currency.
<span class=money>$ {{amount}} USD</span>
- Select Save.
- Duplicate themes, to create a backup copy.
- From Shopify's admin, select Online Store.
- Select Actions.
- Select Edit code.
- Under "Snippets", find bold-common.liquid.
- If it doesn't exist, select Add a new snippet.
- Enter the correct snippet name.
- Select Create snippet.
- Copy and paste the bold-common.liquid code.
- Select Save.
- From Shopify's admin, select Online Store.
- Select Actions.
- Select Edit code.
- Select Snippets.
- Find these files:
- bold-common.liquid
- bold-currency-converter.liquid
- bold-currency-picker-mount.liquid
- bold-currency-templates.liquid
- Select Assets.
- Find these files:
- flags.min.css
- bold-currency-picker.css
- bold-currency-bootstrap.js
Note: Ensure your bold-currency-picker.css file contains relevant coding. If not, follow the step below.
- If any of these files do not exist, visit Missing Liquid Files in Multi Currency for steps to add them manually.
- Duplicate themes, to create a backup copy.
- From Shopify's admin, select Online Store.
- Select Actions.
- Select Edit code.
- Under "Layout", select theme.liquid.
- Copy and paste this code directly above the </head> tag.
{%- include 'bold-common' -%}
-
Copy and paste this code directly above the </body> tag.
{%- include 'bold-currency-converter' -%}
-
Copy and paste this code where you would like the currency picker widget to appear (optional):
Note: The purpose of this code is to add the currency picker in more that one location (i.e. header, footer, etc.). If you don't complete this step. Multi-Currency will automatically add one for you which will appear at the bottom center of the viewport. If you do complete this step, Multi-Currency will not automatically add one. openDirection: 'up' causes the picker to open upwards, this can be changed to down if you prefer.
{%- include 'bold-currency-picker-mount', openDirection: 'up' -%}
- Select Save.
- From Shopify's admin, select Online Store.
- Select Actions.
- Select Edit code.
- Under "Templates", select cart.liquid.
Note: This may be located under "Sections" in the cart-template.liquid file.
- Find a line of code similar to:
{{ item.price | money }}
- Copy and paste the following snippet of code above this line:
<span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_price" style="display:none !important;"></span>
- Find a line of code similar to:
{{ item.line_price | money }}
- Copy and paste the following snippet of code above this line:
<span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_total" style="display:none !important;"></span>
- Find a line of code similar to:
{{ cart.total_price | money }}
- Copy and paste the following snippet of code above this line:
<span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_total" style="display:none !important;"></span>
- Select Save.
That's it!
Next Steps:
- Add a Currency in Multi-Currency.
- Change the Default Currency
- Create Rounding Rules for a Currency
- Add Exchange Rate Padding
- Test Rounding Rules in Multi-Currency
Comments
Please sign in to leave a comment.