Feature previewHCL Commerce Version or later

Locating a nearby store using the Store Locator feature

The Store Locator feature allows the shopper to easily locate a physical store of their choice by using online maps. This feature is especially designed to enable them to physically pick up the products bought online, from a store of their choice.

Before you begin

To use Google Maps with the Store Locator feature, the store build process requires access to a Google API key. For more information, see Enabling a Google API key for Next.js stores.


Follow these steps to locate a physical store using online maps.
  1. Click the Locate Store icon on the top-right side in the header of React-based store. The store locator page opens with a map of the user's current location based on their IP address by default. This is shown in the following example.
    • When the shoppers click the Locate Store button, the application displays a pop-up box asking them to share their current location.
    • The current location of the shopper is displayed only when they give this permission by clicking the Allow button in the popup box.
    To display you current location based on the IP address by default, you must click the button in the pop-up dialog box to give permission to share their current location
  2. Click the Find Nearest Store option to display a list of nearby stores to the current IP address of the shopper. Alternatively, they can type the store name or a location of their choice in the Search Store search-box and click the suggested store name.
    • The online map is updated according to the store location selected by the shopper.
    • When they select a store, the system displays the store name and its address, along with the store's working hours.
  3. Click the Get Directions option to view the direction to the selected store from their present location on the map.
  4. Click the Set As My Store button to set the selected store as their default store.
    Note: The store selection data will be removed by the system when the shopper signs out of the React-based store.


Once the shopper selects a default store, the Product Details page will display the availability of that product in the default physical store.


About this task

There are two limitations in using the Store Locator feature.
  • You may see a different map on the store front during a store preview in the Management Center. For example, the location on the store front is the location of your default IP address whereas the store preview displays the Toronto location map by default. However you can change this default store location to a different location.
  • During a store preview in the Management Center, when you click the Find Nearest store link, you will see the Toronto location map by default. This is because the system is unable to fetch the location details in a store preview but it is able to do so in the store front.

Both these issues occur because there is a two-level nested iFrame/object tag and the geolocation is disabled in this nested document by the browser's permissions policy.

  • For a shopper, the information is stored locally by the browser as they will access the React-based store from their local machine. When a Customer Service Representative (CSR) adds a new shopper and shops on their behalf, they will see the store location that was previously saved in the local storage. If this is not the intended store then the CSR must select a different React-based store or clear the local storage details.