Pickup and store locator

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.

1. Pickup on the product page

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

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:

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

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.
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.

Every value is in pickup attributes and pickup conditions.

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:

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 and its attributes.

Before you publish