# Pickup and store locator

> Show on the product page where the selected variant can be picked up, list the other stores, and put your stores on a Mapbox map with a search field.

Status: Ready (Smootify 2.0)  
1.x page: https://docs.smootify.io/docs/internationalization/store-availability  
URL: https://www.smootify.io/docs/features/store-availability  
Updated: 2026-10-01

If your store has shops or warehouses where customers pick up their orders, Smootify can show them. On the product page, `store-availability` says whether the selected variant can be picked up, and where. On a page of its own, `store-locator` shows every store on a map, with a list the visitor can search. This page covers both.

> [!NOTE]
> Both read your Shopify locations that offer local pickup. Add the locations under **Settings > Locations**, turn on local pickup for each one under **Settings > Shipping and delivery**, and set each product's stock per location on the product. The store locator also needs a free Mapbox account, and the **Lite** or **Server** plan on your custom domain. On your `.webflow.io` address it works on every plan.

## 1. Pickup on the product page

Add a Custom element with the tag `store-availability` inside `smootify-product`. Outside it, the element is removed.

```html
<store-availability>
  <div condition="available-at-location">Pick up at <span location="name">Store</span></div>
  <div condition="not-available-at-location">Not in stock at <span location="name">Store</span></div>
  <div location="pick-up-time">Usually ready in 24 hours</div>
  <button type="button">Check other stores</button>
  <div popover="auto">
    <store-location><div location="name">Store</div><div location="address">Address</div><div location="quantity">0</div></store-location>
  </div>
</store-availability>
```

**The first store.** Outside the list, the `location` attributes show the first pickup location Shopify gives for the selected variant, and they follow the variant as it changes:

| Attribute | What it shows |
|---|---|
| `location="name"` | the location’s name |
| `location="address"` | its address, on several lines |
| `location="quantity"` | how many are available there |
| `location="pick-up-time"` | Shopify’s pickup time, such as “Usually ready in 24 hours” |
| `location="directions-link"` | on a link: a Google Maps route to it |

**Its states.** Inside `store-availability`, conditions show what the first location has, and classes follow it. Design these states:

| State | What shows | Classes |
|---|---|---|
| The first location has the variant | `condition="available-at-location"` | `is-available` on `store-availability`, `is-available-at-pickup` on `smootify-product` |
| The first location does not have it | `condition="not-available-at-location"` | `is-available-at-pickup` on `smootify-product` |
| No location offers the variant for pickup | `store-availability` is hidden; elsewhere in `smootify-product`, `condition="not-available-as-local-pickup"` shows | none |
| The visitor opens the panel | one `store-location` per store that offers the variant, except the store chosen in a location switcher; the list loads when the panel opens; the button is hidden when there is only one location | |

**The other stores.** For a list of every store that offers the variant:

