Customization

The widget can be fully customised to match your brand and the styling applied on your product pages.

You can do this in the NearSt dashboard, or by overriding your account settings in the button HTML.

Customization options

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

Attribute	Description
`data-barcode`	Required. 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-key`	Required. NearSt for Brands license key.
`data-theme-color`	The theme color, used across buttons and links in the widget. Any CSS color value.
`data-cta`	The text to show on the button. Allowed values: `shop_nearby` (default) - "Shop nearby" `pick_up` - "Pick up today"
`data-locale`	The language to display the button and dialog UI in. Allowed values: `en_US` (default) `nl_NL`
`data-show-count`	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-cutoff`	Maximum distance to show stores, in km. Defaults to `200`. Note that this is only taken into account after the user has added their location.
`data-low-stock-threshold`	The stock level below which the item is considered low stock. Defaults to `3`. Set to `0` to disable the `Low stock` label.

The following CSS classes are available to style the experience:

Selector	Description
`.nearst-locator-button`	Button 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-svg`	Store icon shown on the button. Can be hidden if not desired.
`.nearst-locator-button-count`	Targets the `(X stores)` section of the button.
`.nearst-locator-modal`	The modal window backdrop.
`.nearst-locator-modal-inner`	The modal window inner section. Can be used to modify shadow and border radius style.

If you'd like to further customise the styling of the widget or the modal, we recommend using the Locator API to build your own experience.