Solved

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

Matei86
Tourist
9 0 3

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.

Matei86_0-1706612347895.png

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

Accepted Solution (1)

richbrown_staff
Shopify Staff
632 91 155

This is an 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

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

View solution in original post

Replies 3 (3)

richbrown_staff
Shopify Staff
632 91 155

This is an 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

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

Matei86
Tourist
9 0 3

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
Tourist
9 0 3

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"

Matei86_0-1706645022185.png

3. Add the following:

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

Matei86_1-1706645200545.png

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