--- title: Support local pickup on storefronts description: >- Display whether a product is available for local pickup using the Storefront API. source_url: html: >- https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/products-collections/local-pickup md: >- https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/products-collections/local-pickup.md api_name: storefront --- # Support local pickup on storefronts You can display whether a product is in stock and available for local pickup using the [Storefront API](https://shopify.dev/docs/api/storefront). 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 * You've completed the [Getting started with the Storefront API](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/getting-started) guide. * You're familiar with [querying products and collections](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/products-collections/getting-started). - You've created [products](https://shopify.dev/docs/api/admin-graphql/latest/objects/product) and [variants](https://shopify.dev/docs/api/admin-graphql/latest/objects/productvariant) in your store. - You've [enabled local pickup](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/local-pickup) for one or more of your locations. * Your Headless channel or custom app has the `unauthenticated_read_product_pickup_locations` [access scopes](https://shopify.dev/docs/api/usage/access-scopes#unauthenticated_read_product_pickup_locations). Learn how to [request permissions for Headless channels](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/manage-headless-channels#request-storefront-permissions). *** ## 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`](https://shopify.dev/docs/api/storefront/latest/objects/StoreAvailability) object, you can query whether a variant is available for pickup at a location (`available`), the location (`location`), and the estimated amount of time that it takes for the pickup to be ready (`pickUpTime`). A variant is `available` when it's in stock at the location or when it can be supplied through a store transfer from another location; in the transfer case, `pickUpTime` reflects an adjusted estimated pickup time that accounts for the transfer. The response includes a list of pickup locations that are sorted alphabetically by city and location name. ## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json ## GraphQL query ```graphql query GetStoreAvailability { product(handle: "t-shirt") { variantBySelectedOptions(selectedOptions: {name: "size", value: "large"}) { storeAvailability(first: 1) { edges { node { available pickUpTime location { name } } } } } } } ``` ## JSON response ```json { "data": { "product": { "variantBySelectedOptions": { "storeAvailability": { "edges": [ { "node": { "available": true, "pickUpTime": "Usually ready in 1 hour", "location": { "name": "St. Laurent Shopping Centre" } } } ] } } } } } ``` *** ## 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`](https://shopify.dev/docs/api/storefront/latest/queries/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. ## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json ## GraphQL query ```graphql query LocationsByDistance($location: GeoCoordinateInput!) { locations(near: $location, first: 5, sortKey: DISTANCE) { edges { node { id name address { formatted } } } } } ``` ## Variables ```json { "location": { "latitude": 45.4553, "longitude": -75.6973 } } ``` ## JSON response ```json { "data": { "locations": { "edges": [ { "node": { "id": "gid://shopify/Location/1", "name": "St. Laurent Shopping Centre", "address": { "formatted": [ "1200 St. Laurent Blvd", "Ottawa, Ontario K1K 3B8", "Canada" ] } } }, { "node": { "id": "gid://shopify/Location/2", "name": "CF Rideau Centre", "address": { "formatted": [ "50 Rideau St", "Ottawa, Ontario K1N 9J7", "Canada" ] } } }, { "node": { "id": "gid://shopify/Location/3", "name": "Bayshore Shopping Centre", "address": { "formatted": [ "100 Bayshore Dr", "Ottawa, Ontario K2B 8C1", "Canada" ] } } } ] } } } ``` *** ## Step 3: Use the customer's preferred location By default, [`storeAvailability`](https://shopify.dev/docs/api/storefront/latest/objects/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 https://{shop}.myshopify.com/api/{api\_version}/graphql.json ## GraphQL query ```graphql query GetPreferredStoreAvailability @inContext(preferredLocationId: "gid://shopify/Location/1") { product(handle: "t-shirt") { variantBySelectedOptions(selectedOptions: {name: "size", value: "large"}) { storeAvailability(first: 1) { edges { node { available pickUpTime location { name } } } } } } } ``` ## JSON response ```json { "data": { "product": { "variantBySelectedOptions": { "storeAvailability": { "edges": [ { "node": { "available": true, "pickUpTime": "Usually ready in 1 hour", "location": { "name": "St. Laurent Shopping Centre" } } } ] } } } } } ``` *** ## Next steps * Learn how to [create and update a cart](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/cart/manage) in Shopify with the Storefront API. * Learn how to [manage customer accounts](https://shopify.dev/docs/storefronts/headless/building-with-the-customer-account-api/customer-accounts) with the Storefront API. * Support [multiple languages](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/markets/multiple-languages) on a custom storefront with the Storefront API. * Learn about the [different tools](https://shopify.dev/docs/storefronts/headless/additional-sdks) that you can use to create unique buying experiences anywhere your customers are, including websites, apps, and video games. ***