How can I translate text in a custom liquid section on my website?

[Matei86]

I added a Custom Liquid section to the footer and I would like to translate the text within the section. I don't have the option to add a Rich Text there, only Custom Liquid. Theme I'm using is Dawn.

Here's one part of the HTML code:

<div class="badge">
<div class="badge-item">
<img src="badge1.svg">
<p><b>Livrare rapida</b></p>
<p>Primesti produsele in 1-2 zile lucratoare</p>
</div>
</div>

I'm comfortable to editing pieces of code and updating liquid files, can someone please provide an example of what needs to be done to translate the part in green?

Thanks,

Matei

[richbrown_staff · Accepted solution]

Hey @Matei86 , could you do this with Dawn's 'Multicolumn' section? It allows you to pair images with text and is fully translatable. Translating custom liquid is possible but hard, you need to create translation keys and update them in all your locale files. More here: https://www.shopify.com/uk/partners/blog/translation-keys

[Matei86]

Hi @richbrown_staff ,

Multicolumn is not available for the footer, there's only Custom Liquid. I have been deep diving and found a solution that works for me:

{% if request.locale.iso_code == 'it' %}
 Text in IT
{% elsif request.locale.iso_code == 'de' %}
 Text in DE 
{% elsif request.locale.iso_code == 'fr' %}
 Text in FR
{% elsif request.locale.iso_code == 'es' %}
 Text in ES
{% elsif request.locale.iso_code == 'hu' %}
 Text in HU
{% else %}
 Text in default language
{% endif %}

 Thanks!

[Matei86]

Hey @richbrown_staff ,

I just tried translation keys and they work very well.

For those asking how I did it, here's one example for a badge in the footer for Italian:

1. Go to Online Shop > Edit Code > Locales > it.json

2. Scroll down until you find "sections", then "footer"

3. Add the following:

"badge": {
    "fast_delivery1": "Consegna veloce",
    "fast_delivery2": "Riceverai i prodotti in 1-2 giorni lavorativi"
}

You can name and nest the objects however you want, just make sure they're matching with the variable you will be adding later on.

4. Save.

5. Go to Online Shop > Customize, and open up your Custom Liquid section.

6. Replace the text with the following variables:

{{ 'sections.footer.badge.fast_delivery1' | t }}
{{ 'sections.footer.badge.fast_delivery2' | t }}

In the example provided in my first post, it would look like this:

<div class="badge">
<div class="badge-item">
<img src="badge1.svg">
<p><b>{{ 'sections.footer.badge.fast_delivery1' | t }}</b></p>
<p>{{ 'sections.footer.badge.fast_delivery2' | t }}</p>
</div>
</div>

Save and validate translation on storefront.

That's it! I believe this approach is more resource-friendly vs. the one I have found earlier with if/else.

Thanks again @richbrown_staff for providing the documentation.

LE: @richbrown_staff I'm wondering if a theme receives an update, will I need to re-do the mapping and add the objects?

Thanks,

Matei