Customization
The widget can be fully customised to match your brand and the styling applied on your product pages.
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:
|
data-locale | The language to display the button and dialog UI in. Allowed values:
|
data-show-count | Whether or not to show the count of stores on the button. If |
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. |
Styling the button and widget
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. |
Missing options?
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.