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 removes our ZapietID from the cart page.

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

{% unless p.last == blank %}

HTML

Replace the line above with the following line:

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

HTML

Step 3

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

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

if (successCallback) {

HTML

Prepend the following code to the code above:

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

HTML

If you would like to show our widget in the drawer cart, you would need to implement three additional steps.

Step 4

  • This step will add our widget to the drawer cart.

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

<div class="cart-summary__buttons cart-summary__section border-bottom">

HTML

Prepend the following to the code above:

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

HTML

Step 5

  • This step will redirect the checkout button in the drawer cart to the checkout. It leads to the regular cart by default.

Go to theme Customize > Cart page > Drawer cart, and make sure the setting "Checkout button goes to cart page" is unchecked.

Step 6

  • This step makes sure the widget is persistent in the drawer cart, and that it reloads when the quantity is changed.

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

$('.cart-summary.updating, .cart-summary .updating').removeClass('updating');

JavaScript

A bit further down, append the following code to that code block, just like in the image below:

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

JavaScript


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.

If you have implemented the steps to show the widget in the drawer cart, it would look similar to the screenshot below.

Did this answer your question?