Customize the Currency Picker

Multi-Currency allows you to customize the colours and display of its picker on the storefront. You can manually specify the location of the picker on your storefront or adjust its look and feel with CSS.

 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.

 


 

  1. From the Shopify Admin, select Online Store.
  2. Select Actions.

    Select Actions

  3. Select Edit code.

    Select Edit Code

  4. Under Sections, select header.liquid.

    Note: This code can also be placed in the footer.liquid file. The file placement will vary depending on where you want it to display on the storefront and how your theme is built.

    Select header.liquid

  5. Locate where in the code you want the currency to display on the storefront. Generally, the IDs or classes of these code blocks will include words like:
    • nav
    • site
    • header
    • list
    • link

    Note: This will require you to use your browser's Developer Tools on the site to discover where you want this placed. Visit Inspect and Edit Pages and Styles for more information on how to find this in Google Chrome.

    Find Code Placement

  6. Copy and paste the following code into this spot:
    {%- include 'bold-currency-picker-mount', openDirection: 'down' -%}

    Note: The 'down' portion of the code can be changed to 'up'. This will open the currency picker's menu on top instead of underneath.

    Paste Code

  7. Select Save.

    Select Save

Overview

Below are some examples of where you can place our code on the most common themes.

Note: These themes are frequently updated by their developers and may contain code that is not in our screenshots. These examples should only be used as a reference.

 


 

Brooklyn

Brooklyn Code Example

On the storefront:

Brooklyn Storefront Example

 


 

Debut

Debut Code Example

On the storefront:

Debut Storefront Example

 


 

Venture

Venture Code Example

On the storefront:

Venture Storefront Example

 Pro-Tip

Making adjustments to the currency picker requires knowledge of CSS. If you are not comfortable with completing this on your theme, one of our partners could complete this for you as a paid customization on your store. Please request this through HeyCarson via this form.

  1. From the Shopify Admin, select Online Store.
  2. Select Actions.

    Select Actions

  3. Select Edit code.

    Select Edit Code

  4. Under Assets, select bold-currency-picker.css.

    Select bold-currency-picker.css

  5. Find the following line of code and adjust the styling accordingly:
    .BOLD-mc-picker > .currentCurrency

    Note: This will change the styling of the main currency selector.

    Edit .currentcurrency

  6. Find the following line of code and adjust the styling accordingly:
    .BOLD-mc-picker > .currencyList

    Note: This will change the styling of your list of selectable currencies.

    Edit .currencylist

  7. Select Save.

Overview

Below are several common class selectors and customizations for the currency picker, along with examples of our code and how it displays on your storefront.

 


 

Common Class Selectors

  • .BOLD-mc-picker-mnt - This is the main class selector. Changes made to this class will affect multiple areas of the currency picker's display.
  • .BOLD-mc-picker > .currentCurrency - Adjustments made to this class will affect how the currency picker shows for the customer's currently selected currency.
  • .BOLD-mc-picker > .currentCurrency > .chevron > svg - This will affect how the chevron icon (on the right side of the currency picker) displays on your storefront.
  • .BOLD-mc-picker > .currencyList - Changes made to this class will affect how your list of enabled currencies will display.
  • .BOLD-mc-picker > .currencyList > .option - This class selector will affect the display of each currency in your list of currencies.

 


 

Customization - No Border / Background Code:

Note: This code comments out the border and drop-shadow that normally surrounds the currency picker.

.BOLD-mc-picker > .currentCurrency {
position: relative;
display: inline-block;
height: 32px;
line-height: 32px;
width: 80px;
/* border: 1px solid #e5e5e5; */
/* background: white; */
/* -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15); */
/* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15); */
padding: 0 0 0 27px;
cursor: pointer;
text-align: left;
white-space: nowrap;
}

On the storefront:

No Border Storefront Example

 


 

Customization - Styling on Different Pages Code:

Note: This code will just show a different text colour for your customer's selected currency.

.template-product .BOLD-mc-picker > .currentCurrency {
color: white;
}
.template-collection .BOLD-mc-picker > .currentCurrency {
color: black;
}

 


 

Customization - Styling the Chevron Code:

Note: This code will change the colour of the chevron and add a larger border around it.

.BOLD-mc-picker > .currentCurrency > .chevron > .svg {
fill: #0089ef;
stroke: black;
}

On the storefront:

Chevron Style Example

Was this article helpful?
6 out of 6 found this helpful