Installing Stockist on a Shopify 2.0 Theme Template

Stockist is fully compatible with Shopify, 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 usually won't need to follow the steps below. Billing and login will also be fully integrated with your Shopify account.

The steps on this page are for themes that support Shopify's Online Store 2.0, which lets you drag-and-drop multiple sections and blocks to build a page template without code. This approach is flexible, since you can add other content like text or images above or below the map. However, it's a little more involved to set up. If you don't need any extra content on the page, an easier option is to install your Stockist map directly in the content of a specific page.

To add your locator to a Shopify Online Store 2.0 theme template, you can follow the steps below:

Copy your map embed code

To add your map to a page in Shopify, you'll first need to grab your map's Embed code - a small bit of HTML 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)

Adding the map to a theme template

Next, we'll set up a new theme template and install the map there:

  1. In your Shopify admin, open Online Store > Themes in the left menu
  2. Click Customize next to the theme where you'd like to add the new template:
  3. In the dropdown at the top, choose the template where you'd like to add the map. You can choose an existing template (e.g. a Page template, or the Homepage template), or can create a new template if needed:
  4. Note: If the left panel says "This page doesn't have any sections", your theme may not support Shopify's Online Store 2.0. In this case, you can install the map directly into a specific page, or else could consider editing your theme's Liquid code to create a new page template with the map (this is more complex).
  5. 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):
  6. 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:
  7. Click Save to update the template:
  8. 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. Under Online Store > Pages, find your Store Locator page (or add a new one) and ensure the Theme template of the page matches the template you edited above:
  9. If you created a Page template and the map code was already included on the page, you'll also want to remove the map code from the page content. The map can only load once on any particular page, so having the code included twice (once from the template, and once from the page content) could cause issues. If there's no other page content you need to preserve, you can click the Show HTML button above the page content (it looks like <>) and then delete all the HTML code (i.e. clear the textbox):

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