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
- From your Shopify admin, go to Online Store > Themes.
- Click Actions, and then click Edit Code.
- Under the Sections folder, click on Add a new section link to create a new snippet
- Fill the snippet name – pickup-availability to the field on the dialog and click Create section button.
- In the online code editor, please paste the below code123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109<div class="pickup-availability-container">{%- assign pick_up_availabilities = product_variant.store_availabilities | where: 'pick_up_enabled', true -%}{%- if pick_up_availabilities.size > 0 -%}<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><buttonclass="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><divclass="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"><h2id="PickupAvailabilitiesModalProductTitle"class="pickup-availabilities-modal__product-title"data-pickup-availability-modal-product-title></h2><pclass="pickup-availabilities-modal__variant-title pickup-availability-small-text"data-pickup-availability-modal-variant-title>{{ product_variant.title }}</p></div><buttontype="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 %}
- 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_availabilitesthe attribute of the current variant to find any locations that havepick_up_enabledset totrue. 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:
1 2 3 4 5 6 | <div class="product-single__store-availability-container" data-store-availability-container data-product-title="" data-has-only-default-variant="" data-base-url="" ></div> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | fetch(/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); }); |
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.
Please suggest to me any video template.