Support local pickup on storefronts

You can display whether a product is in stock and available for local pickup using the Storefront API. Customers can then pick up their online orders at a retail store, a curbside pickup location, or any location that a merchant chooses.

This tutorial shows you how to support local pickup on a custom storefront.

Example of a local pickup option displayed on a custom storefront

Requirements

To use the GraphQL queries, your app must request the unauthenticated_read_product_pickup_locations access scope for a Shopify store.

API components

You can display a product's availability for local pickup using the following API components:

  • StoreAvailability: An object that represents a product variant’s availability for in-store pickup at a location, including the estimated amount of time that it takes for the pickup to be ready. StoreAvailability is a connection field on the ProductVariant object.
  • Location: An object that represents a physical location, including the location's name, address, and latitude and longitude coordinates.
  • @inContext: A directive that provides the ability to contextualize the response. For example, the @inContext directive accepts a preferredLocationId argument which effects how in-store availability results are sorted.

Determine pickup availability for a product variant

When a user selects a particular product variant, you can query for its in-store pickup availability.

Within the storeAvailability object, you can query whether a variant is in stock at a location (available), the location where the variant is stocked (location), and the estimated amount of time that it takes for the pickup to be ready (pickUpTime).

The response includes a list of pickup locations that are sorted alphabetically by city and location name.

POST /api/2021-07/graphql.json

View response

JSON response

Retrieve in-store pickup locations

You might want to show customers a list of available locations so that they can establish a preferred one for future queries.

To retrieve this list, you can use the locations field available on the QueryRoot object. If you want to sort the results based on proximity to the customer's current location, then you can also pass a near argument that contains a latitude and longitude value.

POST /api/2021-07/graphql.json

Query variables

View response

JSON response

Use the customer's preferred location

By default, storeAvailability objects are sorted by city and name. To sort them by proximity to the customer's preferred location, you can pass a location ID using the preferredLocationId argument of the @inContext directive.

POST /api/2021-07/graphql.json

View response

JSON response

Next steps

  • Learn how to manage a cart in Shopify with the Storefront API.
  • Learn how to manage customer accounts with the Storefront API.
  • Support multiple languages on a custom storefront with the Storefront API.
  • Learn about the different tools that you can use to create unique buying experiences anywhere your customers are, including websites, apps, and video games.