Skip to main content

Show each store's distance from the visitor

Distance is calculated at search time. It is not saved as a permanent store field because the value changes for every visitor and every searched location.

You need both parts:

  1. a store card or infobox containing the dynamic distance value; and
  2. a locator that can obtain an origin through address search or visitor location.

Add distance to a store card​

  1. Go to Store Locator → Builder.
  2. Open the store card used by your locator, or duplicate it before changing a live design.
  3. Add a content element where the distance should appear.
  4. Select the dynamic Distance store value.
  5. Set the desired number/format options if the element exposes them.
  6. Add optional surrounding text only as a complete phrase—for example, a suffix of away.
  7. Save the store card.

Use the same process for a Map infobox design.

Let the locator establish an origin​

The origin can come from:

  • an address entered in a Search form;
  • the visitor selecting the geolocation control and allowing browser permission;
  • Ask location on load in the Map widget;
  • the optional IP location fallback in the Map widget.

For address search, make sure the selected Search form contains the location field. For browser location, test over HTTPS and allow location permission when prompted.

Choose kilometres or miles​

  1. Go to Store Locator → Settings.
  2. Open the Search tab.
  3. Set Distance unit to Kilometres or Miles.
  4. Save settings and refresh the published locator.

The distance control, REST request, sorting, radius, and displayed value must all use the same unit.

What visitors see before location is known​

Before the locator has an origin, it cannot calculate distance. The element should remain hidden or display a complete fallback such as Enter a location to see distance. It must not display broken text such as About away.

Test the complete behavior​

  1. Open the locator in a private window.
  2. Confirm distance is hidden or shows the configured complete fallback.
  3. Search for a known address and confirm distances appear.
  4. Use browser geolocation and confirm values change to the visitor position.
  5. Change radius and confirm the values remain visible.
  6. Select Load more and confirm new cards also contain distances.
  7. Set sorting to distance and confirm results increase from nearest to farthest.

If distance disappears after changing a filter, use Search, radius, and distance to inspect the request state.