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 appears in the correct place on the cart page.

Open sections/cart__main.liquid and search for the following:

<div class="is-flex is-align-center is-justify-end cart__buttons">

HTML

Prepend the following code to the line above:

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

HTML

Step 3

Open sections/cart__main.liquid and search for the following:

{% unless p.last == blank %}

HTML

Replace the code above with the following code:

{% unless p.last == blank or p.first == "_ZapietId" %}

HTML

Step 4

Open templates/cart.ajax.liquid and search for the following:

{% if p.last != blank %}

HTML

Replace the code above with the following code:

{% if p.last != blank and p.first != "_ZapietId" %}

HTML

Step 5

  • This step will reload our widget when the quantity changes.

Open assets/z__jsCart.js and search for the following:

}, unload: function unload($section) {

HTML

Prepend the following to the line above:

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

HTML

If you are using a drawer cart, make sure to remove the checkout button from the drawer cart in Theme > Customize > Cart. This button should be unchecked.


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?