Sort BY traduction

Store Design
1

Hello,
I’m using the official Dawn theme and my store is fully translated into Arabic. However, the sort options on the collection page (e.g. “Best selling”, “Price low to high”, etc.) still appear in English, even though I’ve added the correct Arabic translations in both ar.json and en.default.json.

I tried using {{ 'products.facets.sort_options.best-selling' | t }} and even custom Liquid case statements, but Shopify seems to ignore them and injects the sort labels directly in English.

Is there any way to properly translate or override these sort labels in the Dawn theme?
This issue breaks the consistency of the Arabic storefront and looks unprofessional.

Thanks in advance for any help or workaround.

3 Likes
2

Hey @user1112,

Great question — this is a known issue with the Dawn theme (and other Online Store 2.0 themes). The sort labels (Best selling, Price low to high, etc.) are not pulled from your ar.json translation files, but are instead injected by Shopify’s storefront API in English. That’s why adding translations in ar.json or en.default.json doesn’t affect them.

Workarounds / Solutions:

1. Manual Override with JavaScript You can “replace” the English labels with Arabic text after they are rendered on the page. Add this to your theme.liquid before the closing tag:

<script>
document.addEventListener("DOMContentLoaded", function() {
  const translations = {
    "Best selling": "الأكثر مبيعاً",
    "Alphabetically, A-Z": "أبجديًا، أ-ي",
    "Alphabetically, Z-A": "أبجديًا، ي-أ",
    "Price, low to high": "السعر، من الأقل إلى الأعلى",
    "Price, high to low": "السعر، من الأعلى إلى الأقل",
    "Date, old to new": "التاريخ، من الأقدم إلى الأحدث",
    "Date, new to old": "التاريخ، من الأحدث إلى الأقدم"
  };

  document.querySelectorAll("select#SortBy option").forEach(option => {
    if (translations[option.text.trim()]) {
      option.text = translations[option.text.trim()];
    }
  });
});
</script>

This script looks for the default sort dropdown (#SortBy) and replaces the labels with Arabic.

  1. Custom Dropdown (Advanced)- Another approach is to create your own custom sort dropdown in Liquid, using {{ ‘products.facets.sort_options.best_selling’ | t }} and mapping them manually. Then, use Shopify’s faceted filtering API to trigger sorting. This requires more coding but gives you full control.

The quick fix is option 1 (JavaScript override) — it works reliably, keeps your storefront consistent in Arabic, and doesn’t break theme updates.

If you’d like, I can implement this directly for you and test it on both desktop and mobile. Please feel free to reach out - you can also check my past work and contact here: https://www.rajatweb.dev/.

Thanks!

Rajat | Shopify Expert

1 Like
3

Hello,

This is a great question and something many merchants run into when working with Dawn and other OS 2.0 themes. The reason your sort labels (Best selling, Price low to high, etc.) are still showing in English is that these options are injected by Shopify’s core storefront system rather than being pulled from the theme’s translation files (ar.json, en.default.json). That’s why Liquid translations or t filters don’t apply here.

Possible solutions:

1. Translate & Adapt app
I recommend checking with Shopify’s free Translate & Adapt app first. In some cases, these dynamic labels appear there, and you can apply the correct Arabic translation directly.

2. JavaScript override (workaround)
If you don’t see them in your translation settings, you can add a small JavaScript snippet to your theme to override the text on page load. For example:

<script>
document.addEventListener("DOMContentLoaded", function() {
  const sortLabels = {
    "Best selling": "الأكثر مبيعًا",
    "Price, low to high": "السعر من الأقل إلى الأعلى",
    "Price, high to low": "السعر من الأعلى إلى الأقل",
    "Date, new to old": "الأحدث إلى الأقدم",
    "Date, old to new": "الأقدم إلى الأحدث"
  };

  document.querySelectorAll('select[name="sort_by"] option').forEach(option => {
    if (sortLabels[option.text]) {
      option.text = sortLabels[option.text];
    }
  });
});
</script>

This ensures your storefront stays consistent in Arabic while Shopify works on broader translation support.

3. Contact Shopify Support
Since these labels come directly from the platform, the most sustainable fix will need to be handled by Shopify. I recommend opening a support ticket so your request is logged — this helps prioritize better multi-language support in future updates.

In short: the current theme translations won’t override these labels, but you can achieve the result today with either Translate & Adapt (if available) or a lightweight JavaScript override.

Hope this helps keep your Arabic storefront consistent and professional.

Best,
Richaerd
Shopify Partner & Ecommerce Expert

4

Hi @user1112,

You can refer to Translate & Adapt app, it will help you translate everything for the store. Refer link

Hope it can help you