Localization

Customize the SearchX widget text and support multiple languages.

Overview

SearchX supports multi-language interfaces through custom locale files. You can translate all widget text — from search placeholders to button labels and filter names.

Setting Up Translations

1. Create Locale Files

Create JSON translation files for each supported language:

/locales/en.json:

{
  "search": {
    "placeholder": "Search for products...",
    "no_results": "No products found for \"{{query}}\"",
    "results_count": "{{count}} products found"
  },
  "filters": {
    "title": "Filters",
    "clear_all": "Clear all",
    "price_range": "Price range",
    "brand": "Brand",
    "category": "Category",
    "size": "Size",
    "color": "Color"
  },
  "product": {
    "add_to_cart": "Add to Cart",
    "add_to_wishlist": "Add to Wishlist",
    "out_of_stock": "Out of Stock",
    "sale": "Sale"
  },
  "pagination": {
    "previous": "Previous",
    "next": "Next"
  },
  "sort": {
    "label": "Sort by",
    "relevance": "Relevance",
    "price_asc": "Price: Low to High",
    "price_desc": "Price: High to Low",
    "newest": "Newest"
  }
}

2. Configure the SDK

Pass the locale URL pattern and default language:

SearchXSDK.init({
  // ... other config
  customLocaleUrl: '/locales/{{lng}}.json',
  defaultLanguage: 'en',
});

The {{lng}} placeholder is replaced with the current language code.

Language Switching

The SDK automatically detects language changes. For OpenCart, language is persisted in localStorage:

localStorage.setItem('searchx_lang', 'el');
location.reload();

Supported Languages

SearchX has built-in support for:

• English (en)
• Greek (el)
• Additional languages via custom locale files

Dashboard-driven translations

Some pieces of widget content come from the SearchX dashboard, not your locale files, and can also be translated per language:

• Suggested Links — each promotional chip carries one URL and a title per language. English is the canonical fallback when a translation is missing. See Suggested Links.
• AI Search chips — prompt suggestions inside the AI Search panel. Same per-locale shape (English fallback when a language is missing).

You configure these from the SearchX dashboard, with a translate modal per item. The widget picks the active language at render time automatically — there's no extra integration setup needed.

Greek uppercase and accents

In Greek, words written in uppercase traditionally drop their accents (e.g. Φλεβών → ΦΛΕΒΩΝ, not ΦΛΕΒΏΝ). Browsers handle this automatically when text-transform: uppercase is applied — but only when the element carries lang="el".

The SearchX widget propagates the active locale to its root container, so headings and labels work correctly out of the box. Facet item labels coming from your product catalogue (which may be in Greek even when the interface language is English) also get lang="el" stamped on them automatically when the widget detects Greek characters. This means a custom CSS rule like text-transform: uppercase on .searchx__facet-item strips accents correctly without any extra work on your side. See Widget Styling — Greek typography.