Countries and language selection in header

[le_X_Atelier]

Hello,
is it possible to add a country and language selection in the header to the right of the shopping cart? That next to the shopping cart is an icon that signals that you can change the language there?
I have this at the bottom of the footer but I would like to have it directly at the top of the header so that customers notice it and can change it quickly.

So if german is set there is the german flag and for example with french the french flag.

Thanks for help!

www.le-x-atelier.com

PW: djerba

[le_X_Atelier]

i understand but in my theme i got the dawn theme there is no option like this.

[BSS-Commerce]

Hi @le_X_Atelier

Please follow these steps:

• Go to Online store => Edit code

1. Then, search global.js and add the following code at the end of the file:

const languageEl = document.querySelector('.footer__column.footer__localization.isolate');
const headerEl = document.querySelector('.header');

if(headerEl && headerEl){
  const localizationEl = document.createElement('div');

  localizationEl.classList.add('localization__wrapper')
  while (languageEl.firstChild) {
    localizationEl.appendChild(languageEl.firstChild);
  }
  headerEl.appendChild(localizationEl);
}

2. Search base.css and add the following code at the end of the file:

.header:has(.localization__wrapper){
  grid-template-areas: 'heading navigation icons localization';
}

• Here is the result of my drawn theme:

I hope that it also works for you.

[PageFly-Kate]

Hi @le_X_Atelier

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1. Go to Online Store-> Theme-> Edit code
Step 2. Sections → footer.liquid theme file and cut the code as shown in screenshot from to

Step 3. Open header.liquid and paste code under header_icons div as showing in the below screenshot.

Step 4. Save both files and check

Hope my answer will help you.

[le_X_Atelier]

Okay thank you i will test this later, is there a possibility that the selection looks a little bit different so maybe also in this icon style?

So that there stands EN in the icon style and when you click on it there is a roll out where you can choose other languages?

I hope the picture shows that a little bit better

[le_X_Atelier]

Okay and can i change the style of the selection icon or button that it looks like that:

[PageFly-Kate]

I’m sorry but this is out of my scope. You may try contacting Shopify support or finding another expert regarding this issue.

[le_X_Atelier]

is it possible to change the position to the left side of the header than it would be perfect?

[infoatcodelab7]

@le_X_Atelier

Step 1: Go to the Online store

Step 2 Find base.css

Step 3: paste below code at the bottom of file

.footer__column.footer__localization.isolate {
  position: absolute;
  top: 6%;
  left: 83%;
  width: 100%;
}
#FooterCountryLabel {
  display: none;
}
#FooterLanguageLabel {
  display: none;
  margin-top: 30px;
}
.header__icons {
  justify-self: unset;
}
.header .header__search {
  justify-self: unset !important;
  margin-left: -47px;
}

[iqbal1987]

hi

does it work by any theme?

my store built by minimog theme

[iqbal1987]

does work in phone view?