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:

  • The pickup-availability.liquid section to render the display content
  • The pickup availability container to host the section content
  • A JavaScript function to render the section content inside the container, and make any updates
  • Any required CSS for styling the display

The pickup-availability section

The pickup-availability section hosts the actual content to be displayed, which has two main components:

The following is an example of this section content:

Availability information

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.

For example:

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.

For example:

The pickup availability container

The pickup availability container is an empty <div> element that the JavaScript function will render the section contents inside of:

It should be placed wherever you want the availability information to show on the product page.

The JavaScript function

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.

For example:

In order to access the variant ID, and update the display when a variant is selected, you need to make a call to your pickup availability JavaScript function from the JavaScript responsible for updating product page elements on variant selection.

You should also be mindful that there’s no access to the Liquid product object in the pickup-availability section. This means that product specific changes, like updating the title and removing the variant title if the product only has a default variant, need to be done through JavaScript. The example availability container has data-product-title, and data-has-only-default-variant, attributes included for this purpose.