Installing Stockist on a Shopify Page
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.
If your theme supports Shopify's Online Store 2.0, another approach is to add your store locator map to a theme template in Shopify. This allows more flexibility: for example, you can add additional content blocks to the page above or below the map. However, the setup steps for that approach are a little more involved.
To add your locator to a Shopify page manually, 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:
Open your existing Stockist account and click Installation > Embed code in the left menu
If you set up our Shopify app, click the Show manual installation steps link:
Click in the grey code box to select the embed code:
- Right-click on the code and select Copy from your browser's right-click menu, or press Ctrl+C (or Cmd+C on Mac)
Add the map to a Page
Next, we'll paste the HTML code for the map into a page in Shopify:
Open the Shopify admin for the shop where you'd like to add the locator, and navigate to Online Store > Pages:
To add the map to an existing page, click the page in the list. To create a new page, click Add Page:
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.
Once Show HTML is enabled, paste in the code you copied in step 2 (right click, then select Paste):
- Add a page title, then click Save to save the page.
The map won't appear inside the Shopify dashboard, but should show up when clicking View page to see the page on your live site.
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. Or, if you'd like the flexibility to add other theme blocks to the page, consider the other installation approach of adding your map to a theme template.
Troubleshooting
If you've followed the steps above but you don't see the map or its loading message showing up on the page, the most common cause is an issue with your site's theme templates. We have troubleshooting steps in the following article:
My map page on Shopify is blank or has the wrong content
As always, just drop us a note if you run into any trouble and we're happy to assist!