Skip to main content

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.

Anchor to RequirementsRequirements

Anchor to Step 1: Determine pickup availability for a product variantStep 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.

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL query

query GetStoreAvailability {
product(handle: "t-shirt") {
variantBySelectedOptions(selectedOptions: {name: "size", value: "large"}) {
storeAvailability(first: 1) {
edges {
node {
available
pickUpTime
location {
name
}
}
}
}
}
}
}

JSON response

{
"data": {
"product": {
"variantBySelectedOptions": {
"storeAvailability": {
"edges": [
{
"node": {
"available": true,
"pickUpTime": "Usually ready in 1 hour",
"location": {
"name": "St. Laurent Shopping Centre"
}
}
}
]
}
}
}
}
}

Anchor to Step 2: Retrieve in-store pickup locationsStep 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.

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL query

query LocationsByDistance($location: GeoCoordinateInput!) {
locations(near: $location, first: 5, sortKey: DISTANCE) {
edges {
node {
id
name
address {
formatted
}
}
}
}
}

Variables

{
"location": {
"latitude": 45.4553,
"longitude": -75.6973
}
}

JSON response

{
"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"
]
}
}
}
]
}
}
}

Anchor to Step 3: Use the customer's preferred locationStep 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.

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL query

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

{
"data": {
"product": {
"variantBySelectedOptions": {
"storeAvailability": {
"edges": [
{
"node": {
"available": true,
"pickUpTime": "Usually ready in 1 hour",
"location": {
"name": "St. Laurent Shopping Centre"
}
}
}
]
}
}
}
}
}

Anchor to Next stepsNext steps

Was this page helpful?