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 guide shows you how to support local pickup on a custom storefront.
Requirements
Anchor link to section titled "Requirements"- You've completed the Getting started with the Storefront API guide.
You're familiar with querying products and collections.
You've enabled local pickup for one or more of your locations.
Your Headless channel or custom app has the
unauthenticated_read_product_pickup_locationsaccess scopes. Learn how to request permissions for Headless channels.
Step 1: Determine pickup availability for a product variant
Anchor link to section titled "Step 1: 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.
Step 2: Retrieve in-store pickup locations
Anchor link to section titled "Step 2: 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 query. 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.
Step 3: Use the customer's preferred location
Anchor link to section titled "Step 3: 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.
- Learn how to create and update 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.