Multi-Currency Code Install Instructions

 Caution

Multi-Currency can only display currencies on your storefront and does not have the ability to convert currencies in Shopify's checkout by itself. If you have a grandfathered plan for Bold Cashier installed on your store, you can offer currency conversions on the checkout page.

Please visit Cashier & Multi-Currency Integration for more information on setting up this integration.

Overview

We offer a few different options to help you complete this installation on your store. This includes an automatic installer, requesting a professional installation from our team, or a step-by-step on completing this manually.

 Caution

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.

Are you ready to get started with our install?

 


 

Automatic Bold Multi Currency Installation

When you first install the Bold Multi Currency app to your store, it will immediately take you to a screen that mentions the importance of running an automatic installation on your store. This can be seen, here:

Multi-Currency Installation Page

If you are not seeing this option, please navigate to Question Mark Icon (at the top right corner of the Multi-Currency in-app admin) > Theme code update.

Selecting the Begin automatic update option will allow you to choose the theme on your store that you would like to complete the automatic code installation on for Multi-Currency.

 Pro-Tip

When selecting which theme to update, there will be a check box that says, "I have created a backup of this theme".

We recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without the Bold code installed.

Once the checkbox is selected to confirm you have a back up version of your theme, you will be able to proceed with the code installation.

 


 

Expert Install:

This option creates a ticket request with our installation team, and schedules your store for a manual installation completed by our experts. By selecting this option, you will be asked to confirm which theme you would like this code installation completed on.

All of these requests are completed manually on a rotational basis and will be completed as soon as possible.

 Alert

Please ensure that we have an active staff account for your site, prior to submitting your installation request. Visit Create a Shopify Staff Account for more information on how to create an account.

To request an expert install, please follow these steps:

  1. From within Bold Multi-Currency, hover over the Question Mark Icon (at the top right corner of the page), then select Theme code update.
  2. Under the automatic theme update information, select "expert theme update service".
  3. Review the terms, then select, "I have created a staff account for Bold".
  4. On the bottom left corner, select the theme you would like the code installation to be completed on.
  5. Select Submit Request.

 


 

Manual Install:

This step will direct you to the installation instructions for completing this change yourself. Please note that this is only suggested if you have a strong knowledge of Liquid coding.

Within the first steps, it is recommended to create a duplicate of your current theme without the Bold Commerce app code before continuing with this install. This will ensure that you can test all the information added when all the steps are completed before making this theme live on your store.

Our expert installers also recommend completing an automatic install first. The manual installation  steps below can then be followed to ensure that everything is added correctly and displaying properly on your store.

 

 

Bold Multi-Currency Code Install Instructions:

 Caution

If you would like to remove the liquid code from your theme, the liquid code can be removed by deleting the snippet files, asset files and the code includes mentioned in the instruction steps below. You can also request an uninstall request by contacting our Merchant Success team.

Note: If you are experiencing issues with performance on the storefront with Bold Multi-Currency after completing the steps below, we recommend requesting an expert installation, as your theme may require further liquid code changes.

Select each step below to view the instructions.

  1. From Shopify's admin, select Settings.

    select settings

  2. Select General.

    select general

  3. Under "Store currency", select Change formatting.

    Select Change Formatting

  4. 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 with currency code

  5. Replace the HTML without currency code with:

    Note: The currency symbol should match your store's currency.

    <span class=money>${{amount}}</span>

    replace the HTML without currency code

  6. Select Save.

     

  1. Duplicate themes, to create a backup copy.
  2. From Shopify's admin, select Online Store.

    select online store

  3. Select Actions.

    select actions

  4. Select Edit code.

    select edit code

  5. Under "Snippets", find bold-common.liquid.

    Find bold-common

    1. If it doesn't exist, select Add a new snippet.

      Select Add New Snippet

    2. Enter the correct snippet name.

      Enter Snippet Name

    3. Select Create snippet.

      Select Create Snippet

    4. Copy and paste the bold-common.liquid code.

      Paste bold-common code

    5. Select Save.

       

To add the liquid files to your current theme, please follow these steps:

  1. From Shopify's admin, select Online Store.

    select online store

  2. Select Actions.

    select actions

  3. Select Edit code.

    select edit code

  4. Under "Assets", find these files:
    • flags.min.css
    • bold-currency-picker.css
    • bold-currency-bootstrap.js
  5. For any that don't exist:
    1. Select Add a new asset.

      select add new asset

    2. Select Create a blank file.

      create blank file

    3. Enter the correct asset name in the "Create a blank file called" field.

      select asset name

    4. Select the correct extension (i.e. css or js).

      select correct extension

    5. Select Add asset.

      select add asset

    6. Copy and paste the code found in each of these links into their respective files:

      picture of code

    7. Select Save.

       

    8. Repeat Steps 5.1 - 5.7 for each missing snippet file.
  6. Under "Snippets", find these files:
    • bold-currency-converter.liquid
    • bold-currency-picker-mount.liquid
    • bold-currency-templates.liquid

    find these files

  7. For any that don't exist:
    1. select Add a new snippet.

      select add new snippet

    2. Enter the correct snippet name in the "Create a new snippet called" field.

      enter in the snippet name

    3. Select Create snippet.

      select create snippet

    4. Copy and paste the code found in each of these links into their respective files:

      picture of the code

    5. Select Save.

       

    6. Repeat Steps 7.1 - 7.5 for each missing snippet file.
  1. From Shopify's admin, select Online Store.

    select online store

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

  4. Under "Layout", select theme.liquid.

    Select theme.liquid

  5. Copy and paste this code directly above the </head> tag.
    {%- render 'bold-common' -%}

    Paste render bold common

  6. Copy and paste this code directly above the </body> tag.

    {%- render 'bold-currency-converter' -%}

    Paste render currency converter

  7. 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, the app will not automatically add one. openDirection: 'up' causes the picker to open upwards, this can be changed to down if you prefer.

    {%- render 'bold-currency-picker-mount', openDirection: 'up' -%}

    Paste render picker mount

  8. Select Save.

     

  1. From Shopify's admin, select Online Store.

    Select Online Store

  2. Select Actions.

    Select Actions

  3. Select Edit code.

    Select Edit Code

  4. Under "Templates", select cart.liquid.

    Note: This may be located under "Sections" in the cart-template.liquid file.

    Select cart.liquid

  5. Find a line of code similar to:
    {{ item.price | money }}
    On newer themes, it may be:
    {{ item.final_price | money }}

    Note: This code may be referenced differently depending on the theme you are using. In some themes, this code may not exist at all. If it is contained within your theme, the code will include a reference to "price".

    Find item.price money
  6. 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>

    Copy/Paste Bold Code

  7. Find a line of code similar to:
    {{ item.line_price | money }}
    On newer themes, it may be:
    {{ item.final_line_price | money }}
    Find item.line price money
  8. 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>

    Copy/Paste Bold Code

  9. Find a line of code similar to:
    {{ cart.total_price | money }}

    Find cart.total_price money

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

    Copy/Paste Bold Code

  11. Select Save.
Was this article helpful?
29 out of 39 found this helpful