search

Shopify Local Pick-up

Learn how to configure Local Pickup in your Merchants Shopify store, and customise pickup options.

hashtag
Headless Stores

hashtag
Prerequisites

While there are no FE prerequisites for the checkout, to be able to query stock levels on the FE, you need the following:

  • Shopify Storefront API version 2023-04 or above

  • Stores set up in Shopify that allow in-store pickup

hashtag
The Hook

To handle this, we’re best to create a useFindInStore hook — this would power a few parts:

  • Fetching user location

  • Fetching the product variant data

  • Handling errors

hashtag
The GraphQL Query

The storeAvailability connection is available on the variant, so before you can run the query, the user should have already selected a variant (see 2 in need to knows).

We can then present the user with the option to search for store stock. An example would be:

query FindInsStoreVariantsAndLocations($handle: String!, $latitude: Float!, $longitude: Float!) {
	product(handle: $handle) {
		variantBySelectedOptions(selectedOptions: $selectedOptions) {
			storeAvailability(first:250, near: { latitude: $latitude, longitude: $longitude }) {
				edges {
					node {
						available
                        pickUpTime
						location {
							name
							id
							address {
								formatted
								latitude
								longitude
							}
						}
					}
				}
			}
		}
	}
}

With the following variables:

This will return this response:

From this response, you could flatten the array then sort by the distance:

hashtag
Example Implementation

Whilst it is outdated, Tony Bianco is a good reference for how to implement native Shopify Pickup.

On the PDP, the drawer uses Google Maps API to search for the user's location with autocomplete, or the Find My Location uses navigator.geolocation to get the user's current position.

hashtag
Links

PreviousRetail transactionsNextOverview

Last updated