Translating Shopify Search & Discovery filters

Retired Boards Appdev Store Design
1

Hello there,

I apologize if this question has been asked before. I’ve spent 8 hours trying to find a solution to my problem and still haven’t had any luck. Here’s the issue:

I’m currently using the Streamline theme and the Shopify Search & Discovery app for my collection filters. I really like the minimalist design and don’t want to use any other apps that seem too heavy for my purposes. However, I’m having trouble translating the custom metafield filter and its values.

If someone could provide me with a simple guide on how to do this, I would greatly appreciate it. I tried following this post (https://community.shopify.com/c/online-store-2-0/how-can-i-translate-new-quot-filter-quot-titles/td-p/1330319), but I didn’t have any luck. The translation process using json files seems a bit confusing to me.

My site can be found here: https://athleticnutra.eu/collections/all

As you may have noticed, there’s a language selector located in the bottom right corner of the page. However, when I switch to a different language, the “category” section of the collection filter remains in English. Ideally, I would like to be able to translate the category label and its corresponding values.

Thank you in advance for your help, and cheers!

2 Likes
2

Locate the sections/collection-template.liquid file and open it.

Look for the section that defines the custom metafield filter, which should look something like this:

{% case filter.title %}
{% when 'Category' %}
{{ 'Translated Category Label' | t }}
{% when 'Color' %}
{{ 'Translated Color Label' | t }}
{% endcase %}

Repeat this step for each of the filter values that need to be translated, replacing the existing value with the translated value. For example:

{% case filter.items %}
{% when 'Red' %}
{{ 'Translated Red Label' | t }}
{% when 'Blue' %}
{{ 'Translated Blue Label' | t }}
{% endcase %}

Save the changes to the search-collection-filters.liquid file.

Create a language file for the appropriate language by duplicating an existing language file in the locales folder and renaming it to the appropriate language code (e.g., fr.json for French).

Open the new language file and add translations for the custom metafield filter label and its values. For example:

{
  "Translated Category Label": "Translated Category Label in French",
  "Translated Color Label": "Translated Color Label in French",
  "Translated Red Label": "Translated Red Label in French",
  "Translated Blue Label": "Translated Blue Label in French"
}