Installation Guide for Multi-Currency

  1. Bold Commerce Help Center
  2. Multi-Currency - Shopify
  3. Getting Started
Avatar
Alexa
Published: 
Last Updated: 
Follow

We offer a few different options to help you complete this installation on your store:

  1. An automatic installer
  2. The ability to request a professional installation from our team
  3. A step-by-step guide on completing this manually

Before you start, it is important to note that any other currency conversion apps or software should be disabled before using Multi-Currency. Using two conversion apps at the same time can cause conflicts with how the currency displays on the site.

 Caution

As of February 19th, 2021, Bold Multi-Currency is no longer available to install on the Shopify App Store. If your store has installed our Bold Multi-Currency app prior to February 19, 2021 - you will be able to continue using this app as it is grandfathered on your store.

 

 

Automatic Install

When you first install the Bold Multi Currency app to your store, it will immediately take you to a screen that notifies you of the importance of running an automatic installation on your store.

Multi-Currency Installation Page

If you are not seeing this option, hover over the Question Mark in the top right corner of the Multi-Currency app admin, then select Theme code update.

Theme Code Update Selection

Selecting Begin automatic update will allow you to choose your preferred theme 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 our code installation.

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

Once Multi Currency's code is installed onto your store, your next step is to adjust the display of your picker. Please visit Customize the Currency Picker for more information.

 

 

Manual Install

This step will instruct you on how to complete the Liquid code installation yourself. This method of installation is only suggested if you have a strong knowledge of Liquid coding.

Before you start the installation, it is highly recommended creating a duplicate of your preferred theme. This allows you to test your installation before making the theme live on your store.

Note: Our installations team recommends completing an automatic installation first. The manual installation steps below can then be followed to ensure that everything is added correctly and displaying properly on your store.

 

 

Step 1: Edit Shopify Currency Settings

  1. From the Shopify admin, select Settings.
  2. Under Store currency, select Change formatting.

    Change Formatting

  3. Replace the HTML with currency code with:

    Note:

    The currency symbol and abbreviation must match your store's default currency.

    IE. If you're using Japanese Yen as your default currency, you would then use: {{amount_no_decimals}}

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

    HTML with currency

  4. Replace the HTML without currency code with:

    Note: The currency symbol must match your store's default currency.

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

    HTML without currency

  5. Select Save.

 

 

Step 2: Add the bold-common Snippet File

  1. Duplicate themes to create a backup copy.
  2. From the Shopify 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.

       

 

 

Step 3: Verify Assets and Snippets

  1. From the Shopify 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. (IE. .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.

 

 

Step 4: Edit theme.liquid

  1. From the Shopify 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 (IE. header, footer). 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.

     

 

 

Step 5: Edit cart.liquid

  1. From the Shopify 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, this may be: 
    {{ item.final_price | money }}

    Note: This code may display differently depending on the theme you are using. In some themes, this code may not exist at all. If this code is within your theme, it 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.

Request a Multi-Currency Install

This option creates a ticket request with our installation team, which is then scheduled to be 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. You will receive an email notification upon completion.

 Alert

In order for our team to complete a Liquid code install or help troubleshoot certain issues, we will require access to your Shopify Admin.

To maintain the security of your Shopify account, we are now requesting that you do not proactively send us a Staff Account invite for access to your shop. Instead, our team will request Collaborator access to your shop.

If you would like to install an app that requires you select a checkbox to confirm you have created a Staff Account before submitting your request, you can select this option without creating the staff account. Our team will respond with a Collaborator request.

  1. From within Bold Multi-Currency, hover over the Question Mark in the top right corner of the page, then select Theme code update.
    Theme_Code_Update_Selection.png
  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. Select the theme you would like the code installation to be completed on.
  5. Select Submit Request.

 

 

Code Removal

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 mentioned in the instruction steps above.

You can otherwise request a code removal by contacting our Customer Success team.

 

Note: If you are experiencing storefront performance issues after completing Multi Currency's code installation, we recommend requesting an expert installation as your theme may require further liquid code changes. Please see previous step Request a Multi-Currency Install for more information.

Was this article helpful?
31 out of 41 found this helpful