Choose a version:

Pickup points

When buyers choose pickup point delivery, checkout displays a location search form and a list of nearby collection points, such as parcel lockers and carrier service points. Use these targets to add content before and after that UI.

The write operations available at this target don't include changing the pickup point selection or the buyer's search address.

PickupPointListApi provides only isLocationFormVisible. Carrier names, location addresses, and costs are accessible through deliveryGroups, but collection hours, service area details, and the buyer's search address aren't exposed.

Anchor to Use casesUse cases

Location guidance: Display a message above the location search form, such as coverage areas or tips for finding the nearest pickup point.
Carrier information: Display carrier names, collection hours, or network details for available pickup points.
Collection instructions: Show what buyers need when collecting their package, such as a photo ID or order confirmation number.
Pickup promotion: Reinforce the buyer's choice with a discount or reward when they select pickup point delivery.

Anchor to Pickup points targetsPickup points targets

Use these targets to add content around the pickup point selection UI. Buyers move through two views: a location search form and a results list. The extension receives isLocationFormVisible to distinguish between them. For UX guidance, see UX for pickup points.

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

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

Renders before the pickup point UI, covering both the location search form and the results list. Use shopify.isLocationFormVisible to determine which view the buyer is in and adapt your content. Pickup point details, including carrier names, location addresses, and costs, are accessible through deliveryGroups.

Support

Components (55)

APIs (24)

Examples

jsx

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 postal code or address to find pickup points near you.

</s-banner>

);

}

return (

<s-banner>

Packages are held for up to 14 days. Bring a valid photo ID to collect.

</s-banner>

);

}

Examples

Description

Display different content depending on whether the buyer is entering their location or viewing the list of pickup points.

jsx

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 postal code or address to find pickup points near you.
      </s-banner>
    );
  }

  return (
    <s-banner>
      Packages are held for up to 14 days. Bring a valid photo ID to collect.
    </s-banner>
  );
}

Show eligibility messaging for high-value orders

Description

Render different guidance when the cart total exceeds a threshold that may require signature on delivery. This example reads `shopify.cost.totalAmount` and shows a warning banner for high-value carts.

Preact

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

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

function Extension() {
  const total = Number(shopify.cost.totalAmount.value?.amount ?? 0);

  if (total > 500) {
    return (
      <s-banner tone="warning">
        High-value orders may require signature on delivery. Consider a direct home delivery instead.
      </s-banner>
    );
  }

  return (
    <s-banner tone="info">
      Select a pickup point below to collect your order.
    </s-banner>
  );
}

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

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

Renders after the pickup point list. Use this target for content that's relevant after the buyer views or selects a pickup point, such as collection reminders or package handling instructions.

Support

Components (55)

APIs (24)

Examples

jsx

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>

Bring a valid photo ID and your order number when collecting your package.

</s-text>

);

}

Examples

Description

Show what buyers need to bring when collecting their package. This example renders below the pickup point UI when the results list is visible.

jsx

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>
      Bring a valid photo ID and your order number when collecting your package.
    </s-text>
  );
}

Display supported carriers below the pickup point list

Description

Reassure buyers by listing the delivery carriers that handle pickup-point shipments. This example renders a short list of carrier names below the available pickup points.

Preact

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

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

function Extension() {
  return (
    <s-text color="subdued">
      Shipments are delivered by UPS, DHL, and FedEx partners.
    </s-text>
  );
}

Anchor to Best practicesBest practices

Adapt content to the current view: The buyer moves through two distinct views when selecting a pickup point: the location search form and the results list. Use shopify.isLocationFormVisible to show content relevant to each view.
Keep location guidance brief: Buyers entering their location are completing a focused task. Content in render-before during the location search step sits above the form and pushes it down. Keep any guidance concise and directly relevant to the search.

Was this page helpful?

Pickup points

Anchor to Use casesUse cases

Anchor to Pickup points targetsPickup points targets

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

Supported components

Available APIs

Supported components

Available APIs

jsx

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

Supported components

Available APIs

Supported components

Available APIs

jsx

Anchor to Best practicesBest practices