Show pickup availability on product pages
Merchants can make their products available through local pickup, and you can display whether a specific product variant is available for local pickup on the product page. This allows customers to view this information without having to add the product to cart and proceed to checkout to view the shipping details.
In this tutorial, you'll learn how to show variant pickup availability on product pages.
RequirementsAnchor link to section titled "Requirements"
To implement pickup availability, you'll use the following:
Implementing pickup availabilityAnchor link to section titled "Implementing pickup availability"
To support pickup availability functionality in your theme, you need to implements the following components:
- The pickup availability section: Renders the display content, which contains information about each location that the current variant is stocked at.
- The pickup availability container: An empty container on the product page that hosts the section content.
The pickup availability sectionAnchor link to section titled "The pickup availability section"
The pickup availability section hosts the actual content to be displayed, which has two main components:
Availability summaryAnchor link to section titled "Availability summary"
The availability summary loops through the locations returned from the
store_availabilites attribute of the current variant to find any locations that have
pick_up_enabled set to
true. If there are any, then the availability of the current variant at the first location is displayed, along with a button to open the availability modal.
Availability modalAnchor link to section titled "Availability modal"
The availability modal displays the product and variant titles, and each location that the current variant is stocked at. For each location, the current availability and address are shown.
The following is an example of a pickup availability section with an availability summary and modal.
The pickup availability containerAnchor link to section titled "The pickup availability container"
The pickup availability container is an empty
To add the pickup availability section content inside the pickup availability container, you need to use the section rendering API. The request needs to be prefixed with a
/variants/[variant-id] parameter, where
[variant-id] is the variant ID of the selected variant.