Maker setup instructions

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.


Please reach out to us at—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 hide our ZapietID from the cart page. 
  • It appears twice in the file, so it needs to be implemented on both instances.

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

{% unless property.last == blank %}

Replace the line above with the following line:

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

Step 3

  • This step will make sure our widget is placed correctly in the cart.

Open snippets/cart.liquid and find the following code:

<div class="cart--footer">

Prepend the following code to the line above:

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

Step 4

  • This step will make sure the widget is consistent in both carts and on mobile.

Open snippets/cart.liquid and paste this code at the bottom of the file:

<script type="text/javascript" defer>
  function updateWidget() {
  	// Get current app instance
    var appDiv = document.querySelector("#storePickupApp");
    // Get appropriate cart root, based on theme's css media query
    var cartRoot;
    var mediaQuery = window.matchMedia('(max-width: 767px)');
    if (mediaQuery.matches) {
      	cartRoot = document.querySelector(".cart--root[data-view='mobile']");
    } else {
    	cartRoot = document.querySelector(".cart--root[data-view='desktop']");
    // Cart drawer does not have cart root, 
    // so check for cart footer directly in the document
    var cartFooter;
    if (cartRoot) {
    	cartFooter = cartRoot.querySelector(".cart--footer");
    } else {
    	cartFooter = document.querySelector(".cart--footer");
    // Move app div before cart footer
    cartFooter.parentNode.insertBefore(appDiv, cartFooter);

  document.addEventListener("DOMContentLoaded", function() {
    ZapietEvent.listen("widget_loaded", updateWidget);

  window.addEventListener("resize", updateWidget);

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 you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.