Step-by-Step example
Simple example on how to set up a store-locator
In this step-by-step guide you will learn how to setup, manage and integrate a store-locator with the Nearest! location management platform. For a better understanding it is recommended to start with the term definitions before. If you're not familiar with our dashboard please have a look at the dashboard section. In every section of this guide you'll find the link to the additional information in the docs.
Described scenario: We have multiple stores which are stored in a Google Docs sheet with the following information: Name, address, opening hours, free parking, brand and phone. We want to add this static information into an interactive store-locator to our website and synchronize the data regularly.
- 1.Setup a locator app
- 1.Adding elements
- 2.Defining global contents
- 2.Adding locations
- 1.Manual creation
- 2.Automatic bulk import
- 3.Scheduled synchronization
- 3.Adding an interface
- 1.Customizing UI
- 2.Map icons & filter
- 3.Integrate it into website
- 4.Analytics
- 1.Adding UA code
- 2.Setup analytics dashboard
In the first step we will register to Nearest! location management platform. Then we will add a new locator with New locator by adding the locator name MyStores Locator and clicking create.
Under Locations > Elements & filter we can configure our custom elements. As described above our data source has the following information available: Name, address, opening hours, free parking, brand and phone.
By default the location name element is already added.
The address element is a required element so it's added already by default.
Add a new element by clicking Create Element and choose openingHours as element type.
Free parking sounds like it is a boolean value and it would be nice to filter for that value. We add an element again, choosing bool as type and enable the filterable option.
Brand sounds like every location can be of one or multiple brand values so we will choose select as the data type and we will add all available brand values to the element. It would also be helpful to filter for that element so let's enable the filterable option again.
Adding a select element with values and set filterable
By default the phone element is already added.
In contents & texts we can now add some information to the app. It is recommended to add at least one keyword to improve the user experience with better understanding of the interface. All other contents can be added or edited later.
Now we will add some data to our app. First we will add a location manually to check if all elements are added and configured correctly.
Click Locations > Add. First you need to add an address or coordinates. By clicking preserve you can drag/drop the marker on the map without changing the address field. This should be done if you want to add the marker to a more precise position without changing the postal address. After that you can fill in the element information for that location.
Now that we checked the manual creation of a location and saw that everything is correct we can bulk import all locations from our Google Docs file.
You need to share your custom Google Docs file with [email protected] before importing to Nearest! Learn more ...
Go to Locations > Import & Sync and create a new Import. Change the type to Google Docs and enter the Google DocsID for the file.
Now we need to connect the data from the sheet with our elements with the Element Connector.
- #1st step
- #2nd step
- #3rd step
Ok, the initial import is done but what if the data changes in that sheet? We need to synchronize our app with that data regularly by easily following the next steps:
- #1 step
- #2 step
- #3 step
Now that we added data to our app and configured synchronization it's time to generate an interface and a view to our data.
In Interface > Web-app > User Interface we can change the colors to adept our corporate identity. Then we can upload our logo.
Wouldn't it be great if the marker icon could reflect the brand of the location? Sure it would so let's do that in a few simple steps. Go to Interface > Web-app > Map & Icons: We first should change the default icon by clicking Upload. Add the file and edit Size and Anchor to set correct display settings.
Then click Optional settings > Add Icon to add a new icon rule. Add your icon file and settings and choose Add Condition. Select the brand element and choose the right value for the uploaded icon. Done!
For now we successfully generated our custom store locator. We will know integrate it into our website:
<iframe src="https://yourapp.nearest.place"
height="500"
width="100%"
allow="geolocation"
style="border:none;"></iframe>
Copy and paste that code into your existing website and you're done!
Last modified 3yr ago