Documentation

Everything you need to run Storemapify

Storemapify is a Shopify app that adds an interactive store locator to your storefront. Customers search by location or name, see distances, view hours, and get directions.

1. Setup & getting a Google Maps API key

A Google Maps API key is required to display the interactive map and enable address autocomplete. Without one, the app shows a setup warning in the theme block instead of the map.

  1. Create a project at Google Cloud Console.
  2. Enable the Maps JavaScript API, Geocoding API, and Places API.
  3. Create an API key under Credentials.
  4. Restrict it to your storefront domain (recommended).
  5. Paste the key into Storemapify → Settings and save.

Note: The key is also synced to a shop metafield the theme extension reads automatically — no need to re-enter it in the theme editor.

2. Adding a store — fields explained

Go to Stores → Add store. The form has four sections: Basic Information, Contact Information, Working Hours, and Store Options.

FieldRequiredNotes
Store name, address, city, state, country, postal codeYesShown on result cards and map tooltip
Latitude / longitudeYesMust be exact — positions the map marker
PhoneYesRendered as a tappable tel: link
Fax, email, website URL, store image URLNoWebsite adds a button; image shows on cards
Working hoursOpen 24/7 toggle, or per-day open/close times
Active / Preferred / Exclude / Free WiFiPreferred stores get a gold badge + green marker

3. Editing, deleting & viewing store details

Click a store’s name or the view icon to see all saved fields in a detail grid. Edit and Delete buttons sit top-right. Deletion asks for confirmation and is permanent — use the Active toggle or Exclude from locator instead if you just want to hide a store temporarily.

4. Importing and exporting data

Bulk-manage locations from Import & Export using CSV files. Requires Starter plan or higher.

  • Export a CSV of all locations, or download a blank template.
  • Drag-and-drop a CSV to import; client-side validation flags issues first.
  • “Update existing stores with matching name” avoids duplicates on re-import.
  • Max file size 10MB. Starter caps at 50 stores; Growth is unlimited.

5. Settings panel

FieldDescription
Google Maps API keyRequired for the map to render
Default zoom1 (world) – 21 (building); city ≈ 10
Default map viewRoadmap, Satellite, Hybrid, or Terrain
Distance unitkm or miles
Map styleOptional custom JSON styling
Marker colorHex color for standard pins
Remove app brandingStarter/Growth only — hides “Powered by Storemapify”

6. Dashboard widgets

The Dashboard opens with a plan status banner, then four stat cards: Total Stores, Searches This Week, Stores Open Now, and Location Views (7 days). Growth plan adds a Popular Locations panel and a Recent Searches table; both show blurred placeholders with an upgrade prompt on Free/Starter. An onboarding checklist tracks API key, first location, and theme install until all three are done.

7. Adding the theme extension

Storemapify ships as a Theme App Extension — no theme code editing required.

  1. Online Store → Themes → Customize on your active theme.
  2. Create or open a page, then Add section / Add block.
  3. Scroll to Apps and select Storemapify.
  4. Configure the block settings (see section 8).
  5. Save the theme, then link the page in Online Store → Navigation.

8. Theme extension settings

SettingDefaultDescription
Title textFind a Store Near YouHeading above the search form
Default map zoom10Range 4–18
Map height600pxRange 400–900px
Marker / preferred marker colorRed / GreenColor pickers
Default search radius50010 to 2000
Distance unitkmkm or miles
Results per page10Range 5–50
Remove app brandingOffStarter/Growth only

9. Frontend store locator — how it works

Customers see a search form (Town/City with Google Places autocomplete, an optional store-name filter, and a radius selector) above a live map and a results list. Each result card shows a photo, distance badge, name, address, phone, hours, an open/closed pill, and a directions link. Clicking a card centers the map, opens a tooltip, and zooms to that store. On screens under 900px, tooltips appear as a card below the map instead of a Google InfoWindow.

10. “Use my location” — how it works

Available on Starter and Growth plans. Clicking the button requests the browser’s Geolocation API; on success, coordinates are reverse-geocoded to an address and a search runs automatically. Denied permission, unavailable location, or timeouts each show a clear inline message. Requires HTTPS and a non-blocked iframe context.

11. Plans & feature access

FeatureFreeStarterGrowth
Max locations550Unlimited
Use my location
CSV import / export
Remove app branding
Analytics dashboard
Store detail pages

12. Search analytics (Growth plan)

Growth unlocks a full Searches page (location, results count, timestamp, device type), a Popular Locations widget ranking the top 6 searched cities by time period, and Location View tracking whenever a customer opens a store’s details.

13. Frequently asked questions

The map isn’t showing on my storefront.

Confirm a valid API key is saved, all three Google APIs are enabled, your domain is allowed in the key’s restrictions, and Settings has been saved.

My stores aren’t appearing after a search.

Check that each store has valid coordinates, is Active and not Excluded, and that your search radius is wide enough.

I deleted a store by accident — can I recover it?

Deletion is permanent. Re-import from a recent CSV export if you have one, or use Active/Exclude instead of deleting going forward.

Can I use a custom map style?

Yes — paste a Google Maps style JSON array into Settings → Map style.

Still stuck? Open a support request or contact us directly.