Installing Stockist on a modern Shopify theme

Stockist is fully compatible with Shopify, a great platform for building your online store. You can install our Shopify store locator app and then add the map as a built-in block when customizing your theme.

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 reliable way to display your map, and it's also flexible since you can add other content like text or images above or below the map.

If your theme doesn't support Online Store 2.0, you can also install Stockist directly in the content of a specific page.

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

Step 1: Add your map to a theme template

1. In your Shopify admin, click on Online Store:

   

2. Next to the theme where you want to add Stockist, click Edit theme:

   

3. Click Home page at the top of the theme editor to open the template selector:

   

4. Choose the template where you'd like to add Stockist. If you want your map to live on a standalone page, you'll typically want to create a new template under "Pages". However, you can also add the map to an existing template (e.g. for an About Us page) or to your homepage. To create a new template, click Pages > Create template:

   

5. If you're creating a new template, name it something memorable (e.g. store-locator) and choose the template to use as a starting point (typically Default page), then click Create template:

   

6. In the left sidebar, hover over the Page or Page content section (the name varies by theme) and click the eyeball icon to hide it:

   

7. Under Template, click Add section to add a new content block, select Apps, and choose Stockist Store Locator from the list:

   

   If you click "Add section" under "Header" or "Footer", you won't see Stockist as an option — the map can only be added to the main section of the page, not the header or footer.

   Don't see Stockist in the list? Check Installation > Shopify installation in Stockist to confirm if a permissions update is needed, or see the manual option at the bottom of this page.

8. Your store locator should now be appearing on the page:

   

9. If you'd like to customize the page further, you can add more content blocks above or below the map. You can also click on the Store Locator section to edit the width of the map and add spacing above or below the locator.

10. Click Save in the top-right corner to save your theme:

    

Step 2: Assign the template to a page

If you created a new template under "Pages" (as opposed to editing the homepage or another existing page), you'll also need to update a page to use this template so customers see the custom content on your website.

Exit the theme editor if it's still open, then follow these steps:

1. In your Shopify admin, open Online Store > Pages:

   

2. Click on the page where you'd like to show the custom content (you can also click Add page to create a brand new page instead):

   

3. Under Template, choose the template that you added the map to:

   

4. Click Save to update the page
5. Click View to preview the page on your site and confirm the content shows up as expected

The steps above should get your map showing up on a new page of your site, and make it possible to customize the map page by adding extra content. If you run into any trouble, please drop us a note through the Support page of Stockist and we're happy to assist!

Manual installation option

If you don't see Stockist in the Apps list, an alternative option is to add the map manually:

1. In Stockist, open Installation > Shopify installation
2. Find the Embed code option and click the clipboard icon to copy your map's embed code
3. In Step 7 of creating the template, add a Custom Liquid or Custom HTML section (the name varies by theme) instead of the Stockist section
4. Paste the map's embed code into the custom code block
5. Continue with Step 8 of the template installation