How can I set up language redirects based on browser settings?

[Pandora001]

I have my website in two languages: English and French.

I need Shopify to open the right URL .com or .com/fr depending on the browser language set by the potential customer. 

The geoloc innate Shopify app doesn't have this (and actually doesn't even work in multiple language countries).

I've been looking for a free plugin or feature from a free basic plan as I don't think anyone should pay 10$/month just for a redirect. I thought about adding javascript but I was told this would redirect only after loading, which would make the user experience horrible. 

This shouldn't be so hard, that's very basic. 

Has anyone found a way to do this? 

Many thanks!

[Pandora001 · Accepted solution]

So I found the solution on a different thread and this is exactly what I needed.

Anyone who needs the language to be chosen based on the browser, just add this code in your theme.liquid in the head section

change the "fr" part to suit your own /language

solution provided by Viljami

<script>
const YOUR_DOMAIN = window.location.origin
const YOUR_DOMAIN_LENGTH = YOUR_DOMAIN.length
const SUPPORTED_LANGUAGES = ["fr"]
const LANGUAGE_COOKIE_NAME = "language"
const BROWSER_LANGUAGE = navigator.language
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}

function setDefaultLanguage(){
let selectedLanguage = getCookie(LANGUAGE_COOKIE_NAME)
if (!selectedLanguage) {
console.log("No selected lang")
for (const lang of SUPPORTED_LANGUAGES){
console.log("Lang", lang)
if(BROWSER_LANGUAGE.includes(lang)){
document.cookie = `${LANGUAGE_COOKIE_NAME}=${lang};`;
if (!window.location.href.includes(`${YOUR_DOMAIN}/${lang}`)){
var url = window.location.href;
var redirect_url = url.slice(0, YOUR_DOMAIN_LENGTH) + `/${lang}` + url.slice(YOUR_DOMAIN_LENGTH);
console.log(url.slice(0, YOUR_DOMAIN_LENGTH))
window.location.href= redirect_url;
}
break;
}
}
}
}
setDefaultLanguage()
</script>

[Simon_M]

Hey there, 

Have you looked into Shopify Markets? (https://help.shopify.com/en/manual/markets/international-domains/setting-up-unique-urls/set-up-urls) You should be able to achieve this with a combination of Markets and the Translate & Adapt app?

[Pandora001]

Hi there,
you can only set up a language for a specific market, but that doesn't guarantee it will open in the correct URL. For example I am in Switzerland, and want the french par to open directly .ch/fr and the german speaking part to open directly .ch depending on their browser language

[richbrown_staff]

Hey @Pandora001 , buyers getting to the right language / market happens in two ways:

1) Hreflangs begin to index on search engines. If I'm in the UK and browse in English, and search your product, very soon it'll be defaulting to the correct experience.

2) You use the Geolocation app. If I land on the wrong country / language, a pop up takes me to the right one.

You mentioned that you weren't seeing this with the Geolocation app. Can you describe what's not working? If you're testing on your own computer the pop up won't show if you're viewing your store with the same settings as your primary market / language. Try using a VPN and changing your location to a country in one of your other markets, and / or set your browser language to another language, and see if shows. If it doesn't work please let us know.

[Pandora001]

Hi Rich, many thanks for the reply.

The geolocation app works partially, meaning it offers via a popup to switch languages. But popups make the UI terrible. Also the geolocation app is based on location and not on browser language, which in my opinion is not optimal. 

So what I'd like is that the person is redirected directly to the right URL/language, without asking them.

Currently people in the french speaking part of my country land on the English website and not the french one

[Pandora001 · Accepted solution]

So I found the solution on a different thread and this is exactly what I needed.

Anyone who needs the language to be chosen based on the browser, just add this code in your theme.liquid in the head section

change the "fr" part to suit your own /language

solution provided by Viljami

<script>
const YOUR_DOMAIN = window.location.origin
const YOUR_DOMAIN_LENGTH = YOUR_DOMAIN.length
const SUPPORTED_LANGUAGES = ["fr"]
const LANGUAGE_COOKIE_NAME = "language"
const BROWSER_LANGUAGE = navigator.language
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}

function setDefaultLanguage(){
let selectedLanguage = getCookie(LANGUAGE_COOKIE_NAME)
if (!selectedLanguage) {
console.log("No selected lang")
for (const lang of SUPPORTED_LANGUAGES){
console.log("Lang", lang)
if(BROWSER_LANGUAGE.includes(lang)){
document.cookie = `${LANGUAGE_COOKIE_NAME}=${lang};`;
if (!window.location.href.includes(`${YOUR_DOMAIN}/${lang}`)){
var url = window.location.href;
var redirect_url = url.slice(0, YOUR_DOMAIN_LENGTH) + `/${lang}` + url.slice(YOUR_DOMAIN_LENGTH);
console.log(url.slice(0, YOUR_DOMAIN_LENGTH))
window.location.href= redirect_url;
}
break;
}
}
}
}
setDefaultLanguage()
</script>

[richbrown_staff]

Hey @Pandora001 - apologies for not getting to this sooner.

First up be reassured that the top goal of the Shopify Markets team, of which the Geolocation app and Translate & Adapt are part, is to get buyers to the right country / language experience, as localized stores convert better. So as you say having the person land on the right experience or the person is redirected directly to the right URL/language, without asking them - is the goal.

This is how the Geolocation app works:

1) Language. This is derived from the user's browser - not location IP.

2) Country. This is taken from the location IP.

Hreflangs that Markets add are designed to get people to land on the right language / country combination without seeing any pop ups. For when they don't, users can be auto-redirected, see here: https://help.shopify.com/en/manual/markets/international-domains/directing-customers/domain-redirect... however this legally can't work in the EU. In that situation, the pop up will show. The design of the pop up has been extensively tested to help ensure it's getting the best acceptance rate.

You should not need to add that the code you found to your theme.liquid - this is already how the Geolocation app works, unless perhaps that is doing the auto-redirect within the EU (though I note you're in Switzerland). Here for any further questions!

[richbrown_staff · Accepted solution]

HI @Pandora001 , we're pleased to confirm we have now added the ability to redirect buyers based on their browser language. Turn it in on in Settings > Markets > Preferences.

[Yanik]

Hello! 

I'm in Quebec and I have a bilingual site After reading this thread, I've noticed that it loads the site in French even if my default browser is in English. I just went in and activated the redirect and just wanted to say THANK YOU! This is amazing. Greatly appreciated! Getting excited for my launch! Thanks again

Yanik 

[richbrown_staff]

That's great to hear @Yanik !

[Pandora001]

Awesome! glad to see shopify listens to requests! thank you