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 snippets/form-cart.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 will make sure our widget stays consistent on the cart page and reloads when the quantity is changed.
Open snippets/form-cart.liquid and search for the following:
</form>
Prepend the following code to the line above:
<script>document.dispatchEvent(new CustomEvent("zapiet:start"))</script>If you're using the drawer cart, you will need to add a few additional steps.
Step 4
- This step will make sure our widget shows in the drawer cart.
Open snippets/ajax-cart-template.liquid and search for the following:
<button type="submit" class="btn accent cart__checkout"
Append the following code to the line above:
<div id="storePickupApp"></div>
Step 5
- This step removes our ZapietID from the cart page.
Open snippets/ajax-cart-template.liquid and search for the following:
<div class="description">{{@key}}: {{this}}</div>Remove that line of code from the file.
Step 6
If the colors in the drawer cart don't match your theme, use the code below to manage the widget's colors.
Add the code in Store Pickup + Delivery > Settings > Developers, and change the colors as needed.
#storePickupApp .checkoutMethod .pickupIcon {
fill: #fff; }
#storePickupApp .checkoutMethod .deliveryIcon {
fill: #fff; }
#storePickupApp .checkoutMethod .shippingIcon {
fill: #fff; }
#storePickupApp .checkoutMethod.active .pickupIcon {
fill: #4e4132; }
#storePickupApp .checkoutMethod.active .deliveryIcon {
fill: #4e4132; }
#storePickupApp .checkoutMethod.active .shippingIcon {
fill: #4e4132; }
#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active {
background: #fff; }
#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active .checkoutMethodName {
color: #4e4132; }
#storePickupApp .checkoutMethodContainer .locations .location.active {
color: #4e4132; }
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
