Show pickup availability on product pages
You’re able to display whether a specific variant is available for local pickup on a product page, which allows customers to view this information without adding to the cart.
In order to build this display, you’ll use the following Liquid objects:
The display has four main components:
pickup-availability.liquidsection to render the display content
- The pickup availability container to host the section content
- Any required CSS for styling the display
The pickup-availability section
pickup-availability section hosts the actual content to be displayed, which has two main components:
The following is an example of this section content:
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.
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 pickup availability container
The pickup availability container is an empty
It should be placed wherever you want the availability information to show on the product page.
In order to add the
pickup-availability section content inside the pickup availability container, you need to use the section rendering API, prefixed with a
/variants/[variant-id] parameter, where
[variant-id] is the variant ID of the selected variant.
You should also be mindful that there’s no access to the Liquid product object in the
data-has-only-default-variant, attributes included for this purpose.