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.
- From the Shopify Admin, select Online Store.
- Select Actions.
- Select Edit code.
- 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.
- 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.
- 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.
- Select Save.
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
On the storefront:
Debut
On the storefront:
Venture
On the storefront:
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.
- From the Shopify Admin, select Online Store.
- Select Actions.
- Select Edit code.
- Under Assets, select bold-currency-picker.css.
- Find the following line of code and adjust the styling accordingly:
.BOLD-mc-picker > .currentCurrencyNote: This will change the styling of the main currency selector.
- Find the following line of code and adjust the styling accordingly:
.BOLD-mc-picker > .currencyListNote: This will change the styling of your list of selectable currencies.
- Select Save.
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:
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:
