liquid translated labels in app.js.liquid

Ephrem_agency · ‎03-18-2021

Hi, I'm pretty new with Shopify but already works with twig,

I need to update hardcoded custom code in app.js.liquid by the liquid translated tags. Here's the exemple :

original code :

$('.add_to_cart').text('Make a selection') ;

My code :

$('.add_to_cart').text( "{{ 'layout.general.cart_selection' | t}}" ) ;

But 'layout.general.cart_selection' isn't update with the right translation after switching the language.

I've noticed, that some tgas Like Shopify.translation.unavailable works with language switch. There is a way to register my custom tags as Shopify.translation.cart_selection ?

Thanks for help.

kai-nguyen · ‎03-19-2021

Hi,

You need change your code:

$('.add_to_cart').text( "{{ 'layout.general.cart_selection' | t}}" ) ;

To:

$('.add_to_cart').text({{ 'layout.general.cart_selection' | t | json }});

Ephrem_agency · ‎03-19-2021

thanks for your help.

It doesn't work. Does it can be related to the multi-language app (Translate my store) ?

Shop2000 · ‎05-02-2022

Hello, thanks but this doesnt work for me. It is stuck at the default language and doesnt update when switched. Any help appreciated.

LitExtension · ‎03-19-2021

Hi @Ephrem_agency

Yes, you can do that. You can follow on this guide: https://shopify.dev/tutorials/develop-theme-localization-use-translation-keys#include-html-in-transl...

Hope this helps.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

Mohamed_Gamal_ · ‎05-30-2025

Hi @Ephrem_agency ,
The following should work with the current Shopify way of creating files on their server:

Add the following script to the <head> tag in the "theme.liquid" file:

<script>
        window.translations = {
          cart_selection  : {{ 'layout.general.cart_selection' | t | json }}
        };
</script>

Then you can use it in your "app.js.liquid" like so:

$('.add_to_cart').text( window.translations.cart_selection ) ;

I hope this helps you or anyone else landed on this issue.

liquid translated labels in app.js.liquid

liquid translated labels in app.js.liquid

Community Blog Articles