Step 1: Add Store Location
Overview of Store Locator Features
The app provides flexible map-based geolocation capabilities that allow you to display relevant locations, products, and professionals via an intuitive map interface. These features make it easier for users to:
Locate nearby dealers, professionals, or stores that carry your products.
Submit details for inclusion as a dealer or professional, subject to review and approval.
Browse products and locations via map pins for a seamless shopping experience.
Go to Store Locator page:
Select "Add Store Location" button:
Step 2: Enter Detail Store Information
Go through General and Location Info Part to enter detailed store information like Store Name, Store Address, Description of the store, and other necessary information like Operating Hours.
For businesses featuring independent professionals or dealers, you can enable the dealer or professional submission form to collect details from interested individuals or companies.
Ensure submissions are reviewed for approval before appearing on the map to maintain accurate map content.
For added clarity, include buttons or indicators that specify which products each dealer offers, helping customers identify items available in specific locations.
After entering the exact address of the store, you have the option to drag and drop the red pin to your store's precise location if the location shown is incorrect:
Locations Missing from Map
Sometimes, newly added store locations might not appear on the map due to incorrect address resolution. To fix this:
Go to the Edit Location menu of the store.
In the “Find on Map” section, click the button to pinpoint the location on the map.
Adjust the pin's position and save the changes.
If the location appears on the map but cannot be found via search, manually verify and update the address as needed.
After everything is done, remember to click Create Store:
and Publish to shop to reflect the newly added store:
If you do not wish to select Publish each time you had added a new store or make changes to an existing store, please ensure this is tick:
Alternatively you can set this up by going to the Settings and turn on Auto-Publish Store Location Changes
Step 3: Configure Store Locator App
Go to the Settings section. You will see there are 5 tabs that we need to go through:
Google Map API section If you don't have a Google Maps API key yet, begin by setting up your store locator in limited mode. This allows you to design and add locations without fully activating map functionalities. When you obtain an API key, input it into the API Key field in the settings to unlock full capabilities.
In order for the app to work properly please update the API Key to keep the app working properly for your site. Please note that if you did not setup your own Google Maps API, the map will stop displaying after 7 days. ➥ Get your own API Key with our following video guide: ➥ Paste the API you just created in the API Key box ⇒ Click Save.
<br> For users with an existing Google Maps API key, ensure it is configured correctly by locating the key in your Google Cloud Console and confirming all required Maps APIs (e.g., Maps JavaScript API, Places API) are enabled. Additionally, consider enabling restrictions for added API security before refreshing your app's settings.
Troubleshooting Google Maps JavaScript API Errors
If you encounter the error message "Google Maps JavaScript API error: RefererNotAllowedMapError," there may be an issue with the Google Maps API key configuration. Follow these steps to resolve it:
Visit your Google Cloud Console and access the API key settings.
Under Application restrictions, ensure the option HTTP Referrers (websites) is selected.
Add your website (e.g.,
https://example.com/*) and relevant subdomains to the list.Verify your Google Cloud project has an active billing status to ensure functionality.
Revisit the Google Cloud Console to confirm all necessary APIs are enabled and re-enable them if required.
Save changes and reload your site to verify functionality.
Note: If using separate server-side and client-side keys, configure restrictions accordingly for each.
2. Store Locator section:
Firstly, enable Store Locator.
If you wish to change the Store Locator's URL, you can do so at the Edit Store Locator URL:
3. Map Settings section:
You have the option to turn on/off Dynamic Map. To learn more about this feature please refer to this article:
Set the default location that will be displayed when the map is loaded by dragging and dropping the pin at Default Map Location:
Dynamic Map Settings Limiting Visibility
When the Dynamic Map feature is active, the map and location lists are restricted to what fits within the visible area of the map. If this is causing display issues:
Navigate to the Map Settings menu in your app.
Disable the Dynamic Map feature to make all locations visible at all times.
4. Store Search Settings section:
Enable Auto detect Location to detect the location of customers automatically when visiting the site.
IMPORTANT NOTE: This feature will not work if customers disable location permission for your store.
You can select how the Auto-complete feature behaves whenever a customer uses the search function:
Full Address will suggest the exact full address based on characters typed into the search bar. It will display address, postal code, state/ region and country.:
Region will suggest the region instead. It will display regional information such as postal code, state/ region and country only:
To configure the search results that will be featured on the frontend, by configuring the Max Results, Search Radius, Default Search Radius, Default Search Measurement.
To select what filter tags will be shown in the Search section, you can go through the fields: Display All Tags, Select Display Tags.
5. Operating Hours section. To understand more about Operating Hours setup, please refer to this article.
6. Customize Design tab:
In the Store List microtab, you can configure how you want the search results to be displayed. Some items that you can configure are information that you want to display, the design of the search results and showing the operating hours.
In the Map microtab you can configure the general map settings such as the different map styles, the default zoom level of the maps and other maps settings.
7. If you are a non-English store, you will find the Translation Tab useful:
This section allows you to change any text label which is displayed on the frontend. You can translate them into other languages you want.
Step 4: Display Store Locator on Your Website
Shopping by Map: Customer Experience
To enhance the user experience, consider implementing the 'shop by map' feature. This includes:
Adding geolocation pins for displayed products or locations.
Providing detailed information such as store images, product details, or special offers for each pin.
Including a 'find my location' option to personalize the map display and show results near the user's geographic location.
Enhancing map interactivity with optional location-specific visual aids like images or promotional content.
Now, let us instruct you on how to show Store Locator on your website’s main menu:
1. Go to Content ➜ Menus ➜ Select menu
2. At the Menu Detail ➜ Click Add menu item, then enter Name and your Store Locator URL Link (Using the URL that is shown on the top of your backend).
➜ Click Add and Save Menu. Then go to the frontend you will see the tab to Store Locations on the Main Menu.
Step 5: Troubleshooting Common Issues
To ensure the Store Locator operates correctly, review the following tips:
Verify Address Accuracy: Always confirm that new or imported addresses are resolved correctly during setup.
Regularly Check Google Maps API Settings: Ensure HTTP referrer domains in the Google Cloud Console match your active domains to maintain API functionality.
Adjust Application Features As Needed: Disable features such as Dynamic Map when they create display limitations.
Summary
The Store Locator app supports a wide range of functionalities, helping both businesses and customers. By enabling users to locate professionals, dealers, or products effortlessly and providing submission capabilities for new dealers, the app not only streamlines operations but also enhances customer engagement. Refer to the app's settings for a detailed configuration guide.