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. You can customize this page by adding extra content above or below the locator, but we recommend you follow 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.

Adding content to the page

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 usually avoid problems by following these steps:

  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. 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 locator

The process to add content underneath the locator is similar to above, with the following exceptions:

  1. In step #3 above, the code to copy is:

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

    And you should add it after the existing code, which will look like:

  2. After adding the code, be sure not to edit above the Your content here 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

  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.