Store locator theme example

Example of customizing the Store Locator module using handlebars JS templates

Setup

Supported module

Theme customization of the Store Locator is only available in our newest version of the Module. When adding a Store Locator to the page within the Site Builder, make sure that you enable this under the module options. It is located under "Advanced" and you will set "Location Finder Version" to "v2".

Styling

The Store Locator module has limited styling that can be overridden via your own CSS rules. Most of the main elements (location list, map, search bar) are positioned on the page via absolute positioning. You can set your own positions for these elements. Examples of this include positioning the Location List on the right side versus the left, or overlaying the location list on top of the Map area.

Custom map pins

Below is an example of custom CSS that can be used to add you own custom map pin icon/images.

.sb-marker {
width: 45px;
height: 45px;
top: -45px;
left: -22px;
background-size: cover;
background-image: url(/img/upload/pin.png);
}
.sb-marker:hover,
.sb-marker.sb-marker-selected {
background-image: url(/img/upload/pin-selected.png);
}
.sb-marker.sb-marker-currentlocation {
background-image: url(/img/upload/pin-current.png);
}

Offset for the map pins

Our base styles for the store locator add some spacing inside the map on "desktop" view that "push" the pins displayed to the right to make room for the location list on the left.

You can override these values by adding your own CSS. This example shows our defaults that you can modify to your liking:

.sb-map-bounds {
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 390px;
}

You can also set different bounds rules using CSS media breakpoints.

Note: our system reads these CSS padding values and applies them in javascript. So only use padding rules in this CSS declaration. Other CSS rules will not be applied (i.e. colors, margins, etc).

Custom templates

Add the handlebars library

This should be the first script before you any of the handlebars templates. This will server the handlebars library from a CDN.

The templates that control the location finder are powered by Handlebars.js. The handlebars library and the handlebars templates that you add need to come before the Store locator module on the page. These are normally added in the Header Template of a Custom Theme, or as an HTML Code module added above the Store Locator module on a page.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>

Template examples

Override the location item template

Below is an example of customizing the "location item" that is displayed next to the map for each location that is returned by the visitor search.

<script id="template-location-item" type="text/x-handlebars-template">
{% raw %}
<div class="sb-location">
<div class="sb-location-name">{{location.location_name}}</div>
<div class="sb-location-distance">{{distance}} mi</div>
<div class="sb-location-address">{{location.street}} {{location.street2}}<br>{{location.city}}, {{location.state}} {{location.postal_code}}</div>
<div class="sb-location-hours">Open Today: {{location.todays_hours_of_operation}}</div>
<div class="sb-location-phone"><a href="tel:{{location.phonemap.phone}}">{{location.phonemap.phone}}</a></div>
<div class="sb-location-links">
<span class="sb-location-link sb-location-link-view-location"><a href="{{location.location_url}}" rel="noopener noreferrer" target="_blank">View Location</a></span>
<span class="sb-location-link sb-location-link-get-directions"><a href="https://www.google.com/maps/dir/?api=1&amp;destination={{location.street}} {{location.street2}} {{location.city}}, {{location.state}} {{location.postal_code}}" rel="noopener noreferrer" target="_blank">Get Directions</a></span>
</div>
</div>
{% endraw %}
</script>

Override the "infowindow" template

Below is an example of customizing the "info window" that is displayed when you click or select a Location from the Location List in the Store Locator.

<script id="template-location-infowindow" type="text/x-handlebars-template">
{% raw %}
<div id="infoWindow">
<div class="sb-location-infowindow">
<div class="sb-location-distance">{{distance}} mi</div>
<div class="sb-location-address">{{location.street}} {{location.street2}}<br>{{location.city}}, {{location.state}} {{location.postal_code}}</div>
<div class="sb-location-hours">Open Today: {{location.todays_hours_of_operation}}</div>
<div class="sb-location-phone"><a href="tel:{{location.phonemap.phone}}">{{location.phonemap.phone}}</a></div>
<div class="sb-location-links"><span class="sb-location-link sb-location-link-view-location"><a href="{{location.location_url}}" rel="noopener noreferrer" target="_blank">View Location</a></span><span class="sb-view-location" rel="noopener noreferrer" target="_blank"><a href="https://www.google.com/maps/dir/?api=1&amp;destination={{location.street}} {{location.street2}} {{location.city}}, {{location.state}} {{location.postal_code}}" target="_blank">Get Directions</a></span></div>
</div>
</div>
{% endraw %}
</script>