Store Locator Multi-Language Support – Quick Summary | Rose Perl Technology Llc Help Center

Type: Temporary Patch
Platform: Shopify
Status: Active temporary solution
Purpose: Add multilingual support to Store Locator until native language support is released

Summary

This solution uses a lightweight JavaScript file to override Store Locator interface text based on the active storefront language.

It was released as a temporary patch for stores that need multilingual Store Locator support now. It is not the long-term solution. Native language support is expected in a future release, at which point this patch should be retired.

What It Does

The script:

detects the active language
loads the matching translation set
overrides SCASLSetting labels before Store Locator finishes initializing
retries for up to 5 seconds if Store Locator settings are not yet available

Supported Languages

Current supported locales:

en-gb
sv-se
nb-no
de-de
pl-pl
es-es
fr-ca

If no supported language is detected, the script falls back to:

en-gb

Supported Translation Areas

The current patch translates:

search box labels
current location text
search radius labels
filter labels
no-results messages
directions and map/list controls
open/closed status text
day names
distance/unit labels

Current Limitations

This is a frontend override only
Only keys available in SCASLSetting can be translated
New Store Locator UI fields must be added manually
Some third-party map controls may not be translatable
App updates may require patch updates

Note: we have translated Hardcoded DOM Labels for now and can update as needed.

  // Hardcoded strings not in SCASLSetting — require DOM patching
  var DOM_LABELS = {
    'en': {
      phone_label: 'Phone Number',
      email_label: 'Email',
      operating_hours_label: 'Operating Hours',

Implementation Notes

File name: sl-i18n.js
Upload location: Shopify theme assets
Load it in theme.liquid
It must load before the Store Locator script initializes
Set DEBUG = false in production
Keep translation keys aligned with current Store Locator settings

Step-by-Step Implementation Guide

1. Enable storefront languages in Shopify

In Shopify Admin, enable the required languages for the store.

2. Upload the translation script

Add the file below to the theme assets:

assets/sl-i18n.js

3. Add the script to `theme.liquid`

Insert this before the Store Locator script:

<script src="{{ 'sl-i18n.js' | asset_url }}" defer></script>

4. Update the translation dictionary

Edit the TRANSLATIONS object inside sl-i18n.js with the required client-approved translations.

5. Verify locale detection

The script checks language in this order:

URL path
URL hash
?lang= parameter
Shopify.locale
HTML lang attribute

6. Test each language route

Confirm Store Locator renders correctly on each supported locale and falls back to English when needed.

Recommended QA Checklist

Search box text is translated
No-results messaging is translated
Map/list controls are translated
Opening-hours labels are translated
Day names are translated
Unit labels are translated
English fallback works
Script loads before Store Locator initializes

Example Install Pattern and link to current scripts

View and Download Full Article and Script

This must appear early enough so the override is ready before Store Locator initialization.

Key Reminder

This patch was released as a temporary workaround.
Future native language support is planned, and once that is available, this implementation should be replaced with the official solution.

Translation Tab - How to Change text labels for different languages

Updating your Shopify Theme using app embeds

Importing Store Hours and Exception Dates

Store Locator – Temporary Multi-Language Support Patch

How can I troubleshoot and fix common issues with the Store Locator functionality?