Questions, feedback, and updates on the new online store design experience
It appears that adding product options to collection filter does not use translated option names when they are available. It does not seem to matter if options are added to filter before or after those options are translated.
Here I have a 3 products with translated option names:
Store: evr-novicell-7.myshopify.com
{
"data": {
"products": {
"edges": [
{
"node": {
"id": "gid://shopify/Product/7124606877858",
"options": [
{
"id": "gid://shopify/ProductOption/9208951373986",
"name": "Option 1",
"translations": [
{
"key": "name",
"value": "Option 1 in da"
}
]
},
{
"id": "gid://shopify/ProductOption/9208962941090",
"name": "Option 2",
"translations": [
{
"key": "name",
"value": "Option 2 in da"
}
]
}
]
}
},
{
"node": {
"id": "gid://shopify/Product/7124615463074",
"options": [
{
"id": "gid://shopify/ProductOption/9208962810018",
"name": "Option 1",
"translations": [
{
"key": "name",
"value": "Option 1 in da"
}
]
},
{
"id": "gid://shopify/ProductOption/9208962842786",
"name": "Option 2",
"translations": [
{
"key": "name",
"value": "Option 2 in da"
}
]
}
]
}
},
{
"node": {
"id": "gid://shopify/Product/7124615495842",
"options": [
{
"id": "gid://shopify/ProductOption/9208962875554",
"name": "Option 1",
"translations": [
{
"key": "name",
"value": "Option 1 in da"
}
]
},
{
"id": "gid://shopify/ProductOption/9208962908322",
"name": "Option 2",
"translations": [
{
"key": "name",
"value": "Option 2 in da"
}
]
}
]
}
}
]
}
},
"extensions": {
"cost": {
"requestedQueryCost": 11,
"actualQueryCost": 11,
"throttleStatus": {
"maximumAvailable": 1000,
"currentlyAvailable": 989,
"restoreRate": 50
}
}
}
}
Then I set up collection filters:
And open the front-end (Dawn 1.0.0) - filter option names are not translated:
Hi Evaldas, did you find a solution to this problem?
I also need to translate options filter labels for the collection filter.
No, last reply I got from Shopify was some months ago and they said it's a known limitation and will be addressed in the future 😞
ok crazy, but thanks for your reply. 😕
Did you manage to find a workaround, like with a metafield app or something?
Is it possible to modify the theme code to get the filter label to translation apps?
Ok, for everybody who faces the same problem. I quickly developed a dirty work-around. It is working stable and may help others.
In my theme (Impulse) there is for loop (for filters in filters) in the file "collection-grid-filters-form.liquid"
The loop goes through each filter item and gets it's "filter.label" (like @Binh describes above).
I used a switch statement to catch my filter labels that I want to translate:
{% case filter.label %}
{% when "Stielmaterial" %}
{{ 'products.filter.stemmaterial'| t}}
{% when "Stiellänge" %}
{{ 'products.filter.stemlength'| t}}
{% when "Tätigkeit" %}
{{ 'products.filter.usecase'| t}}
{% when "Werkzeugkopf Material" %}
{{ 'products.filter.tool_head_material'| t}}
{% else %}
{{ filter.label | escape }}
{% endcase %}
For each of my labels, I created an entry in the locale files (en.default.json) of the language I want to translate to. This entry gets displayed when the switch statement catches the filter label.
Best,
Jonas
If you need a quick and advanced solution to translate filter title and values according to your translation data, you can use this filter app https://apps.shopify.com/ultimate-search-and-filter-1.
It lets you translate the Filter title and it fetches the translated filter values automatically; no code needed.
Yes, this solutions works fine for now. Many thanks Jonas
We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023