Re: Moving Debut's Currency Selector to the Header

Moving Debut's Currency Selector to the Header

mccallumc
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!

Replies 40 (40)

Not applicable

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
Tourist
4 0 2
It shows up as an option in the footer section once you add multiple
currencies in your store's settings.
Not applicable

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
Visitor
1 0 0

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

stellathai
Visitor
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!

Truevits
Tourist
6 0 25

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

Truevits
Tourist
6 0 25

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

nzricky
Tourist
4 0 1

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

Truevits
Tourist
6 0 25

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.

currency.jpg

 

 

 

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
Tourist
4 0 1

Thank you so much! amazing!!!!

jpjepe
Visitor
1 0 1

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
Tourist
6 0 25

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

Truevits
Tourist
6 0 25

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
Visitor
1 0 0

hi @Truevits 

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

thanks

i need to remove language from footeri need to remove language from footer

 

add language to headeradd language to header

Najjar1994
Visitor
3 0 0

are there any chances?

NoBL
Tourist
7 0 0

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

SevenCash
Shopify Partner
4 0 0

@Truevits 

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

My show like this Currency_at_top.jpg

 

theusefulshop_c
Shopify Partner
1 0 1

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

sun4
Tourist
3 0 1

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
Visitor
1 0 1
bennyG78
Visitor
1 0 1

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
Visitor
1 0 1

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
Visitor
1 0 0

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

Pavvel
Tourist
5 0 1

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
Visitor
1 0 0
// 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
Tourist
6 0 1

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
Excursionist
36 0 13

@

Currency selector.PNG

oillustration
Visitor
2 0 0

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
Tourist
6 0 5

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

Sancho
Visitor
1 0 0

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
Visitor
1 0 0

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
Tourist
6 0 1

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

JulieWipeout
Excursionist
11 1 2

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
New Member
4 0 0

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

Kittaru87
Visitor
1 0 0

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
Tourist
6 0 1

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

LUISMO
Visitor
3 0 0

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
Visitor
3 0 0

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