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.
Requirements
Anchor link to section titled "Requirements"- You've reviewed and met the requirements that are listed on the Querying data with the Storefront API page.
- You've created products and variants in your store.
- You've enabled local pickup for one or more of your locations.
To use the GraphQL queries, your app must request the unauthenticated_read_product_pickup_locations access scope for a Shopify store.
API components
Anchor link to section titled "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.StoreAvailabilityis a connection field on theProductVariantobject.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@inContextdirective accepts apreferredLocationIdargument which effects how in-store availability results are sorted.
Determine pickup availability for a product variant
Anchor link to section titled "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
Anchor link to section titled "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
Anchor link to section titled "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
- 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.