Docs / Storefront
Storefront widget
Add the locator with a theme block, a floating button, or two lines of HTML on any site.
Theme app block
In the theme editor, add the Store locator block to any section. On a product template it can open already filtered to stockists of that product.
Floating button
Switch on the Floating store finder app embed to show a “Find a store” button on every page of your store.
Embedding outside Shopify
Every store also gets a hosted locator page at https://APP_URL/s/{your-store} that you can link to from anywhere. Or paste this on any website:
<div id="stockist-locator" data-shop="my-store"></div>
<script src="https://APP_URL/widget.js" async></script>Optional attributes:
| Attribute | Effect |
|---|---|
data-mode="floating" |
Show a floating “Find a store” button |
data-product="{{ product.handle }}" |
Only show stockists of a product |
data-lang="fr" |
Pick a translation |
Appearance
In Appearance choose from 5 layouts (and 6 map styles when you use your own map key), set your theme colours, edit any label, and (on Premium) add custom CSS. Set a pin icon and colour for each filter under Filters.
The widget comes in English. To show it in other languages, add a translation of the labels for each language under Translations and labels; the widget picks the one that matches your storefront’s language.
Maps
The included map works with no setup and no API key. It covers 50,000 map views a month per store, counted each time the locator or a location page shows a map. The count resets on the 1st of each month.
- At 80% of the allowance, the app shows a warning on its overview page.
- Above the allowance, the map keeps showing for a 20% grace margin.
- After that, your locator shows the list and search without a map until the 1st. Shoppers can still find stores.
Use your own key for unlimited map views. In Appearance → Map, choose a provider:
| Provider | What to add | Notes |
|---|---|---|
| Google Maps | A Maps JavaScript API browser key | Restrict it to your store’s domains in Google Cloud. Google bills you directly. |
| Mapbox | A public token (starts with pk.) |
Restrict it to your store’s domains in your Mapbox account. Mapbox bills you directly. |
With your own key you can choose a map style (standard, light, dark, streets, outdoors or satellite), and map views aren’t counted. If your key is rejected, the locator falls back to the included map.