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 placed correctly in the ajax cart.

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

<div class="ajax-cart__buttons">

Prepend the following code to the line above:

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

Step 3

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

{% unless p.last == blank %}

Replace the line above with the following code:

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

Step 4

  • This and the next step will make sure our widget is consistent in both carts.

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

Shopify.theme.shippingCalculator = {

Prepend the following code to that line:

/* Start of Zapiet code */
document.addEventListener("DOMContentLoaded", function() {
  /** Updates first item's key in the theme */
  function updateThemeKey() {
    Shopify.theme.cart.getCart().then(function(updatedCart) {
      var keyElements = document.querySelectorAll("[data-item-key]");
      
      // Case: empty cart
      if (!updatedCart.items 
          || updatedCart.items.length == 0
          || !keyElements
          || keyElements.length == 0
         ) {
        return;
      }
      
      // Grab the first item's key in the theme
      var themeKey = keyElements[0].getAttribute("data-item-key");
      
      // Grab the first item's key in the cart
      var updatedKey = updatedCart.items[0].key;      // Case: No keys to update
      if (themeKey == updatedKey) {
          return;
      }      // Update the key
      document
      	.querySelectorAll("[data-item-key='" + themeKey + "']")
      	.forEach(function(element) {
            element.setAttribute("data-item-key", updatedKey);
        });
    });
  }
  ZapietEvent.listen("checkoutEnabled", function() {
  	updateThemeKey();
  });
});
/* End of Zapiet code */

Step 5

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

var config = document.getElementById('cart-config');

Prepend the following code to that line:

/* Start of Zapiet code */
    window.$ = window.jQuery;
    document.dispatchEvent(new CustomEvent("zapiet:start"));
/* End of Zapiet code */

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.

  • In the regular cart

  • In the drawer cart

Did this answer your question?