Shop Circle KB

Appearance

Getting started with Store Locator ​

This section walks you through the essential steps to get Store Locator up and running on your Shopify store, from selecting a plan to displaying your map to customers.

Step 1: Select a plan ​

  1. Navigate to Apps > Store Locator > Pricing in your Shopify admin.
  2. Select the plan that fits your needs.
  3. Approve the charge when prompted by Shopify.
  4. Find out more about our plans on the Store Locator pricing page.

Step 2: Add your Google Maps API key ​

  1. Go to Apps > Store Locator > Settings > Google Maps API key.
  2. Enter your Google Maps API key and save. Without a valid API key, the map will not render.
  3. For details, see Add Google Maps API to Store Locator.

Step 3: Add your locations ​

  1. Go to Apps > Store Locator > Locations and click Add location.
  2. Fill in the location details including name, address, contact information, and working hours.
  3. Click Save.
  4. Repeat for all your store locations, or bulk import your locations via the Import button on the Locations page.
  5. For details, see Add & Edit Store Locations.

Step 4: Add the App Block to your theme ​

Store Locator uses Shopify's Online Store 2.0 app blocks.

  1. In your Shopify admin, go to the Online Store and click Edit theme.
  2. Navigate to or create the page where you want the map to appear.
  3. Add the Store Locator app block from the block library and save your theme changes.

INFO

The App Block setup is also easily available in Apps > Store Locator (Home page).

  • If you freshly installed the app, you will see the Setup guide, where one of the required actions is the Add app block step. With one click the block is added, and then it is up to you to customize it.
  • The status of your blocks is always visible on the Homepage, even after the initial setup. Click the Configure buttons at the top of the page to customize.

Step 5: Adjust the Proxy page ​

Store Locator still creates its own proxy page that can be included in your store's navigation. We recommend you adjust it by following these steps.

  1. Go to Apps > Store Locator > Settings > Proxy URL. Copy the app proxy path shown there (for example /apps/store-locator).
  2. Go to Content > Menus and select a preferred menu (for example, Main Menu).
  3. Click Add menu item.
  4. Write a label (for example, "Locations") and paste the copied URL in the Link field.
  5. Select Save. Your proxy page is now set as a separate tab.

INFO

If you customize the app proxy subpath in Shopify (App settings > App proxy > Customize URL), update Settings > Proxy URL to match. If the two don't match, Store Locator shows a critical banner and your storefront map won't load.

Step 6: Customize your map ​

  1. Go to Settings > Appearance & Search to customize your map's style, layout, wording, initial position, and search behaviour, plus how location cards and location lists look.
  2. Go to Settings > Google services to enable Google-powered features such as Autocomplete, My Location, and search by name.
  3. For details, see Customizations & Styling.

Step 7: Getting help ​

Contact our support team via in-app live chat. If you would like to discuss the app with our Product Manager, book a call here.