How can I use liquid code to modify language URLs?

Technical Q&A
1

Hey,

I am trying to use control flow liquid code to determine the language code part of the url (e.g. en) to modify the content of the page. I know I could use the language file to store my translations there but it would be much more convenient to change the content of the template itself.

I am using Langify to translate the store.

I would really appreciate your help!

2 Likes
2

Interesting!
Can you share sample Url with me? So I can know where language code is appearing.
You can split your url, I need to see if you are following any particular pattern,

Also you can separate url with jquery as well.

3

The language code is appearing directly following the .com.

https://www.marmeladecat.com/en/collections/all this site is not online yet because we are not done yet with the translation because of this issue.

4

Alright,
I believe this is the best solution to get it language code out of url

var pathname = window.location.pathname;
var langCode= pathname.split("/");
//langCode[1] - this will have your langauge code

You can use langCode[1] to code your structure.

Let me know if that helps, I am using javascript code to split it.

5

Thank you very much! Your code does the job well. :slight_smile:

6

Hey, I got one pure liquid syntax solution as well :
{{ request.path | slice: 1,2}}

Please have a look on this one too :wink:

1 Like
7

This one is even better, thank you!

8

note that the accepted solution is not correct and would only work on homepage.

{{ shop.locale }}

is what you need.

2 Likes
9

Hi @Liquify ,

I am very interested in your solution.

I put an IF condition depending on the language.

When my website is in its main language (French), the condition works well.

But, when my website is in English, the condition doesn’t work anymore.

Here is the code I am using to test:

{% if shop.locale == ‘fr’ %} FR {% endif %} → Works well
{% if shop.locale == ‘en’ %} EN {% endif %} → Don’t work

Do you have any idea ?

Btw, I am using Weglot to translate my website.

Thanks for your help :slightly_smiling_face:

10

Weglot translates your content with javascript in the browser instead of being done server side - it’s old skool.

Basically it works as a translation app but is awful (as in really, really, really awful) for SEO. It stinks and you should avoid if you care about SEO.

What you are seeing here is the problem with weglot (and all the old apps).

If you use a more modern app then the shop.locale object will work. If you use Wegoglot then you’ll need to use javascript to detect language.

11

Thanks for your answer.

I managed to do what I wanted with a html[lang=‘en’] .hide-en:display:none CSS solution.

Do you recommend another translation app which is modern and cares about SEO ?

Or, is it better to translate the website using the native Shopify solution (using Settings/Language) ?

Thanks a lot,

12

Hello,

I am actually having the exact same problem. I would like to show different content based on the language. However, I am facing the same issue when {shop.locale} is used.

How did you solve your problem?

Kind regards,

Ayse

13

Hello,

As in my last comment, I just used a CSS class that show/hide components depending on the language.

14

Hello,

Thank you for your answer. However, how did you determine the language of the website since {shop.locale} does not work?

Where did you write html[lang=‘en’] .hide-en:display:none ?

15

You could use

{{request.locale.name}}

The request object (shopify.dev)

1 Like
16

Hi @Mehrwest ,

you can use request.locale.iso_code like

{% if request.locale.iso_code == 'es' %}
//CODE FOR SPANISH FORM
{% else %}
//CODE FOR ENGLISH FORM
{% endif %}