How can I translate custom liquid section code in Shopify?

[MaoriD]

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 :

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 !

[MaoriD]

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]

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.

[MaoriD]

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]

Hi there,

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

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. 

[MaoriD]

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

[richbrown_staff]

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

[MaoriD]

Hello,

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

[richbrown_staff]

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

[seri]

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

[MaoriD]

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]

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]

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]

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.

[davide_msh]

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

[inspirador]

Another quick fix solution that works in smaller Custom HTML fields is that you ask ChatGPT to write you your HTML based on the url.
Keep all default as EN, then create a text when the url is followed by /fr /es /pt /nl, etc. Then add all the code in the default (and only) HTML field.

This works very well and avoided me paying 17 USD/month for a translation tool I would only use for a handful of translations in custom code blocks.

[PetUtopia]

Yeah I tried that but he left out all other contents from the liquid file. I asked him to input the HTML directly into the Liquid file, but I don't think that's what you mean, right? What is meant by Custom HTML fields and where can I find that?

[Get_Quark]

Hello Shopify Community! 👋
Translating Custom Liquid Sections with Shopify Translation Keys

At Quark, we love clear, simple, and effective solutions. Struggling to translate text in your custom Liquid sections? Don’t worry, we’ll walk you through step-by-step how to use translation keys to integrate Shopify Translate & Adapt. 🛠️✨

---

The Problem: Non-Translatable Text in Custom Liquid Sections

You've installed the Shopify Translate & Adapt app, but your custom Liquid section text doesn’t get translated? No worries, we can use the JSON files generated by Shopify to implement translation keys directly into your code. 🎯

---

Step-by-Step Solution: Translating with Translation Keys

1. Create Your Translation Keys

Locate the locales folder in your theme and add your translation keys in the .json files.

Example:

In locales/en.default.json:

{
  "banner": {
    "headline": "The furniture that frees",
    "highlight": "frees",
    "subheadline": "your space & ideas."
  }
}

In locales/fr.json:

{
  "banner": {
    "headline": "Le mobilier qui",
    "highlight": "libère",
    "subheadline": "votre espace & vos idées."
  }
}

2. Update Your Liquid Code

Replace your static text with translation keys using the t filter.

Here’s a complete example of a fully translatable banner:

{% assign line_height = 1.2 %}
{% assign side_padding = '5%' %}
{% assign banner_margin = '5rem' %}
<div class="banner-container" 
     style="
       background-image: url('https://cdn.shopify.com/s/files/1/0291/2429/6782/files/01-10-2024_KIT_DECO_6.jpg?v=1727871982');
       background-size: cover;
       background-position: center;
       display: flex;
       align-items: center;
       justify-content: flex-start;
       height: 90vh;
       padding-left: {{ side_padding }};
       padding-right: {{ side_padding }};
       margin-left: {{ banner_margin }};
       margin-right: {{ banner_margin }};
       --line-height: {{ line_height }};
     ">
  <div style="
    max-width: 600px;
    width: 100%;
  ">
    <h1 style="
      font-family: Helvetica, Arial, sans-serif;
      font-size: clamp(5
      font-weight: bold;
      color: #000;
      margin: 0;
      text-align: left;
      line-height: var(--line-height);
    ">
      {{ 'banner.headline' | t }}<br>
      <span style="
        background-color: #000;
        color: #fff;
        padding: 0 0.2em;
        display: inline-block;
      ">
        {{ 'banner.highlight' | t }}
      </span>
    </h1>
    <p style="
      font-size: clamp(1.5rem, 3vw, 3.3rem);
      margin-top: 0.5rem;
      color: #000;
    ">
      {{ 'banner.subheadline' | t }}
    </p>
  </div>
</div>

3. Test Your Translations

1. Install or update the Shopify Translate & Adapt app.
2. Switch your store's language in Shopify to confirm that the translations display correctly.
3. If something is missing, go back to the language editor or JSON files to adjust.

---

Pro Tip: Organize Your Translation Keys

For better clarity and easier maintenance, follow a structured naming convention:

• banner.headline: For the main title of your banner.
• banner.highlight: For emphasized words.
• banner.subheadline: For the subtitle.

Final Thoughts

With this approach, you can easily translate your custom Liquid sections without relying on external tools. Goodbye frustrations, hello seamless translations! 🚀

If you have questions or ideas, share them below. We love building solutions together! 💡