Solved

How can I translate custom liquid section code in Shopify?

MaoriD
Tourist
6 0 1

Hello,

 

I have a store in French. I want to translate my site into English. I have installed Shopify Translate & Adapt.
The app does not allow to translate with fields the sections in custom liquid.


Here is a picture of one of the code snippet in my index.json I want to translate. The text circled in red is what I want to translate :

Screenshot 2022-10-04 at 14.02.41.jpg

 

The app generates en.default.json and en.default.schema.json files, maybe there is a way to translate these sections into these json pages?

 

How can I do this?

 

Thank you very much !

Accepted Solution (1)
richbrown_staff
Shopify Staff
632 91 155

This is an accepted solution.

Hi there,

 

A few quick answers. The key thing is that unfortunately custom liquid code blocks cannot be translated as standard. There is a potential solution I mention at the bottom, but I'll start with easier fixes: It's to use something in its place that can be translated as standard. In your original post you mentioned some text saying "Votre guide spirituel et protecteur, maintenant près de vous." As I look on your homepage I see that title, with some supporting text underneath, a button, and a picture of a wolf, koala, and lion on the right. This is why I suggested 'Image with text' as you will be able to recreate this layout. If it is something different you are working on, and it's just text you need, then you could use 'Rich text'. I believe these two block types should cover any requirement you have.

 

If not, then making liquid translation aware is possible, but not simple. It involved adding a 'translation key'. More info here:

https://www.shopify.com/uk/partners/blog/translation-keys

https://shopify.dev/api/liquid/filters#translate 

 

Best wishes, Rich

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Replies 15 (15)

MaoriD
Tourist
6 0 1

Up! Is there no solution? It looks like the Weglot app allows it, but I wish I had done it in code to keep Shopify Translate. Thank you

richbrown_staff
Shopify Staff
632 91 155

Hi there, Rich from the product team. Custom Liquid sections can't currently be translated. I suggest replacing them with Custom HTML blocks if your theme is an Online Store 2.0 theme.

 

If this isn't possible for you and you want to keep using a translations API compliant app,  so that you can use Translate & Adapt for eveything else, alternative apps that have the ability to translate in the front end (as Weglot does) but also use the translations API include: Langify (custom content translation feature), Langshop (dynamic content feature), and Translate My Store by Hextom (visual editor). These can be run alongside Translate & Adapt no problem.

To learn more visit the Shopify Help Center or the Community Blog.

MaoriD
Tourist
6 0 1

Hello,

Thanks for your answer, the custom HTML section does not exist on Dawn (or I did not find it).
Isn't there a way to do a condition in the custom liquid if lang="fr" / lang="en" ? I don't know how to do it and I didn't find much about it.

 

Thank you

richbrown_staff
Shopify Staff
632 91 155

Hi there,

 

I believe 'Image with Text' will do the job you need:

 

richbrown_staff_0-1665511599563.png

 

I'd recommend trying this first before adding conditions to the liquid. If you did it this way, you'll then have a 'Localize' link in the corner of the section, which will take you off to the Translate & Adapt editor. Let me know how you get on. 

To learn more visit the Shopify Help Center or the Community Blog.

MaoriD
Tourist
6 0 1

Hello,

Thank you for your answer.
Unfortunately this section is not suitable because there is no image and it is mandatory to add one and we can not customize the text in html.
When I click on localize, I am directed to the translation of the page in question but the liquid fields do not appear

richbrown_staff
Shopify Staff
632 91 155

This is an accepted solution.

Hi there,

 

A few quick answers. The key thing is that unfortunately custom liquid code blocks cannot be translated as standard. There is a potential solution I mention at the bottom, but I'll start with easier fixes: It's to use something in its place that can be translated as standard. In your original post you mentioned some text saying "Votre guide spirituel et protecteur, maintenant près de vous." As I look on your homepage I see that title, with some supporting text underneath, a button, and a picture of a wolf, koala, and lion on the right. This is why I suggested 'Image with text' as you will be able to recreate this layout. If it is something different you are working on, and it's just text you need, then you could use 'Rich text'. I believe these two block types should cover any requirement you have.

 

If not, then making liquid translation aware is possible, but not simple. It involved adding a 'translation key'. More info here:

https://www.shopify.com/uk/partners/blog/translation-keys

https://shopify.dev/api/liquid/filters#translate 

 

Best wishes, Rich

To learn more visit the Shopify Help Center or the Community Blog.

richbrown_staff
Shopify Staff
632 91 155

Hi, checking in to see if this is now resolved? Rich

To learn more visit the Shopify Help Center or the Community Blog.

MaoriD
Tourist
6 0 1

Hello,

Yes, sorry. I was able to do it thanks to the API. Thanks a lot!

richbrown_staff
Shopify Staff
632 91 155

That's great, if you get a chance to share what you did that might help other merchants - but no pressure!

To learn more visit the Shopify Help Center or the Community Blog.

seri
Tourist
3 0 0

Could you please share how you did it? Thank you!

MaoriD
Tourist
6 0 1

Hello,

I followed this tutorial:
https://www.shopify.com/uk/partners/blog/translation-keys

But in the end we switched to Weglot because there are some features that were missing (translation of apps in particular).

onlineorganics
Excursionist
18 2 4

Here is what I do for a custom liquid translation with a default English store. It might not be perfect but it works for me:


{% if request.locale.iso_code == 'fr' %}
french content
{% else %}
english content
{% endif %}

irene-apparel
Tourist
11 1 2

Can you please point where I can translate custom HTML blocks? Because I don't see it anywhere in Shopify's standard translation app. I translated all the fields except custom HTML. It just doesn't show up anywhere.

richbrown_staff
Shopify Staff
632 91 155

HI @irene-apparel , could you please DM me with a link to an example of a custom HTML block you can't translate? I'll look into it for you, thanks.

To learn more visit the Shopify Help Center or the Community Blog.

davide_msh
Visitor
1 0 0

Hi, could you help me to understand how traslate .liquid file inside my shop ?

I understand that I've to use 

{{ '1st-level.2nd-level.3rd-level' | t }}
but I'm not able to understand how create the json file to put the translation
thanks