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:
- BigCommerce installation guide
- Drupal installation guide
- Shopify installation guide
- Squarespace installation guide
- Wix installation guide
- WordPress installation guide
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.
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.