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 removes our ZapietID from the cart page.
Open sections/cart-template.liquid and search for the following:
{% unless p.last == blank %}Replace the line above with the following line:
{% unless p.last == blank or p.first == "_ZapietId" %}Step 3
- This step makes sure the widget is persistent, and that it reloads when the quantity is changed.
Open assets/theme.js and search for the following:
if (successCallback) {Prepend the following code to the code above:
document.dispatchEvent(new CustomEvent("zapiet:start"));If you would like to show our widget in the drawer cart, you would need to implement three additional steps.
Step 4
- This step will add our widget to the drawer cart.
Open sections/cart-drawer.liquid and search for the following:
<div class="cart-summary__buttons cart-summary__section border-bottom">
Prepend the following to the code above:
<div id="storePickupApp"></div>
Step 5
- This step will redirect the checkout button in the drawer cart to the checkout. It leads to the regular cart by default.
Go to theme Customize > Cart page > Drawer cart, and make sure the setting "Checkout button goes to cart page" is unchecked.
Step 6
- This step makes sure the widget is persistent in the drawer cart, and that it reloads when the quantity is changed.
Open assets/theme.js and search for the following:
$('.cart-summary.updating, .cart-summary .updating').removeClass('updating');A bit further down, append the following code to that code block, just like in the image below:
document.dispatchEvent(new CustomEvent("zapiet:start"));
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.
If you have implemented the steps to show the widget in the drawer cart, it would look similar to the screenshot below.