1. Inside `store-availability`, add a panel: a Div block with the custom attribute `popover` set to `auto`, or a Custom element with the tag `dialog`.
2. Inside the panel, add a Custom element with the tag `store-location`: the template of one store, with the same `location` attributes. Smootify copies it once per store, except the store the visitor chose in a [location switcher](https://www.smootify.io/docs/features/markets).
3. Outside the panel, add a Custom element with the tag `button`, such as “Check other stores”. It opens the panel.

Without a panel, the button is removed. Add `skeleton="text"` inside `store-location` for a placeholder while it loads. With a `dialog`, the custom attributes `animation-name`, `animation-duration` and `disable-blur` on `store-availability` style its opening, as on the [market suggestion](https://www.smootify.io/docs/features/market-suggestion).

Every value is in [pickup attributes](https://www.smootify.io/docs/reference/attributes/pickup-location) and [pickup conditions](https://www.smootify.io/docs/reference/conditions/pickup).

## 2. A store locator page

**Get a Mapbox token.** In your Mapbox account, create a token with the default public scopes, and limit it to your site’s addresses (your `.webflow.io` address and your domain). Copy it: it is public, and it goes in the page.

**Which stores are listed.** The list comes from Shopify, not from Webflow: Smootify asks Shopify for your store’s locations that offer local pickup, up to 200, and makes one `store-location` per location.

- A location is listed only when, in Shopify, it is active under **Settings > Locations**, it fulfils online orders (**Fulfill online orders from this location**), and local pickup is turned on for it under **Settings > Shipping and delivery > Local pickup**. A warehouse or a shop without local pickup is never listed.
- The name, address and phone are the ones set on the location in Shopify. Change them there: the page follows.
- The map places each store at the coordinates Shopify finds for its address. A location whose address Shopify cannot place stays in the list without a marker.
- Stock does not matter here: the locator lists the stores, not the products they have.

**Build the locator.** Add a Custom element with the tag `store-locator` and give it the custom attribute `data-api-key` with your token. Inside it go these parts, each a Custom element with that tag unless the card says otherwise:

| Part | What it is | Without it |
|---|---|---|
| a Custom element with the tag `map` | the map is drawn in it; give it a height in its styles | the store locator is removed |
| a Custom element with the tag `store-location` | the template of one store in the list | there is no list |
| a Custom element with the tag `map-marker` | the marker of each store on the map, designed as you like, such as an icon | the map has no markers |
| optional: a Custom element with the tag `store-popup` | the card that opens over a marker when it is clicked | a click on a marker moves the map and marks its store in the list, with no card |
| optional: a Form Block with a Text field whose **Name** setting is `query` | searches the list as the visitor types, on any text of the store, such as the city or the postal code | the list is not searched |
| optional: an element with `condition="no-stores"` inside `store-locator` | shows while no store matches the search | an empty list |

```html
<store-locator data-api-key="{Mapbox public token}">
  <map></map>
  <div class="w-form"><form><input name="query"></form></div>
  <store-location><div location="name">Store</div><div location="address">Address</div><a href="#" location="directions-link">Directions</a></store-location>
  <map-marker></map-marker>
  <store-popup><div location="name">Store</div></store-popup>
</store-locator>
```

**What the visitor gets.**

- The browser asks the visitor for their position. With it, the stores are sorted by distance and the map starts there. Without it, the map starts at the first store.
- A click on a store in the list moves the map to it, and the store gets the class `is-active`. A click on a marker opens its `store-popup` and marks its store in the list.
- The search field filters the list as the visitor types.

Inside `store-location` and `store-popup`, `location` shows `name`, `address`, `zip`, `phone` (a Text link with it calls the number), `country` and `directions-link`.

**Map options**, as custom attributes on `store-locator`:

- `data-style`: the style URL of a Mapbox Studio style, `mapbox://styles/mapbox/light-v11` by default;
- `data-initial-zoom`: the zoom when the map opens, 13 by default;
- `data-zoom`: the zoom when the map moves to a store, 13 by default;
- `data-fit-bounds`: `true` by default, the map zooms out to show every store; `false` keeps the initial zoom;
- `data-padding`: the space kept around the stores when the map fits them, 100 pixels by default.

More in [`store-locator`](https://www.smootify.io/docs/reference/elements/store-locator) and [its attributes](https://www.smootify.io/docs/reference/attributes/store-locator).

## Before you publish

> [!STUCK]
> - **The pickup block never shows.** No location offers the variant for pickup: turn on local pickup for the location, and check the product's stock there.
> - **The "Check other stores" button disappears.** There is only one pickup location, or the button has no panel to open inside `store-availability`.
> - **The store locator disappears.** It has no `data-api-key`, no `map` element inside, or the store has no location with local pickup.
> - **A store is missing from the locator.** In Shopify, the location is inactive, does not fulfil online orders, or has local pickup turned off.
> - **The map shows no markers.** The `map-marker` template is missing.
> - **The store locator works on `.webflow.io` but not on your domain.** It needs the Lite or Server plan there.