Customize the Currency Picker

Follow

Overview

Multi-Currency allows you to customize the colors and display of its picker on the storefront. You can even manually specify the location of the picker on your storefront.

Please select one of the following options to see more information:

To change the placement of the currency picker, 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 "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 common themes we encounter for customizations; along with the most requested currency picker placements.

The theme name will be listed, along with a sample screenshot of where our code should be placed in the theme files. We will also showcase where the picker will display on the storefront.

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

Brooklyn

Theme Coding Example:

Brooklyn Code Example

Storefront Example:

Brooklyn Storefront Example

Debut

Theme Coding Example:

Debut Code Example

Storefront Example:

Debut Storefront Example

Venture

Theme Coding Example:

Venture Code Example

Storefront Example:

Venture Storefront Example

To change the styling of the currency picker, 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", 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.

    Note: Visit W3 Schools - CSS for more information on how to use CSS styling.

    Select Save

Overview

Below are some common class selectors for the currency picker; along with coding examples and how they display on the site.

The most used class selectors will be provided in a list. Each of the coding examples will be indicated as to what they accomplish, along with a sample of the code. We will also showcase how the picker will display on the storefront.

Common Class Selectors

These are the most commonly used class selectors when customizing the currency picker's display:

  • .BOLD-mc-picker-mnt - This is the picker's main class selector. Changes made to this class will generally affect multiple areas of the picker's display.
  • .BOLD-mc-picker > .currentCurrency - Adjustments made to this class will affect how the picker shows for the customer's currently selected currency.
  • .BOLD-mc-picker > .currentCurrency > .chevron > svg - This will affect how the chevron icon (generally 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 of the currency options in your list of currencies.

Customizations

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;
}

No Border/Background Storefront Example:

No Border Storefront Example

Styling on Different Pages Code:

Note: This code will just show a different text color on the customer's selected currency between the product and collection pages.

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

Styling the Chevron Code:

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

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

Styling the Chevron Example:

Chevron Style Example

Next Steps:

Blog Posts:

3 out of 3 found this helpful

Comments

0 comments

Please sign in to leave a comment.