Customizing the locator page on Shopify

If you're using our Shopify app, we'll automatically add a new Store Locator page to your shop when you install the app. You can customize this page by changing the title or URL, or by adding extra content above or below the locator. However, we recommend following the steps below to ensure your locator keeps working smoothly.

If you're worried about possibly breaking things, feel free to email and we're happy to help.

Changing the page title or URL

The locator uses a normal Shopify page (just like an "About Us" page), so you can change the page title or URL through your Shopify admin:

1. Open your Shopify admin
2. In the left menu, click Online Store > Pages, then find the Store Locator page in the list and click it

3. To edit the page title, you can change the text in the Title field:

   

4. To edit the URL, click Edit website SEO, then update the URL and handle field:

   

   

   
   

5. Click Save to update the page:

   

If you're using a translation app on your store, you can likely edit the page title within that app to change it for each language.

Adding content above the map

The standard Shopify page editor can be used to customize the page. However, it tends to break things if you attempt to make edits right near where the locator is shown. This may cause your new content to be hidden when the locator is displayed, or might even break the locator entirely.

You can avoid problems by following these steps:

1. Open the Page editor in your Shopify admin (Online Store > Pages > Store Locator)

2. Click the Show HTML button - it looks like <> and is to the right of bold/italic/etc:

   

3. You should see now the HTML code that loads the locator. Copy the following code and paste it at the very beginning of the textbox, before the other code:

   
   

   <p>Your content here</p><p></p>

   It should look like:

   

4. Click the Show HTML button again to return to the formatted view
5. You can now edit the line that says Your content here (including adding more lines), but please avoid making changes below that

Adding content below the map

The process to add content underneath the locator is similar to the steps above, but with slightly different code:

1. Open the Page editor in your Shopify admin (Online Store > Pages > Store Locator)

2. Click the Show HTML button - it looks like <> and is to the right of bold/italic/etc:

   

3. You should see now the HTML code that loads the locator. Copy the following code and paste it at the very end of the textbox, after the other code:

   
   

   <p></p><p>Your content here</p>

   It should look like:

   

4. Click the Show HTML button again to return to the formatted view
5. You can now edit the line that says Your content here (including adding more lines underneath), but please avoid making changes above that line

Fixing a broken locator

Most people don't have issues editing the page, but it's possible that the Shopify editor might mangle things in the course of making changes. If this happens, don't worry! It's simple to get the locator working again:

1. Open the Page editor in your Shopify admin (Pages > Store Locator)

2. Click the Show HTML button - it looks like <> and is to the right of bold/italic/etc

   

3. Copy all of the code you see and save a copy somewhere (e.g. on your computer by copying and pasting into Notepad)
4. Delete all of the code in the textbox, and leave the tab open
5. Open the Embed code page of your Stockist dashboard, and copy the code in the grey box. If you don't see any code immediately, click Show manual installation steps to show it.
6. Paste the code you just copied into the Shopify page editor you left open in step #4
7. Save the page

Your locator should now be showing again as it originally was (without any further edits you may have made to the page). You can now re-attempt to make your changes, or feel free to email us and attach the file you saved in step #3 and we're happy to help make the necessary changes safely.