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">{{ 'sections.cart.checkout' | t }}</button>

Prepend the following to the code above:

{% comment %}

Append the following to the code you searched for:

{% endcomment %}

It should look similar to the image below.


The widget should appear on the cart page when you have added a product to the cart.

It should look similar to the screenshot below.


Did this answer your question?