How To Show Pickup Availability on Product Pages in Shopify

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 it to the cart. This article will teach you how to show pickup availability on product pages in Shopify.

Step 1: Create the pickup-availability section

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Actions, and then click Edit Code.
  3. Under the Sections folder, click on Add a new section link to create a new snippet
  4. Fill the snippet name – pickup-availability to the field on the dialog and click Create section button.
  5. In the online code editor, please paste the below code
  6. Click Save

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

  • Availability information: The availability summary loops through the locations returned from the store_availabilites the 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 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.

Step 2: Add the pickup availability container

The pickup availability container is an empty <div> the 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.

Step 3: Add 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.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *