Map Widget for Shopify
Download one file, paste it into your theme's Sections folder, and “WhatIsMyLocation Map” appears in your theme editor with a native settings panel — branches as blocks, theme and marker pickers, a locations panel with switch animations, and optional open-in-maps icons. No app to install, no API key, no billing account, no cookies, and nothing loads from Google. The zip includes a second section for the find-my-location widget too.
Why a theme section beats a Shopify app
Most “map app” listings want an install, permissions to your store data, and a monthly fee — for what is ultimately one iframe. This is the honest alternative: a single Liquid file that lives in your own theme. It requests no store permissions, adds no scripts to your pages, phones nothing home, and costs nothing. The only external requests your visitors make are the sandboxed map iframe from whatismylocation.ai and its OpenStreetMap tiles — no Google cookies, no consent-banner baggage, and if the service were ever unreachable the iframe fails silently without breaking your page. Delete the section file and every trace is gone.
Download whatismylocation-shopify-sections.zip — both sections plus a README, a few kilobytes. Then follow the install steps below.
Install in about two minutes
Two halves: paste the file once, then use it like any built-in section.
Paste the file: Shopify admin ▸ Online Store ▸ Themes ▸ ⋯ ▸ Edit code. In the left sidebar under Sections click Add a new section, name it whatismylocation-map, delete the placeholder content, and paste the entire contents of whatismylocation-map.liquid — the {% schema %} block at the bottom is what builds your settings panel, so it must come along. Save.
Use it: open the theme editor (Customize), navigate to your contact page (or any page), press Add section, and choose WhatIsMyLocation Map. The settings panel appears on the left; until you enter coordinates the section shows a friendly placeholder telling you exactly what it needs.
Get the coordinates from the map-embed builder — type your address, then drag the pin onto your entrance before copying. The section ships your final coordinates, so the pin can never drift afterwards.
Branches are blocks
Multi-location stores get the best part: in the theme editor, each branch is a block — press Add branch, fill in latitude, longitude, a label and an address, and reorder them by dragging (up to 10). The map auto-fits every branch, pins are numbered to match the list, and visitors get the locations panel — an accordion beside the map on desktop, a swipeable card strip on phones, with per-branch directions and optional “Open in Google Maps / Apple Maps” icons. Panel layout (auto, side, bottom, none) and the switch animation (smooth, fade, lively, none — visitors with reduce-motion always get the instant version) are dropdowns in the same panel.
Every setting, mapped
| Setting | What visitors see |
|---|---|
| Business name + title style | The card/panel heading — bold by default; italic and normal offered. |
| Address lines 1–3 + per-line style | Up to three lines on the overlay card, each optionally bold or italic. |
| Latitude / longitude | Your pin. Paste from the builder; never re-geocoded. |
| Branch blocks | Numbered pins + the locations panel (from 2 branches up). |
| Theme | Light, dark, or golden widget chrome. |
| Marker color | Classic blue, emerald, red, amber, indigo, or slate pins. |
| Panel + motion | Locations-panel layout and the branch-switch animation. |
| Get directions / map icons | Directions button plus optional Google/Apple Maps icon links with tooltips. |
| Height | Iframe height, 220–800 px. |
| “Powered by” caption | Off by default — tick to credit the service under the map. |
The same zip includes whatismylocation-widget.liquid — the find-my-location widget as a second section (theme, compact/full mode, height), for delivery pages and store finders.
Troubleshooting
The section doesn't appear under Add section. The file must live in Sections (not Snippets or Assets) and the paste must include the whole file — if the {% schema %} block was cut off, Shopify rejects or hides the section. Re-paste the entire file and save.
“Invalid schema” error on save. A partial paste — most often a missing closing brace from selecting to the bottom minus a line. Paste the complete file again; don't hand-edit the schema unless you know Liquid.
The map is grey. Map tiles come from tile.openstreetmap.org; an aggressive ad-blocker or corporate network can block them. Check on a phone on mobile data — your customers almost certainly see it fine.
The pin isn't on my door. Rebuild the coordinates at the builder, drag the pin onto your entrance, and paste the new values into the section settings.
Edits don't show on the live store. You edited a draft or unpublished theme — make the change in the published theme (or publish the one you edited). The widget itself has nothing to cache.
Step by step
- Download whatismylocation-shopify-sections.zip (link below) and unzip it.
- In Shopify admin open Online Store ▸ Themes ▸ ⋯ ▸ Edit code. Under Sections press “Add a new section”, name it whatismylocation-map, and paste the ENTIRE contents of whatismylocation-map.liquid — including the schema block at the bottom. Save.
- Open the theme editor (Customize), go to the page that needs the map, press Add section, and pick “WhatIsMyLocation Map”.
- Paste your exact coordinates from the map-embed builder (type your address, then drag the pin onto your entrance before copying) — or press “Add branch” once per location for a multi-branch map.
- Pick theme, marker color, panel layout and motion in the settings panel, then Save. No app, no API key, nothing to configure server-side.