Step 1: Add Store Location
Go to Stores sections ➜ Get started by clicking Add Store
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.
After entering the exact address of the store, you can correct the location on the map in the last part by drag and drop the red pin.
After everything is done, remember to click Save and Publish to Shop!
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. General Tab:
Firstly, enable Store Locator.
After that, please update the API Key to keep the app working properly for your site. (We recommend you to create your own API)
➥ Get your own API Key with our following video guide: https://www.youtube.com/watch?v=XXF1SiNJaKg
➥ Paste the API you just created in the API Key box ⇒ Click Save.
You can set the Zoom Level of google map. The default value is 12.
2. Search Tab:
Enable Auto detect Location to detect the location of customers automatically when visiting the site.
To configure the search feature on the frontend, you can go through the fields: 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.
Other fields allow you to change the style of the search section on the frontend.
3. List & Map Tab:
The Store List section will display the search result and the Map section will show the location of stores on google map (with a popup to show the detail of the store).
In these sections, you can configure what information of the store will be shown on the store list and store popup. You also can change the style of these sections.
4. Translation Tab:
This section allows you to change any text label which is displayed on the frontend. You also can translate them into other languages you want.
Remember to click Save and Publish to Shop after you have finished all the settings/ changes.
5. Advanced Customization:
This section is for developers. Let your developers know which way to edit files to customize our Store Locator app.
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.