Translating custom.liquid sections using t tags

[jpyck]

I have a few custom.liquid sections running on my website. My website will need to be multi-lingual (English & Spanish). English is the default. For translations, I've been using Shopify's Translate & Adapt app. it works great but it doesn't offer translations of custom.liquid sections.

I've done some research and I've come up with a way of tackling this problem: t tags.

Following the resources I found online, I added the t tags to my custom.liquid section elements:
<h1>{{ 'custom.premium_sound_section.heading' | t: 'Default Heading' }}</h1>
<p>{{ 'custom.premium_sound_section.description' | t }}</p>
<a href="https://luxloops.audio/pages/about-us">{{ 'custom.premium_sound_section.link_text' | t }}</a>

in the locales/en.default.json file, I have added this code:

"custom": {
"premium_sound_section": {
"heading": "The Pinnacle of Premium Sound",
"description": "Music production is more than just a craft—it's an art form that deserves the finest tools. We empower producers to create with confidence, knowing they have access to the highest-quality sound.",
"link_text": "Discover more"
}
},

For some reason it's not working. Shopify is not pulling up this information from the json file. Any idea what I'm doing wrong???

[PaulNewton · Accepted solution]

Hi @jpyck 👋 the translations are in the "general" namespace

{{ 'custom.premium_sound_section.description' | t }}

should be

{{ 'general.custom.premium_sound_section.description' | t }}

and assuming there are no syntax errors, if still not working validate the JSON.

If these are only intended for specific sections put the translations in that sections schema locales object to avoid polluting the main locales namespaces. i.e. sections/custom-section.liquid

https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema#locales 

And if making custom theme settings for the custom sections put those translations the schema locales files.

i.e. en.default.schema.json

https://shopify.dev/docs/storefronts/themes/architecture/locales/schema-locale-files 

[jpyck]

Hi @PaulNewton ,

thank you so much! this has indeed solved my issue!
I had simply forgotten to add the "general" tag to my t tags. 

You're my hero! 🙂