How can I translate custom liquid section code in Shopify?

Start a Business

Topic summary

A French Shopify store owner needs to translate custom liquid sections to English, but Shopify’s Translate & Adapt app doesn’t support this content type.

Official Response:
Shopify staff confirmed custom liquid sections cannot be translated natively. Recommended alternatives include:

  • Using translatable theme blocks like ‘Image with Text’ or ‘Rich Text’ instead
  • Running third-party apps (Weglot, Langify, Langshop) alongside Translate & Adapt
  • Implementing translation keys manually via Shopify’s translations API

Community Solutions:

Translation Keys Method (most comprehensive):

  • Add translation keys to locale JSON files (e.g., en.default.json, fr.json)
  • Reference keys in liquid using {{ 'banner.headline' | t }}
  • Requires understanding of Shopify’s translation API and structured naming conventions

Conditional Language Check (simpler workaround):

{% if request.locale.iso_code == 'fr' %}
  french content
{% else %}
  english content
{% endif %}

Outcome:
The original poster resolved their issue using the translation keys API, though eventually switched to Weglot for additional features like app translation. Multiple community members have since requested clarification on implementing these solutions.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
19

Hello Shopify Community! :waving_hand:
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. :hammer_and_wrench: :sparkles:

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. :bullseye:

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' %}

  

    # 
      {{ 'banner.headline' | t }}

      
        {{ 'banner.highlight' | t }}
      
    
    

      {{ 'banner.subheadline' | t }}

3. Test Your Translations1. Install or update the Shopify Translate & Adapt app.

  1. Switch your store’s language in Shopify to confirm that the translations display correctly.
  2. 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! :rocket:

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