Moving Debut's Currency Selector to the Header

[mccallumc]

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!

[Anonymous]

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

[mccallumc]

It shows up as an option in the footer section once you add multiple
currencies in your store's settings.

[Anonymous]

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

[Criismartiins96]

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

[stellathai]

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!

[Truevits]

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.

[nzricky]

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/

[Truevits]

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

[nzricky]

yes, but it only shows the option in the footer, so I have it selected there... but nothing else 😞

[Truevits]

It's actually there on your site, but it's white. My header is black I forgot I changed that, I'll edit the CSS code.

Edit: looks like I can't edit the original post anymore, so I'll put the CSS here:

/*================ 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;
}

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

  @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: $color-text;
  padding-left: 8px;
  padding-right: 17px;

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

Just replace the code in theme.scss.liquid you put in earlier with this one.

[nzricky]

Thank you so much! amazing!!!!

[jpjepe]

Super helpful, thank you! One question though, it appears it might only be showing on desktop view. How can I get it to appear in mobile view as well? Cheers for the help mate!

[Truevits]

It should work on mobile as well. If you check our site truevits.uk it's at the bottom of the hamburger menu.

[Truevits]

Looks like I missed a bit of code for the mobile selector. Inside header.liquid, scroll down to the </header> tag, then just above the </ul>, after the {%endfor%}, paste this:

<!-- mobile currency selector -->	
        {% if shop.enabled_currencies.size > 1 %}
          <li class="mobile-nav__item border-top">
            {% form 'currency', class: "currency-selector" %}
              <label for="CurrencySelectorMobile" class="currency-selector__label">{{ 'general.currency.dropdown_label' | t }}</label>
              <div class="currency-selector__input-wrapper select-group">
                <select name="currency" id="CurrencySelectorMobile" 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 %}
          </li>
        {% endif %}
<!-- end mobile currency selector -->   

[al0mran]

hi @Truevits 

Please can you help  i need to move language selector from footer to header please 

thanks

i need to remove language from footer

add language to header

[Najjar1994]

are there any chances?

[NoBL]

Thanks for that you are a life saver! 

One last thing, how can we move the currency selector, so that it is in this order,

currency selector, search icon, log in, cart.

[SevenCash]

@Truevits 

Do you edit some JS code to show as a list? Can you share?

My show like this 

[theusefulshop_c]

Awesome, thanks for that, was a head(er) scratcher for sure!

[sun4]

Hi @Truevits , 

I tried you code step-by-step but i can't find my "// close dropdowns when on top level nav" in my debut theme. Do you know why? 

[anna-may]

https://shopify.dev/tutorials/customize-theme-support-multiple-currencies#example-currency-selectors amazingly easy step by step and it worked for me

[bennyG78]

Thanks for the code!  Worked fine for me, BUT was invisible.

Needed to change all of the "white" in the theme css to  $color-text, then showed up perfect!

Thanks

[jezara]

I was able to get the currency selector into my header following the instructions in this comment and the following edits! However, when you use the currency selector it doesn't actually change the currencies.

The instructions say to do this as the last step: 

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

Weirdly, I couldn't find $(window).resize( $.debounce(50, function() { styleDropdowns($(selectors.siteNavHasDropdown)); positionFullWidthDropdowns(); }) ); anywhere!

Not sure if it's because of an update. Anyhow does anyone know how to fix this issue/ where I can paste this last bit of code in! I have no experience altering code or anything like that, but this seemed like a straight forward solution and a free one! Thanks in advance! 

[caiandjo]

Hi, did you ever get this to work? Mine is there but not working and I can't figure out why.

[Pavvel]

Hi, I am also stuck on this step and can't find: 

// close dropdowns when on top level nav

Can someone please share the solution to this problem? 

[bshan05]

// close dropdowns when on top level nav

$(window.resize

I have placed the currency selector in header with your help in Debut theme. But I couldn't find the above lines  in theme.js , whether the recent version has updated anything like avoiding jquery or ... I dont know why i couldn't make currency converter submit be changes made in selector . Please help me with this.

[wisdomesellers]

Hi All, after spending a few hours on this I found a solution that worked for me. 

I would first like to say I have ZERO coding experience so whatever I share here I just copy from what I learn on the internet.

So now lets begin. 

I found all the info i needed on this page: https://shopify.dev/tutorials/customize-theme-support-multiple-currencies

1. GO TO THE header.liquid FILE. 

LOOK FOR THIS CODE ( You can press "CRTL and F" or "command and F" on the keyboard to bring up the search function and search for "cart". This makes it easy to find.)

 <a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
            {% include 'icon-cart' %}
            <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
            <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %} critical-hidden" data-cart-count-bubble>
              <span data-cart-count>{{ cart.item_count }}</span>
              <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
            </div>
          </a>

AND ABOVE THAT PASTE THIS CODE:

  {% form 'currency' %}
    {{ form | currency_selector }}
  {% endform %}

2. GO TO THE theme.js FILE and ADD THIS CODE TO THE BOTTOM:

  function currencyFormSubmit(event) {
    event.target.form.submit();
  }

  document.querySelectorAll('.shopify-currency-form select').forEach(function() {
    this.addEventListener('change', currencyFormSubmit);
  });

3. ALL DONE! I HOPE IT WORKS FOR YOU! 🙂

According the article in the link above you can move the position of the currency dropbox around in the header but I have no idea how to do that. Check out the link for more info and pictures.

[mmmaggieli]

@wisdomesellers solution worked for me however I need some assistance with the placement of the currency selector.

Can anyone help?

Thank you!

[oillustration]

Hi, I was wondering if anyone had some code to help move the placement of the selector once it's on top?  I saw someone asking about this earlier but no answers.  Want to be able to move it after the cart symbol.  Thanks

[lanterncozies]

This worked perfectly.... Also I'm moving from debut to craft theme..... it works there as well

[Sancho]

i am triyng to apply these changes to my Modular theme but i have a problem: seems that theme.scsss.liquid and theme.js  files are not present... do i have to create it ? in wich section ?

[giovannawpb]

hi there, thanks for the codes, they seem to work in my website. However, the selector's typography color is in white and I wanted it to be in other color and how can I remove the selector on the footer?

[SmugglingDuds]

Like I think a lot of people in this thread now we can do the last step to complete this.

There is no code - 

// close dropdowns when on top level nav 

in the theme.js file to paste the last bit of code under to finish it off

any updates please?

Thanks, Ben

[KCR]

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...

[JulieWipeout]

Hi there, I'm using DEBUT which has a currency selector - however I'd also like to put the selector in the Theme Header next to the language selection. I did these steps to "Add a currency selector to your store's navigation menu" https://help.shopify.com/en/manual/payments/shopify-payments/multi-currency/currency-selector#curren...

But now I don't know how to ADD the currency selector to the Theme Header. I'd like to keep the selector I set up, rather than revert to DEBUT's own, because I've selected that if EURO is selected then it will auto-redivert to my other website specially for sales in Europe.

Can anyone help how to add this new currency selector into my Theme Header please? 

[Whywhy]

Been wondering the same thing and cant seem to figure out how to move it to the top. 

[Kittaru87]

Place that bit of code after:

cache.$subMenuLinks.on('click.siteNav', function(evt) {
      // Prevent click on body from firing instead of link
      evt.stopImmediatePropagation();
   });

 and before the final }

It should look like this:

// close dropdowns when on top level nav
    cache.$topLevel.on('focus.siteNav', function() {
      if (cache.$activeDropdown.length) {
        hideDropdown(cache.$activeDropdown);
      }
    });

    cache.$subMenuLinks.on('click.siteNav', function(evt) {
      // Prevent click on body from firing instead of link
      evt.stopImmediatePropagation();
    });
    
    $(selectors.multicurrencySelector).on('change', function() {
      $(this)
        .parents('form')
        .submit();
    });
  }

[SmugglingDuds]

Here is a good tutorial that worked for me - https://ecomexperts.io/blogs/liquid-tutorial-shopify/currency-selector

[LUISMO]

This was really helpful, thank you for sharing link.

Finally solved my problem with debut theme. Now my currency selector is at the header 

[LUISMO]

This was really helpful, thank you for sharing link."SmugglingDuds" has link at bottom.

Finally solved my problem with debut theme. Now my currency selector is at the header