Installing The Locator

This guide covers how to install and customize our locator on your site.

The StoreLocators Map allows customers to search for your products in nearby stores. They enter their location, see real-time inventory at supported retailers, and get directions.

An example of how our locator map looks with real-time inventory coverage at our top supported retailers.

By default, the locator inherits the fonts on the page you add it to unless you override them.

Shopify Installation

Installation instructions can be found within the Install tab of the StoreLocators Shopify App. Don't have the app installed? Please find the Shopify app listing here.

Customizing the way the locator looks can be done directly from the Shopify Theme Editor by clicking on our StoreLocators Map app section once it's applied to a page and adjusting the settings in the panel that appears. If you have questions, reach out to Anthony, our Customer Success Manager, ([e-mail]).

Script Installation (Headless)

Basic Installation

We will provide you with the initial script that will look like this:

<script defer="defer" src="//cdn.storelocators.com/locator/js/locator-stable.js"></script>
<link href="//cdn.storelocators.com/locator/css/locator-stable.css" rel="stylesheet"></link>
<script>
window.storeLocatorsConfig = {
  customerId: "YOUR_CUSTOMER_ID_HERE",
}
</script>
<div id="storelocators_root"></div>

That's it. Paste the initial script we send you into your page and the store locator appears in that <div>.

Although our script is customizable with the options below, please do not change the customerId in the initial script we send you, as this is how your locator pulls in the products associated with your account.

How it works

The script file loads our store locator code from our servers.

The CSS file styles how it looks.

The config object is where you tell the script which store locator to load (using your customerId) and how to customize it.

The <div> is where the locator actually appears on your page.

Configuration Options

Style customization

window.storeLocatorsConfig = {
  customerId: "YOUR_CUSTOMER_ID_HERE",
  style: {
    contrastColor: "#f00",
    background: "#fafafa",
    stickyHeaderHeight: "100px"
  }
}

Common style options:

• contrastColor - Color of buttons, links, interactive elements

• background - Page background color

• stickyHeaderHeight - Height of sticky header (if your site has one, helps prevent overlap)

Copy customization

Customize any text the locator displays:

window.storeLocatorsConfig = {
  customerId: "YOUR_CUSTOMER_ID_HERE",
  copy: {
    getDirections: "Find us",
    noLocationsFound: "Sorry, we're not in your area yet",
    callStore: "Phone"
  }
}

All copy options

Replace any of these default texts with your own:

copy: {
  noLocationsFound: "We are unable to find any units in your area",
  filteredAwayResults: "You have filtered away all results",
  optionDisabled: "No products with this option in stock",
  optionUnselected: "Show products with this option",
  optionSelected: "Remove products with this option",
  callForAvailability: "Call for availability",
  getDirections: "Get Directions",
  checkingAvailability: "Checking availability",
  storeInformation: "Store Information",
  directions: "Directions",
  callStore: "Call Store",
  close: "close",
  storeHours: "Store Hours:",
  showAllUnitsInStock: "Show All Units In Stock",
  productInStock: "product in stock",
  productsInStock: "products in stock",
  productDisplayed: "product display",
  productsDisplayed: "products displayed",
  filterApplied: "filter applied",
  filtersApplied: "filters applied",
  filterProducts: "Filter Products",
  showingResultsFor: "Showing results for",
  showingXXXStoresNear: "Showing STORE_COUNT stores near",
  enterYourPostalCode: "Enter your postal code",
  clearFilter: "Clear Filter",
  applyFilter: "Apply Filter",
}

Full example

window.storeLocatorsConfig = {
  customerId: "YOUR_CUSTOMER_ID_HERE",
  style: {
    contrastColor: "#1a73e8",
    background: "#ffffff",
    stickyHeaderHeight: "80px"
  },
  copy: {
    getDirections: "Find Us",
    noLocationsFound: "Not in stock near you",
    callStore: "Call Us"
  }
}

Troubleshooting

If you have questions or run into any issues with the information provided on this page, reach out to Anthony, our Customer Success Manager, ([e-mail]) and he will help you get everything configured correctly.