跳到主要内容

Quick Start

Get your store locator live in under five minutes. This guide assumes you have already installed the app.

Step 1: Add Your Google Maps API Key​

  1. Open the Store Locator Map: SE app from your Shopify admin dashboard.
  2. Navigate to Settings > Google Maps.
  3. Paste your Google Maps API key into the API Key field.
  4. Click Save. The app validates your key automatically. A green confirmation message indicates that the key is active and the required APIs are enabled.
提示

Make sure both the Maps JavaScript API and Geocoding API are enabled in your Google Cloud Console. The app requires both to render maps and geocode addresses.

Step 2: Add Your First Store Location​

  1. Go to Locations in the app sidebar.
  2. Click Add Location.
  3. Fill in the following fields:
FieldDescription
Store NameThe display name shown to customers (e.g., "Downtown Flagship").
AddressFull street address. The app geocodes this to a map coordinate.
PhoneContact number displayed in the store details panel.
HoursBusiness hours shown to customers (e.g., "Mon--Fri 9 AM--6 PM").
  1. Click Save. The location appears on the map preview with a marker at the geocoded position.

Step 3: Embed the Store Locator Widget​

  1. In your Shopify admin, go to Online Store > Themes.
  2. Click Customize on your active theme.
  3. Navigate to the page where you want the locator to appear (e.g., a dedicated "Store Finder" page).
  4. Click Add section or Add block and select Store Locator Map: SE.
  5. Save your theme changes.

Alternatively, you can embed the widget manually by copying the HTML snippet from Settings > Embed Code in the app and pasting it into a custom page or Liquid template.

Step 4: Test the Store Locator​

  1. Open your storefront and navigate to the page with the embedded locator.
  2. Enter a zip code or city name in the search bar.
  3. Verify that:
    • The map centers on the searched area.
    • Nearby store markers appear on the map.
    • Clicking a marker displays the store name, address, phone, and hours.
    • The Get Directions link opens directions in Google Maps.

If everything works as expected, your store locator is live and ready for customers.

Next Steps​

Explore these areas to get more out of Store Locator Map: SE:

TopicDescription
Managing LocationsAdd, edit, and bulk-import store locations.
Customizing AppearanceChange map styles, marker icons, colors, and info window layouts.
Search SettingsConfigure default search radius, unit of distance, and autocomplete behavior.
AnalyticsTrack how customers interact with your store locator.