Do you have a requirement to display a custom selection of store locations on different pages on your site? There are a few scenarios where this might be useful such as where you have product pages on your website with an accompanying store locator showing which stores stock those products for sale. Essentially, this can be useful in any situation where you have a business need to display a subset of your store list on a particular page on your store of site.
This is achieved using Filters. Filters are a great way to:
- Differentiate between different types of locations (Free WiFi, Kids Clothing, Drive-thru, Showrooms, etc)
- Identify which products or product lines are available at each location
- Show where a specific brand or sub brand can be purchased on one map
We are going to use the Filter functionality to add a Filter to the stores which should be displayed and then set up a modified HTML embed code for the page which loads only the locations matching the Filter that you have defined.
The first step is to add a Filter to the stores that should be shown on the page. You can do this via the Store Editor for each location, just make up a filter name and add it at the bottom of the Store Editor. For example, use a filter name of 'Drive-thru'.
Then, you can use the following custom HTML embed code on the page to show only those stores matching the filter:
<div id="storelocatorwidget" style="width:100%;"><p>Store Locator loading...</p></div>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?libraries=places"></script>
<script type="text/javascript" id="storelocatorscript" data-uid="[YOUR UNIQUE CODE]" data-filters="Drive-thru" src="//www.storelocatorwidgets.com/admin/widget"></script>
The 'data-filters="Drive-thru"' switch tells the store locator to only show the stores with that filter applied.
You can set up as many Filters as you like to give you complete flexibility over which locations are shown on each page. Multiple filters can be used as well - to display any locations with either the 'Drive-thru' or the 'Free WiFi' filters applied, use the following switch: 'data-filters="Drive-thru,Free WiFi"'.