Add a currency selector to your store

Note: This setup will only work on the Debut theme.

Add CSS styles

1. Under the Assets folder, click on the theme.css 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.

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.

Note: This setup will only work on the Dawn theme.

Add CSS styles

1. Under the Assets folder, click on the  base.css file.

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

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

#coin-container select {
  width: auto;
  margin: 0;
  border: 0;
  color: rgba(var(--color-foreground),.75) !important;
  padding-right: 18px !important;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgdmlld0JveD0iLTE3LjUgLTEuMyA1MC4xIDI3LjkiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5bGluZSBwb2ludHM9IiAxNi4xIDguNSA3LjYgMTcgLTAuOSA4LjUgIiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MjtzdHJva2U6IzEyMTIxMkJGIi8+PC9zdmc+');
  background-repeat: no-repeat;
  background-position: right;
  background-size: 21px 21px;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

#coin-container select::-ms-expand {
  display: none;
}

#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-coin #coin-container {
    display: none;
  }


  #coin-container {
    margin-top: 10px;
    margin-right: 5px;
  }
}

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

  #coin-container select {
    padding: 1.1rem 2rem 1.1rem 3.2rem !important;
    font-size: 1.8rem;
    background-size: 24px 24px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgdmlld0JveD0iLTE3LjUgLTEuMyA1MC4xIDI3LjkiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5bGluZSBwb2ludHM9IiAxNi4xIDguNSA3LjYgMTcgLTAuOSA4LjUgIiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MjtzdHJva2U6IzAwMCIvPjwvc3ZnPg==');
  }
}

3. Save changes.

Add currency selector to theme

1. In the theme code, click on the header.liquid file under the Sections folder.

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

<div class="header__icons">

3. Copy the snippet of code.

<span class="desktop-coin">
  <div id="coin-container"></div>
</span>

4. Insert the currency selector snippet right after the line of code you found on Step 2. This will place the currency selector to the left of the search icon.

5. Save your changes.

6. Next, in the same file ( header.liquid), use the following snippet to search for where the mobile navigation starts.

<ul class="menu-drawer__menu list-menu" role="list">

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.

<span class="mobile-coin">
   <div id="coin-container"></div>
</span>

9. Save changes.