Moving Debut's Currency Selector to the Header

Highlighted
Tourist
4 0 2

So it's amazing that Debut has a built in currency converter.

However, for reasons beyond me, It's on the very bottom of the page in a corner where no one will see.

 

How can I move this to the header where customers will actually locate and engage with it?

Any help is extremely appreciated, have a blessed day!

1 Like
Highlighted
Shopify Partner
347 25 51

Hi @mccallumc ,

 

I can't seem to find the currency converter for Debut theme, am I missing something? My test shop has a manual COD payment method in one currency.

 

Regards,

 

Sam

Custom Apps and Themes Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | New Monthly Support by Achieve Applabs www.achieveapplabs.com
0 Likes
Highlighted
Tourist
4 0 2
It shows up as an option in the footer section once you add multiple
currencies in your store's settings.
1 Like
Highlighted
Shopify Partner
347 25 51

Hi @mccallumc ,

 

After some testing we were able to move the currency selector to the header, but the dropdown no longer opens. Also the positioning is off. It is possible but not a simple easy task it would appear. You have to essentially move the code from footer.liquid into header.liquid and make it all work.

 

Regards,

 

Sam

Custom Apps and Themes Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | New Monthly Support by Achieve Applabs www.achieveapplabs.com
0 Likes
Highlighted
New Member
1 0 0

Hey! Can you tell us which code needs to be moved and to each part of the header section code ?

0 Likes
Highlighted
New Member
1 0 0

I was trying to solve this too but no luck! As a work around I created a nested currency menu that sits in my main menu. Each drop down links to a specific currency. See this for further info: https://help.shopify.com/en/manual/payments/shopify-payments/multi-currency/currency-selector#curren...

0 Likes
Highlighted
New Member
2 0 1

Hi Sam,

I tried moving the coding from the footer to the header, but nothing seemed to appear. Would you have any notes on which codes need to be moved?

 

Thanks!

0 Likes
Highlighted
Tourist
6 0 6

Oddly enough, the old Debut theme had a currency selector in the header, but the new one moved it to the footer. No idea why. You can put the old one back into the header if you like.

First, go to header.liquid and find this code:

          <a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
...
</a>

Just after that </a> paste this:

{% if shop.enabled_currencies.size > 1 %}
            {% form 'currency', class: "currency-selector small--hide" %}
              <label for="CurrencySelector" class="visually-hidden">{{ 'general.currency.dropdown_label' | t }}</label>
              <div class="currency-selector__input-wrapper select-group">
                <select name="currency" id="CurrencySelector" class="currency-selector__dropdown" aria-describedby="a11y-refresh-page-message" data-currency-selector>
                  {% for currency in shop.enabled_currencies %}
                    <option value="{{currency.iso_code}}"{% if currency == cart.currency %} selected="true"{% endif %}>{{currency.iso_code}}</option>
                  {% endfor %}
                </select>
                {% include 'icon-chevron-down' %}
              </div>
            {% endform %}
          {% endif %}

 

 

Then, open theme.scss.liquid and paste the following code at the bottom:

/*================ Currency selector ================*/
.currency-selector {
  @include media-query($small) {
    @include display-flexbox();
    @include align-items(center);
    background-color: transparentize($color-body-text, 0.90);
    padding: 12px 17px 12px 30px;
  }
}

.currency-selector__label {
  font-size: em(12);
  margin-bottom: 0;
  text-transform: uppercase;
  color: white;
}

.currency-selector__input-wrapper {
  margin-top: 4px;
  color: white;

  @include media-query($small) {
    margin-top: 0;
    width: 100%;
  }

  .icon {
    left: auto;
    height: 10px;
    margin: 0;
    width: 12px;

    @include media-query($medium-up) {
      height: calc(8em / 16);
      right: 5px;
      width: calc(8em / 16);
    }
  }
}

.currency-selector__dropdown {
  border: none;
  color: white;
  padding-left: 8px;
  padding-right: 17px;

  @include media-query($small) {
    font-size: em(12);
    font-weight: $font-weight-body--bold;
    width: 100%;
  }
}

 

 

Finally, open theme.js, first CTRL+F search for this:

theme.Header = (function()

And within the function, under 

body: 'body',

paste this:

multicurrencySelector: '[data-currency-selector]',

 

Then, search for this: 

// close dropdowns when on top level nav

A bit further down, you will see this:

$(window).resize(
      $.debounce(50, function() {
        styleDropdowns($(selectors.siteNavHasDropdown));
        positionFullWidthDropdowns();
      })
    );

 

Just after that, but before the final } closing bracket, paste this code:

$(selectors.multicurrencySelector).on('change', function() {
      $(this)
        .parents('form')
        .submit();
    });

 

That should do it! You could then get rid of the new selector from the footer if you want, or keep both, they work ok together although you will get an error about 2 elements having the same id.

 

 

 

3 Likes
Highlighted
Tourist
4 0 1

thanks for this, super helpful. It didn't seem to do anything for me. I feel like I followed all your steps to a 'T'.

https://bro-ball.myshopify.com/

0 Likes
Highlighted
Tourist
6 0 6

That's odd, have you got the currency selector enabled in the live customizer?

0 Likes