Product Locator
Locator widget


Customization options

The following HTML attributes can be specified on any <div> with the class nearst-locator-button to customise behaviour:

data-barcodeRequired. The barcode of the product to look up. This is generally a GTIN/EAN/UPC code of between 8 and 13 digits. Learn more about our barcode formats (opens in a new tab).
data-license-keyRequired. NearSt for Brands license key.
data-theme-colorThe theme color, used across buttons and links in the widget. Any CSS color value.

The text to show on the button. Allowed values:

  • shop_nearby (default) - "Shop nearby"
  • pick_up - "Pick up today"

The language to display the button and dialog UI in. Allowed values:

  • en_US (default)
  • nl_NL

Whether or not to show the count of stores on the button. If true (default), the button will show a text in the form of "Shop nearby (9 stores)" in certain situations, if the location of the user is known or there are many stores selling the item nearby.
Note that showing the count on the button uses up API calls from your API request quota.

data-distance-cutoffMaximum distance to show stores, in km. Defaults to 200. Note that this is only taken into account after the user has added their location.

Styling the button and widget

The following CSS classes are available to style the experience:

.nearst-locator-buttonButton itself. If you want to make the button look more like a link, remove the background-color and set a color that is not white.
.nearst-locator-button-svgStore icon shown on the button. Can be hidden if not desired.
.nearst-locator-button-countTargets the (X stores) section of the button.
.nearst-locator-modalThe modal window backdrop.
.nearst-locator-modal-innerThe modal window inner section. Can be used to modify shadow and border radius style.