Merchants can make their products available through [local pickup](https://help.shopify.com/manual/shipping/setting-up-and-managing-your-shipping/local-methods/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.



## Requirements

- [Variant selection](/docs/storefronts/themes/product-merchandising/variants#variant-selectors) functionality. The pickup availability [JavaScript function](#the-javascript-function) needs to be run when variants are selected.

## Resources

To implement pickup availability, you'll use the following:

- The [`variant` object](/docs/api/liquid/objects/variant)
- The [`store_availability` object](/docs/api/liquid/objects/store_availability)
- The [`location` object](/docs/api/liquid/objects/location)

## Implementing pickup availability

To support pickup availability functionality in your theme, you need to implements the following components:

- [The pickup availability section](#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](#the-pickup-availability-container): An empty container on the product page that hosts the section content.
- [A JavaScript function](#the-javascript-function): Renders the section content inside the container, and makes any updates on variant selection.

> Caution:
> The examples below are only meant to illustrate basic considerations for implementing this feature. The full implementation will vary depending on your theme and what you want the display to look like. You can refer to the following files in Dawn for an example of a complete solution:

>   - [Section](https://github.com/Shopify/dawn/blob/6490d2f90a8eea98d696dcbe28f092dcc9740efd/sections/pickup-availability.liquid)
>   - [Container](https://github.com/Shopify/dawn/blob/6490d2f90a8eea98d696dcbe28f092dcc9740efd/sections/main-product.liquid#L313)
>   - [Buy Button](https://github.com/Shopify/dawn/blob/6490d2f90a8eea98d696dcbe28f092dcc9740efd/snippets/buy-buttons.liquid#L102)
>   - [JS](https://github.com/Shopify/dawn/blob/6490d2f90a8eea98d696dcbe28f092dcc9740efd/assets/pickup-availability.js)
>   - [CSS](https://github.com/Shopify/dawn/blob/6490d2f90a8eea98d696dcbe28f092dcc9740efd/assets/component-pickup-availability.css)

## The pickup availability section

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

  - [Availability summary](#availability-summary)
  - [Availability modal](#availability-modal)

This section is rendered inside the [pickup availability container](#the-pickup-availability-container) by the [JavaScript function](#the-javascript-function).

### 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-modal).

#### Example

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/pickup-availability/availability-info-0ea4da3f23610316038158d3eb2a18ab019ddff5d38a1b00544d135dff5bf92f.jpg" class="lazyload" width="2880" height="1600"></figure>

### 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.

#### Example

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/themes/pickup-availability/availability-modal-bc22cb7afc37059a3796c8f7ea872dda2a58ca3730cb9434bb4a13cc835ee4f8.jpg" class="lazyload" width="2880" height="1600"></figure>

### Example

The following is an example of a pickup availability section with an availability summary and modal.

> Note:
> You should only output the availability summary and modal if the current variant has at least one location with pickup enabled.

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="sections/pickup-availability.liquid"></script>

<script type="text/plain" data-language="liquid">
RAW_MD_CONTENT
<div class="pickup-availability-container">
  {%- assign pick_up_availabilities = product_variant.store_availabilities | where: 'pick_up_enabled', true -%}

  {%- if pick_up_availabilities.size > 0 -%}
    <!-- Availability summary -->
    <div class="pickup-availability-information">
      {%- assign closest_location = pick_up_availabilities.first -%}

      {%- if closest_location.available -%}
        {% render 'icon-in-stock' %}
      {%- else -%}
        {% render 'icon-out-of-stock' %}
      {%- endif -%}

      <div class="pickup-availability-information-container">
        {%- if closest_location.available -%}
          <p class="pickup-availability-information__title">
            {{ 'pickup_availability.general.pick_up_available_at_html' | t: location_name: closest_location.location.name }}
          </p>
          <p class="pickup-availability-information__stock pickup-availability-small-text">
            {{ closest_location.pick_up_time }}
          </p>
          <button
            class="pickup-availability-information__button js-modal-open-pickup-availability-modal pickup-availability-small-text"
            data-pickup-availability-modal-open aria-haspopup="dialog"
          >
            {%- if pick_up_availabilities.size == 1 -%}
              {{ 'pickup_availability.general.view_store_info' | t }}
            {%- else -%}
              {{ 'pickup_availability.general.check_other_stores' | t }}
            {%- endif -%}
          </button>
        {%- else -%}
          <p class="pickup-availability-information__title">
            {{ 'pickup_availability.general.pick_up_unavailable_at_html' | t: location_name: closest_location.location.name }}
          </p>

          {%- if pick_up_availabilities.size > 1 -%}
            <button class="pickup-availability-information__button js-modal-open-pickup-availability-modal pickup-availability-small-text" data-pickup-availability-modal-open aria-haspopup="dialog">
              {{ 'pickup_availability.general.check_other_stores' | t }}
            </button>
          {%- endif -%}
        {%- endif -%}
      </div>
    </div>

    <!-- Availability modal -->
    <div
      class="pickup-availabilities-modal modal"
      id="PickupAvailabilityModal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="PickupAvailabilitiesModalProductTitle"
    >
      <div class="pickup-availabilities-modal__header">
        <div class="pickup-availabilities-modal__product-information">
          <h2
            id="PickupAvailabilitiesModalProductTitle"
            class="pickup-availabilities-modal__product-title"
            data-pickup-availability-modal-product-title
          >
          </h2>
          <p
            class="pickup-availabilities-modal__variant-title pickup-availability-small-text"
            data-pickup-availability-modal-variant-title
          >
            {{ product_variant.title }}
          </p>
        </div>
        <button
          type="button"
          class="pickup-availabilities-modal__close js-modal-close-pickup-availability-modal text-link"
          aria-label="{{ 'general.accessibility.close_modal' | t }}"
        >
          {% render 'icon-close' %}
        </button>
      </div>
      <ul class="pickup-availabilities-list" role="list">
        {%- for availability in pick_up_availabilities -%}
          <li class="pickup-availability-list__item">
            <h3 class="pickup-availability-list__location">
              {{ availability.location.name }}
            </h3>
            <div class="pickup-availability-list__stock pickup-availability-small-text">
              {%- if availability.available -%}
                {% render 'icon-in-stock' %} {{ 'pickup_availability.general.pick_up_available' | t }}, {{ availability.pick_up_time | downcase }}
              {%- else -%}
                {% render 'icon-out-of-stock' %} {{ 'pickup_availability.general.pick_up_currently_unavailable' | t }}
              {%- endif -%}
            </div>
            {%- assign address = availability.location.address -%}
            <address class="pickup-availability-list__address">
              {{ address | format_address }}
            </address>
            {%- if address.phone.size > 0 -%}
              <p class="pickup-availability-list__phone pickup-availability-small-text">
                {{ address.phone }}<br>
              </p>
            {%- endif -%}
          </li>
        {%- endfor -%}
      </ul>
    </div>
  {%- endif -%}
</div>

{% schema %}
{
  "name": {},
  "settings": []
}
{% endschema %}

END_RAW_MD_CONTENT</script>

</div>
</p>


## The pickup availability container

The pickup availability container is an empty `<div>` element that the [JavaScript function](#the-javascript-function) will render the section contents inside of. It should be placed wherever you want the [availability summary](/docs/storefronts/themes/delivery-fulfillment/pickup-availability#availability-summary) to show on the product page.

### Example

```html
<div class="product-single__store-availability-container"
  data-store-availability-container
  data-product-title=""
  data-has-only-default-variant=""
  data-base-url=""
>
</div>
```

## The JavaScript function

To add the pickup availability section content inside the pickup availability container, you need to use the [section rendering API](/docs/api/ajax/section-rendering). The request needs to be prefixed with a `/variants/[variant-id]` parameter, where `[variant-id]` is the [variant ID](/docs/api/liquid/objects/variant#variant-id) of the selected variant.

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](/docs/storefronts/themes/product-merchandising/variants).

### Example

```js
fetch(window.Shopify.routes.root + "variants/[variant-id]/?section_id=pickup-availability")
  .then(response => response.text())
  .then(text => {
    const container = document.querySelector('[data-store-availability-container]');
    const pickupAvailabilityHTML = new DOMParser()
      .parseFromString(text, 'text/html')
      .querySelector('.shopify-section');

    container.appendChild(pickupAvailabilityHTML);
  })
  .catch(e => {
    console.error(e);
  });
```

> Tip:
> You can't access 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](/docs/storefronts/themes/delivery-fulfillment/pickup-availability#the-pickup-availability-container) includes `data-product-title` and `data-has-only-default-variant` attributes for this purpose.