Follow our Online store 2.0 article to enable the Store Pickup + Delivery widget.

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.


Legacy install instructions

If you're not seeing the widget, please try implementing the steps below or 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.

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.

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:

Did this answer your question?