Brand Guide

Store Locator ​

The Store Locator shows visitors the retail outlets around them, on a map and in a list.

Technical requirements

Check the technical requirements first, especially if your website uses a Content Security Policy.

Display modes ​

The Store Locator can be displayed in 3 ways:

In the page

The Store Locator is displayed as soon as the page loads, for example on a "Where to buy" page.

Modal

Clicking a button opens the Store Locator in a window over your page.

Inline

Clicking a button opens the Store Locator inside your page, in a block you choose.

Your Store Locator is identified by its Store Locator key (STORE_LOCATOR_ID), provided by your Customer Success Manager.

In the page ​

Step 1: load the script ​

Add our script to the pages that display the Store Locator, or to the template used by all your pages:

html
<script type="module" src="https://widget.clic2buy.com/c2b-store-locator.js"></script>

INFO

This is not the same script as the scripts of the other Click2Buy services. If a page also displays other services, load their scripts too.

Step 2: add the Store Locator ​

Add the following tag where the Store Locator should be displayed:

html
<c2b-store-locator id="STORE_LOCATOR_ID" locale="fr-FR"></c2b-store-locator>

Step 3: give it a height ​

The Store Locator takes the full height of its container, so the tag or its parent must have a height:

html
<div style="height: 700px;">
  <c2b-store-locator id="STORE_LOCATOR_ID" locale="fr-FR"></c2b-store-locator>
</div>

Step 1: load the script ​

Add our script to the pages that display the Store Locator, or to the template used by all your pages:

html
<script type="module" src="https://widget.clic2buy.com/c2b-store-locator.js"></script>

INFO

This is not the same script as the scripts of the other Click2Buy services. If a page also displays other services, load their scripts too.

Step 2: add the attributes to your button ​

html
<button
  data-store-locator-id="STORE_LOCATOR_ID"
  data-store-locator-locale="fr-FR"
>
  Find a store
</button>

Visitors close the Store Locator with the close button, the Escape key, or by clicking outside the window. You don't need to add anything else to the page.

Inline ​

Step 1: load the script ​

Add our script to the pages that display the Store Locator, or to the template used by all your pages:

html
<script type="module" src="https://widget.clic2buy.com/c2b-store-locator.js"></script>

INFO

This is not the same script as the scripts of the other Click2Buy services. If a page also displays other services, load their scripts too.

Step 2: add the attributes to your button ​

Set data-store-locator-display-mode to inline, and data-store-locator-inline-container to the CSS selector of the block where the Store Locator should open:

html
<button
  data-store-locator-id="STORE_LOCATOR_ID"
  data-store-locator-locale="fr-FR"
  data-store-locator-display-mode="inline"
  data-store-locator-inline-container="#store-locator"
>
  Find a store
</button>

Step 3: add the container ​

Add the block where the Store Locator should open. It must be on the page when the visitor clicks the button, and must have a height:

html
<div id="store-locator" style="height: 700px;"></div>

Attributes ​

In the page ​

AttributeRequiredDescription
idYesStore Locator key, provided by your Customer Success Manager
localeNoLanguage and country of the Store Locator, for example fr-FR or en-GB. Default: fr-FR

Any element with a data-store-locator-id attribute opens the Store Locator when clicked: a button, a link, an image, etc. Buttons added after the page has loaded (for example by a JavaScript framework such as React or Vue) are detected automatically.

AttributeRequiredDescription
data-store-locator-idYesStore Locator key, provided by your Customer Success Manager
data-store-locator-localeNoLanguage and country of the Store Locator, for example fr-FR or en-GB. Default: fr-FR
data-store-locator-display-modeNomodal (default) or inline
data-store-locator-inline-containerIn inline modeCSS selector of the block where the Store Locator opens, for example #store-locator

Store Locator design ​

The Store Locator is hosted by Click2Buy, and we configure its design (shapes, colors, fonts, etc.). To match it to your brand guidelines, contact your Customer Success Manager.

Tracking ​

Click2Buy tracks Store Locator usage automatically: statistics are available in our back office (ask your Customer Success Manager for more details).

Troubleshooting ​

The Store Locator is empty or cut off: check that its container has a height. See step 3 of In the page or Inline.

The Store Locator doesn't open when you click the button: open the browser console and look for an error starting with [c2b-store-locator]:

ErrorFix
Inline container selector not foundAdd a data-store-locator-inline-container attribute to the button.
Inline container not found for selector "…"Check that an element matching the selector is on the page when the visitor clicks the button.

Still stuck? Contact us or your Customer Success Manager.