Add a currency selector to your store

Follow the steps below to add a currency selector for your store.

A basic understanding of HTML and CSS code may be required to format the currency selector to your liking. If you can't seem to figure it out, we offer an Expert Install Service where we take care of the installation for you. Check out this article for more information.

1. From your Shopify admin, click Online Store, then click Themes.

2. Find the theme you want to edit, click the Actions button, then click Edit code.

3. On the left side, under the Layout folder, click on the theme.liquid file.

4. Copy the following code snippet.

<div id="coin-container"></div>

5. Locate your theme's header, and paste the code where you think it fits best. Since every theme is different, you may have to experiment to find the right place.

6. Optional: Update currency selector formatting

Follow this example using the Debut theme

This setup will only work on the Debut theme.

Add currency selector

1. Under the Sections folder, click on the header.liquid file.

2. Using the keyboard shortcuts (ctrl F or ⌘ F), search for the cart icon by looking up the following line of text.

site-header__cart

3. Once you have found the line of text, click on it. This will highlight the ending line that pairs with the line of text.

4. Copy the following code snippet.

<div id="coin-container"></div>

5. Insert the currency selector snippet after the block of code. This will place the currency selector to the right of the cart icon.

6. Search for the following line of code.

<ul id="MobileNav" class="mobile-nav">

7. Once you have found the line of code, click on it. This will highlight the ending line that pairs with the line of code.

You may need to scroll down quite a bit to see the ending line.

8. Insert the currency selector snippet above that line. This will place the currency selector in the mobile navigation menu.

9. Save changes.

Add CSS styles

1. Under the Assets folder, click on the theme.scss.liquid file.

2. Apply the following CSS to the bottom of the CSS file.

/* Coin by ShopPad */
#coin-container {
  display: inline-block;
}

#coin-container select {
  width: auto;
  margin: 0;
  border: 0;
  background-color: transparent;
  padding-right: 28px !important;
  color: #3a3a3a;
}

#coin-container select option {
  color: #000 !important;
}

#coin-container select:focus,
#coin-container select:hover {
  outline:0 !important;
  border: 0 !important;
  -webkit-box-shadow: none;
  box-shadow: none;
}

@media only screen and (min-width: 750px) {
  .mobile-nav #coin-container {
    display: none;
  }

  #coin-container {
    vertical-align: middle;
    margin-top: 5px;
    margin-left: -10px;
  }
}

@media only screen and (max-width: 749px) {
  .site-header__icons-wrapper #coin-container {
    display: none;
  }

  #coin-container {
    width: 100%;
    border-top: 1px solid #e8e9eb;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 15px;
  }
}

3. Save changes.

If you need help getting the currency selector set up for your store, simply request the Expert Install Service from your Coin dashboard and our team can help out.

Interested in only having the automatic currency conversion? You can set that up by following these instructions: Automatic currency conversion.

Still need help? Contact Us Contact Us