Install instructions

Step 1

Follow our Online store 2.0 article to enable the Store Pickup + Delivery widget, but don't publish the duplicate theme 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

  • This step will make sure the widget shows in the cart page.

Open sections/main-cart.liquid and search for the following code:

<div class="cart__item-row cart__checkout-wrapper">

Prepend the following code to that line:

<div id="storePickupApp"></div>

Step 3

  • This and the following step make sure the widget is persistent and that it reloads when the quantity is changed.

Open layout/theme.liquid and find the following code (in 2 places):

theme.min.js

Replace the code above with the following (in 2 places):

theme.js

It should look similar to the screenshots below:

Step 4

Open assets/theme.js and search for the following code:

this.input.value = qty;

Append the following code to that line:

document.dispatchEvent(new CustomEvent("zapiet:start"));

Step 5

  • This will redirect the checkout button in the cart notification to the regular cart, so our app on the cart page cannot be bypassed.

Open snippets/header-cart-drawer.liquid and search for the following:

name="checkout"

Replace the code above with the following:

name="cart"


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?