Translating the dynamic index content. How to call JSON locale variables in the settings_data.json?

Technical Q&A
1

Hey my dears,

I’am almost done with my shop and ready to start. Just need a solution for a yet unsolved problem: Translating the homepage/index.

The content created there over the Shopify theme editor doesn’t show up in my translation app (Translation Lab).

I tried creating some custom fields in the locale JSON files and then call them with {{ ‘home_content.custom_field’ | t }}, but this doesn’t work, as the editor seems only to allow plain text as input.

My guess would be to embed these in the settings_data.json. Changing the input type of the setting to html and then calling the locale is also not working.

Any other workaround ideas on how to get grip on the index content ?

:slightly_smiling_face:

2

YAHOO !!!

After many try and errors, I finally found a solution by myself. Maybe this will help someone someday:

In the each of the section.liquids used in the index (Narrative Theme) I added code in the following form:

{% if request.locale.iso_code == 'en' %} 
        ## {{ section.settings.title_en | escape }}
        {{ section.settings.text_en }}

        
        {{ section.settings.button_label_en }}
        
    {% elsif request.locale.iso_code == 'de' %}     
        ## {{ section.settings.title_de | escape }}
        {{ section.settings.text_de }}

        
        {{ section.settings.button_label_de }}
        
    {% endif %}

then I just needed to add section settings for the German and English Textfields at the end of the section.liquids:

{
   "type": "text",
   "id": "title_en",
   "label": {
     "de": "Titel",
     "en": "Heading"
   },
   "default": {
     "de": "Bild mit Text",
     "en": "Image with text"
   }
 },
 {
    "type": "text",
    "id": "title_de",
    "label": {
      "de": "Titel",
      "en": "Heading"
    },
    "default": {
      "de": "Bild mit Text",
      "en": "Image with text"
    }
},

{
    "type": "textarea",
    "id": "text_en",
    "label": {
      "de": "Text EN",
      "en": "Text EN",
    "default": {
      "de": "

Kombiniere große Schrift mit einem Foto, um einen Fokus auf dein ausgewähltes Produkt, die Kategorie oder einen Blogpost zu legen. Du kannst dann Details zur Verfügbarkeit und dem Style oder sogar eine Bewertung hinzufügen.

",
      "en": "

Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

",
     
    }
  },
{
    "type": "textarea",
    "id": "text_de",
    "label": {
      "de": "Text DE",
      "en": "Text DE",

    },
    "default": {
      "de": "

Kombiniere große Schrift mit einem Foto, um einen Fokus auf dein ausgewähltes Produkt, die Kategorie oder einen Blogpost zu legen. Du kannst dann Details zur Verfügbarkeit und dem Style oder sogar eine Bewertung hinzufügen.

",
      "en": "

Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

",
    }
  },
  
{
  "type": "text",
  "id": "button_label_en",
  "label": {
    "de": "Button-Etikett ",
    "en": "Button label"
  }
},
{
  "type": "text",
  "id": "button_label_de",
  "label": {
    "de": "Button-Etikett DE",
    "en": "Button label DE"
  }
},

Et voilá : I can control the English and German texts in the theme editor :slightly_smiling_face: