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 support@zapiet.com—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.
Open snippets/framework-cart.liquid and search for the following code:
{% unless p.last == blank %}
Replace the code above with the following:
{% unless p.last == blank or p.first == "_ZapietId" %}
Step 3
- This and the following two steps will make sure our widget is consistent in both carts.
Open layout/theme.liquid and search for the following code:
{{ "theme.min.js" | asset_url | script_tag }}
Replace the code above with the following:
{{ "theme.js" | asset_url | script_tag }}
Step 4
Open assets/theme.js and search for the following:
_this.renderDynamicCheckoutButtons();
Append the following code to the line above:
document.dispatchEvent(new CustomEvent("zapiet:start"));
Step 5
Open assets/theme.js and search for the following:
return update_all_html_done();
Prepend the following code to the line above:
document.dispatchEvent(new CustomEvent("zapiet:start"));
Step 6
- This step will make sure the widget is consistent on mobile.
Open snippets/cart.liquid and paste this code at the bottom of the file:
<!-- Start of Zapiet code --> <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() { updateWidget(); ZapietEvent.listen("widget_loaded", updateWidget); }); window.addEventListener("resize", updateWidget); </script> <!-- 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