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