Skip to main content

Local pickup

When buyers choose local pickup as their delivery method, checkout displays a list of available store locations where they can collect their order. Use local pickup targets to add store-specific messaging, pickup instructions, and readiness information to buyers as they browse and select a pickup location.

The write operations available at this target — notes, metafields, discount codes — don't include changing the pickup point selection or the buyer's search address.

For access to individual pickup location data, use deliveryGroups. Carrier names, location addresses, and costs are available there. Collection hours, service area details, and the buyer's search address aren't exposed.

Anchor to Use casesUse cases

  • Store hours and availability: Display operating hours or holiday closures for each pickup location so buyers know when they can collect their order.
  • Pickup instructions: Show location-specific directions, such as where to park or which entrance to use.
  • Readiness estimate: Display an estimated preparation time for the order based on the selected location's current workload.
  • Location-specific promotions: Offer in-store discounts or exclusive deals tied to specific pickup locations to encourage buyers to choose local pickup.
Checkout delivery section with Pickup tab selected, showing purchase.checkout.pickup-location-list.render-before above a list of nearby store locations, purchase.checkout.pickup-location-option-item.render-after inside each location item, and purchase.checkout.pickup-location-list.render-after below all pickup location options.

Anchor to Location list targetsLocation list targets

These static targets render before and after the pickup location list. They're tied to the list as a whole, not to individual locations. Both targets provide access to shopify.isLocationFormVisible, which indicates whether the buyer is viewing the location search form or the results list. Read access to cart contents, buyer identity, and delivery details is available through API properties.

Anchor to Render before pickup locations ,[object Object]Render before pickup locations target

purchase.checkout.pickup-location-list.render-before

Renders before the list of pickup location options. Use this target to display introductory messaging or general pickup instructions before the buyer interacts with the location list.

Use shopify.isLocationFormVisible to determine whether the buyer is entering their location or viewing the results list and show appropriate content.

Support
Components (56)
APIs (24)

Supported components

Available APIs

Examples

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
render(<Extension />, document.body);
}

function Extension() {
if (shopify.isLocationFormVisible.value) {
return (
<s-banner>
Enter your address to find pickup locations near you.
</s-banner>
);
}

return (
<s-banner>
Select a store to see estimated pickup times.
</s-banner>
);
}

Anchor to Render after pickup locations ,[object Object]Render after pickup locations target

purchase.checkout.pickup-location-list.render-after

Renders after the list of pickup location options. Use this target to display general pickup policies or post-selection guidance below the location list.

Use shopify.isLocationFormVisible to determine whether the buyer is entering their location or viewing the results list.

Support
Components (56)
APIs (24)

Supported components

Available APIs

Examples

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
render(<Extension />, document.body);
}

function Extension() {
if (shopify.isLocationFormVisible.value) return null;

return (
<s-text>
Orders are held for 7 days. Bring a valid photo ID when collecting your order.
</s-text>
);
}

Anchor to Location option item targetLocation option item target

This static target renders after the details of each individual pickup location in the list. Unlike the list targets above, it provides access to location-specific data through shopify.target and whether the buyer has selected that location through shopify.isTargetSelected. Read access to cart contents, buyer identity, and delivery details is also available through API properties.

Anchor to Render after pickup location option ,[object Object]Render after pickup location option target

purchase.checkout.pickup-location-option-item.render-after

Use this target to display location-specific information such as store hours, pickup instructions, or readiness estimates for each option. The location object includes the store name, address, and any associated metafields.

Support
Components (56)
APIs (24)

Supported components

Available APIs

Examples

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
render(<Extension />, document.body);
}

function Extension() {
const isSelected = shopify.isTargetSelected.value;
const option = shopify.target.value;

if (!isSelected) return null;

const hours = option.metafields.find(
(m) => m.namespace === 'custom' && m.key === 'store_hours',
)?.value;

return (
<s-text>
{option.location.name ?? 'This location'}: {hours ?? 'Hours not available'}
</s-text>
);
}

Anchor to Best practicesBest practices

  • Adapt content based on the location form visibility: Buyers see two distinct views when selecting a local pickup location: the location search form and the results list. Use shopify.isLocationFormVisible to show content relevant to each view rather than displaying the same message in both.
  • Keep location-specific content concise: The option-item target renders for every location in the list. Lengthy content for each option increases visual clutter and makes it harder for buyers to compare locations.
  • Use isTargetSelected to reduce noise: In the option-item target, consider rendering detailed information only for the selected location to keep the list scannable.
Was this page helpful?