Shopify Integration
Store Locator Map: SE is built specifically for the Shopify platform. This guide explains how the app connects with your Shopify store, syncs location data, and integrates with Shopify's theming system.
Online Store 2.0 Support
Store Locator Map: SE fully supports Shopify's Online Store 2.0 architecture. This means you can add the store locator to any page of your theme using the native theme editor -- no code editing required.
App Blocks
The app registers dedicated app blocks that appear in the Shopify theme editor alongside your other theme sections and blocks.
| Block | Description |
|---|---|
| Store Locator Map | Full-featured store locator with map, search bar, and results list. Suitable for a dedicated "Find a Store" page. |
| Store Locator Compact | A condensed version designed for sidebars, footers, or secondary pages. Displays a search input and a mini-map. |
To add an app block:
- In your Shopify admin, go to Online Store > Themes.
- Click Customize on your active theme.
- Navigate to the target page template.
- Click Add section or Add block.
- Select the desired Store Locator Map: SE block from the Apps category.
- Configure the block settings (map height, default zoom, color scheme) in the right-hand panel.
- Save your changes.
Legacy Theme Support
For themes that do not support Online Store 2.0, you can embed the store locator using the HTML snippet provided in Settings > Embed Code within the app. Paste this snippet into any Liquid template or custom page.
Shopify Locations Sync
Store Locator Map: SE can import and synchronize locations directly from your Shopify admin.
How Sync Works
- Navigate to Settings > Shopify Sync in the app.
- Click Import Shopify Locations. The app reads all active locations from your Shopify account.
- Each Shopify location is mapped to a store locator entry using the following fields:
| Shopify Field | Store Locator Field |
|---|---|
| Location name | Store Name |
| Address (line 1, line 2, city, province, zip, country) | Full Address |
| Phone | Phone |
| -- | Hours (must be set manually after import) |
- New locations are added automatically. Existing locations (matched by name and address) are updated.
Automatic Sync
Enable Auto-Sync in the settings to keep your store locator in sync whenever you add, update, or remove a location in Shopify. The app listens for Shopify location webhooks and applies changes within minutes.
Auto-Sync only updates fields that originate from Shopify. Any custom fields you have added in the store locator (such as business hours, tags, or custom descriptions) are preserved during sync.
Theme Integration
CSS and Styling
The store locator widget inherits your theme's base typography and color variables by default. You can override these styles in the app's Appearance settings or by adding custom CSS in your theme's assets directory.
Performance
The app loads its JavaScript and map assets asynchronously, so it does not block your theme's initial page render. Map tiles and marker data are fetched only when the store locator section enters the viewport.
Multi-Language Stores
If your Shopify store uses multiple languages via Shopify Markets or a translation app, the store locator respects the active locale. UI labels (such as "Search", "Get Directions", and "No results found") are translatable through the app's Translations settings panel.
Next Steps
- Google Maps Integration -- Configure the Google Maps platform for your store locator.
- Analytics -- Track how customers interact with the locator on your Shopify store.