Boost In-Store Sales with Store Locator

With the Retail React app template, you can include a store locator on your Progressive Web App (PWA) Kit site with reduced implementation time. Shoppers can find store locations worldwide based on ZIP code, city, and more. Extend your store information in Business Manager to customize the displayed location metadata on your site.

This guide explains how to configure and use a store locator.

Prerequisites

To include a store locator:

Build your site with:
- The Retail React app template
- Retail React App version 4.0 or later
- Commerce SDK React version 2.0.1 or later
Use a Shopper Login and API Access (SLAS) client with the scope sfcc.shopper-stores. Follow the steps in Authorization for Shopper APIs or use the registerClient API endpoint to create or update a SLAS public or private client.
- In the Scopes field, include this scope: sfcc.shopper-stores.
A SLAS private client offers several advantages over a public client. See Use a SLAS Private Client.

Configure a Store Locator

In Business Manager:
- Add the countries that you want shoppers to find on your site. See Store Geolocation Data in B2C Commerce.
- Add the stores that you want shoppers to find on your site. You can edit store information that you already added. Also, you can bulk import stores. See Create Stores in B2C Commerce.
In app/constants.js:
- In the SUPPORTED_STORE_LOCATOR_COUNTRIES constant, add the list of countries that you want shoppers to see in the Country dropdown.
  
  The country codes that you add must match those of the stores that you added in Business Manager.
  
  If the SUPPORTED_STORE_LOCATOR_COUNTRIES constant is empty, when a shopper searches for stores, store locator uses the postal or ZIP code entered by the shopper. Store locator searches in the country specified in the DEFAULT_STORE_LOCATOR_COUNTRY constant defined in app/constants.js.
In config/default.js, set the storeLocatorEnabled value to true.

1module.exports = {
2    app: {
3        ...
4        storeLocatorEnabled: true
5    },

Initial Store Locator Rendering

For shoppers who have location sharing already enabled on their device, store locator shows results around the GPS location of the shopper’s device.

For shoppers who don’t have location sharing enabled on their device, the initial rendering of the store locator shows results for the default geolocation specified in these constants in app/constants.js.

DEFAULT_STORE_LOCATOR_POSTAL_CODE
DEFAULT_STORE_LOCATOR_COUNTRY

Constraints

Store locator:

Returns up to 200 stores at a time
Searches for stores within a maximum radius of 100 kilometers

The default unit is km (kilometers), as specified in the STORE_LOCATOR_DISTANCE_UNIT constant in app/constants.js. Optionally, to use miles for the unit, you can set STORE_LOCATOR_DISTANCE_UNIT to mi.

The default maximum radius is 100, as specified in the STORE_LOCATOR_DISTANCE constant in app/constants.js. Optionally, you can set STORE_LOCATOR_DISTANCE to your chosen maximum radius.

Troubleshoot Store Locator

This section provides a suggested solution for a common error that you might encounter while using store locator.

Inaccurate Location Data

Potential Cause: Your location data in Business Manager is inaccurate.

Suggested Solution: Ensure that your store location information is accurate and reflects any changes in address, phone numbers, operating hours, or other store data. See Managing Stores in B2C Commerce.