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.
Setup a locator app
Defining global contents
Automatic bulk import
Adding an interface
Map icons & filter
Integrate it into website
Adding UA code
Setup analytics dashboard
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.
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.
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.
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:
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:
Copy and paste that code into your existing website and you're done!