Customizing Store Locator Tag Display Labels

Customizing Store Locator Tag Display Labels (Using JavaScript Callback)

Overview

By default, tag values set in ProMap are rendered directly on the frontend. This means the internal tag (e.g., promotion-2026) is displayed exactly as-is to users.

Currently, ProMap does not include a native “alias” feature to map internal tag values to custom display labels.

However, you can achieve this using a supported workaround via a JavaScript callback.

Solution: Using `scaStoreLocatorCallback`

ProMap automatically calls a global JavaScript function named:

scaStoreLocatorCallback

after the store locator finishes rendering.

This allows you to modify the displayed text dynamically—without affecting filtering or internal logic.

Step 1 — Add JavaScript to Your Shopify Theme

Go to:
Shopify Admin → Online Store → Themes → Edit Code
Open:
- theme.liquid (recommended) or Custom liquid section for each locator page
  or
- Your custom JavaScript file
Add the following code:

function scaStoreLocatorCallback() {
  var tagMap = {
    'promotion-2026': 'Participating Store'
    // Add more mappings here:
    // 'another-tag': 'Another Label'
  };

  // Replace tag text in filter checkboxes
  document.querySelectorAll('#scasl-tag-list-container label').forEach(function(label) {
    var input = label.querySelector('input');
    if (input && tagMap[input.value]) {
      label.lastChild.textContent = ' ' + tagMap[input.value];
    }
  });

  // Replace tag badge in store list and info window
  document.querySelectorAll('.scasl-tags').forEach(function(span) {
    var val = span.textContent.trim();
    if (tagMap[val]) {
      span.textContent = tagMap[val];
    }
  });
}

Step 2 — How It Works

This script replaces visible tag text across the locator interface while keeping internal values intact.

Filter Checkboxes

Internal value: promotion-2026
Displayed as: Participating Store

Store List Cards

Internal value: promotion-2026
Displayed as: Participating Store

Map Info Window

Internal value: promotion-2026
Displayed as: Participating Store

Filter URL

Remains unchanged:
```
?tags=promotion-2026
```

Important:
Only the display text is modified. Filtering and logic continue using the original tag values.

Step 3 — Adding More Tag Mappings

You can extend the tagMap object to support multiple labels:

var tagMap = {
  'promotion-2026': 'Participating Store',
  'vip-store': 'Premium Location',
  'outlet-2026': 'Outlet Store'
};

Notes & Requirements

This solution requires theme-level JavaScript editing
A developer may be needed for implementation
Safe to use — does not interfere with filtering logic or URLs

Need Help?

If you'd like assistance applying this to your store, the team can help implement and test the setup.

Working with Tags on the Store Locator App