Install instructions
Step 1
Follow our Online store 2.0 article to enable the Store Pickup + Delivery widget, but don't publish the duplicate before implementing the rest of the steps.
Note
Please reach out to us at [email protected]—we’ll be happy to install the widget for you.
Only proceed if you are comfortable editing code yourself.
On the theme, click Actions > Edit code.
Step 2
- The next 2 steps will add the cart form which allows our widget to show.
Open sections/main-cart-footer.liquid and search for the following:
<div class="cart__ctas"
Prepend the following to the code above:
<form action="{{ routes.cart_url }}" method="post" id="cart" id="cart_form">
<div id="storePickupApp"></div>Step 3
Open sections/main-cart-footer.liquid and search for the following:
{%- if additional_checkout_buttons -%}Prepend the following to the code above:
</form>
Step 4
- This will reload our widget when the quantity changes.
Open assets/cart.js and search for the following:
const parsedState = JSON.parse(state);
Prepend the following to the code above:
document.dispatchEvent(new CustomEvent("zapiet:start"));Step 5
- This will remove the checkout button from the cart notification, so our app on the cart page cannot be bypassed.
Open snippets/cart-notification.liquid and search for the following:
<button class="button button--primary button--full-width" name="checkout" form="cart">{{ 'sections.cart.checkout' | t }}</button>Prepend the following to the code above:
{% comment %}Append the following to the code above:
{% endcomment %}The widget should appear on the cart page when you have added a product in the cart.
It should look similar to the screenshot below.
