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.
- 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() {
updateWidget();
ZapietEvent.listen("widget_loaded", updateWidget);
});
window.addEventListener("resize", updateWidget);
</script>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
