Customize the Multi-Currency Picker

Follow

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.

    Note: This will require you to use your browser's Developer Tools (links to Google) on the site to discover where you want this placed. Generally, if you're placing this in the header.liquid, it will go in the "nav" portion of this file. Visit Inspect and Edit Pages and Styles (links to Google) 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

That's it!

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

That's it!

Next Steps:

Blog Posts:

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.