Installing Stockist Store Locator

To install your store locator on your website, you’ll just need to copy and paste a small snippet into the source of one of your site’s pages.

We have specific instructions for the most popular platforms:

If you’re not using a platform listed above, you can follow the general steps below. If you run into trouble, consider asking your web developer to help with this step, or feel free to reach out and we’re happy to assist.

Installation steps

1. Copy the app snippet

Visit the Installation > Embed code page of the app dashboard where you'll find the code snippet for your map. Click the code to select it, then right-click and select Copy:

If you installed our Shopify app, you may need to click Show manual installation steps to see the code.

2. Create a new page on your site

Optionally, you can create a new page on your site to hold your store locator. We recommend doing so, as customers often expect to find a dedicated page for this purpose, but it's not required. If you choose, create a new page using your site's admin panel. If you need to pick a type of page, look for a "content page" or "static page" option. If in doubt, choose the option you'd use to add an "About Us" page.

3. Identify how to add HTML to your site

Different platforms have different ways to add custom code. Some that we've seen are:

  • A Show HTML or View Code button that will allow editing a page's code directly
  • An Embed or Custom code section/block that you can add to your page

You may want to check your platform's documentation for details on adding custom code to your site.

4. Paste the code

Once you've identified how to add custom code to your site, you should be able to paste in the code you copied in step (1).

If your platform has a Show HTML or View code button, you'll need to activate it before pasting the code into your page. Otherwise, the code will just show up as normal text on the page.

5. Customizing your page (optional)

If you're familiar with HTML, note that you can optionally change the following:

  • You can add other elements above or below the locator (e.g. a page heading) without modifying the code
  • You can replace the contents of the <div> element with a custom loading message or icon; your loading message will automatically be replaced once the locator has loaded

If you run into any difficulty, please feel free to get in touch and we're happy to assist.