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 our widget is clickable.

Open assets/ajaxify-shop.js.liquid and search for the following:

<span class="money total-price">'+totalPriceConverted+'</span></li></ul></div>';

JavaScript

Append the code below to that line:

subtotalRow += '<div id="storePickupApp"></div>';

JavaScript

Step 3

  • This step will make sure our widget is consistent in the modal cart.

Open assets/ajaxify-shop.js.liquid and search for the following:

if (window.Shopify && Shopify.StorefrontExpressButtons) {

JavaScript

Prepend the code below to that line:

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

JavaScript

Step 4

Open assets/ajaxify-shop.js.liquid and search for the following:

propertiesText=propertiesText+key+": "+value+"<br/>"

JavaScript

Replace the code above with the line below:

if (key != "_ZapietId") { propertiesText=propertiesText+key+": "+value+"<br/>" }

JavaScript

Step 5

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

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

<div class="cart_btn clearfix">

HTML

Append the following code to that line:

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

HTML


Step 6

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

{% unless p.last == blank %}

HTML

Replace the code above with the following line:

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

HTML


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.

  • In the cart page

  • In the modal cart

Did this answer your question?