Step 1: Add Store Location
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.
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:
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:
1. Google Map API section
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.
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:
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
Now, let us instruct you on how to show Store Locator on your website’s main menu:
1. Go to Online Store ➜ Navigation ➜ Click Main Menu
2. At the Main Menu ➜ 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.
