store-locator
Shopify pickup locations on a Mapbox map, with a list filtered by a query field.
At a glance
map
The map is drawn in it. Give it a height in its styles.
- Without it
- The store locator is removed.
map-marker
The marker of each store on the map. Design it as you like, such as an icon.
- Without it
- The map has no markers.
store-popupoptional
The card that opens over a marker when it is clicked.
- Without it
- A click on a marker moves the map and marks its store, with no card.
Name: queryoptional
A Text field in a Form Block. It searches the list as the visitor types: the city, the postal code…
- Without it
- The list is not searched.
no-storesoptional
An element with this condition, inside store-locator. It shows while no store matches the search.
- Without it
- An empty list.
More in the guide.
Where it can go
- Anywhere on the page.
- Must contain
map. - Out of place, Smootify removes it from the page: also without data-api-key, or when the shop has no locations.
What it requires
- The Store Locator extension (lite or server plan, or the extension activated in the Smootify dashboard). Without it, the element does nothing.
Fields in the form
Each field’s Name setting in Webflow tells Smootify what the field holds. It is a setting of the field, not a custom attribute.
| Name | Field | What it does |
|---|---|---|
query | Text field | The place to search for. |
Attributes on the element
- It reads
data-api-key,data-style,data-zoom,data-initial-zoom,data-fit-bounds,data-padding.
Attributes inside it
| Group | Attribute name | Values |
|---|---|---|
| Store | location | 6 |
| Store locator (condition) | condition | 1 |