Installing Stockist Store Locator on Shopify

Stockist is fully compatible with  Shopify e-commerce, a great platform for building your online store.

If you haven't signed up with Stockist yet, we recommend installing our Shopify store locator app. It'll automatically add a new Store Locator page to your shop, so you won't need to follow the steps below. Billing and login are also fully integrated with your Shopify account.

Or, follow the steps below to add your locator to a Shopify page manually.

Copy your map embed code

To add your map to a different page in Shopify, you'll need to grab your map's Embed code - a small bit of code that loads the map into the page. You can use these steps:

  1. Open your existing Stockist account and click Installation > Embed code in the left menu
  2. If you set up our Shopify app, click the Show manual installation steps link:
  3. Click in the grey code box to select the embed code:
  4. Right-click on the code and select Copy from your browser's right-click menu, or press Ctrl+C (or Cmd+C on Mac)

Next, follow the steps in one of the sections below to add the code to your Shopify site, depending on where you'd like to add the map.

Add the map to a Page 

The simplest approach if don't need to add extra content above or below the map is to add the map code directly to a Shopify Page:

  1. First, follow the Copy your map embed code steps above
  2. Open the Shopify admin for the shop where you'd like to add the locator, and navigate to Online Store > Pages
  3. Click Add Page
  4. Click the Show HTML button - it's to the far right of bold/italic/etc. and looks like <>:
    When in HTML mode, the formatting buttons (bold, italic, etc) should disappear.
  5. Once Show HTML is enabled, paste in the code you copied in step 2 (right click, then select Paste):
  6. Add a page title, then click Save at the bottom to save the page.

After following the steps above, you should be able to view the new page and see your store locator. If you need to customize the page (e.g. by adding content above or below the locator), see our article on  customizing your store locator page on Shopify.

Adding the map to a theme with Sections

If your theme is compatible with Shopify's Online Store 2.0 (meaning it supports the newer Sections and Blocks layout system), you can alternatively add your locator as a Block within a template. This provides you with the flexibility to add extra content to the page by adding extra sections and blocks above or below the map.

  1. First, follow the Copy your map embed code steps above
  2. In your Shopify admin, open Online Store > Themes in the left menu:
  3. Click Customize next to the theme where you'd like to add the map:
  4. In the dropdown at the top, choose the template where you'd like to add the map (e.g. a Page template, or the Homepage template), or create a new template if needed:
  5. Note: If the left panel says "This page doesn't have any sections", your theme may not support Sections - you'll need to use one of the other approaches listed in this article:
  6. In the left panel, click Add section, then look for a section or block called Custom Liquid or Custom HTML (the exact name may vary depending on your theme):
  7. Once the new section/block is added, find the Custom Liquid (or Custom HTML) field in the right column, and paste in your Stockist embed code:
  8. Click Save to update the template:
  9. If you edited the template for a Page (as opposed to the homepage or a collections page), make sure the template has been assigned to a Page in your shop. Find your Store Locator page (or add a new one) and ensure the Theme template of the page matches the template you edited above:

As always, just drop us a note if you run into any trouble and we're happy to assist.