Signup

Studio 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 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 

  • The next 2 steps will add the cart form which allows our widget to show.

Open sections/main-cart-footer.liquid and search for the following:

 <div class="cart__ctas"

Prepend the following to the code above:

<form action="{{ routes.cart_url }}" method="post" id="cart" id="cart_form">
<div id="storePickupApp"></div>

 

Step 3

Open sections/main-cart-footer.liquid and search for the following: 

{%- if additional_checkout_buttons -%}

Prepend the following to the code above:

</form>

 

Step 4

  • This will reload our widget when the quantity changes.

Open assets/cart.js and search for the following: 

const parsedState = JSON.parse(state);

Prepend the following to the code above:

 document.dispatchEvent(new CustomEvent("zapiet:start"));

 

Step 5

  • This will remove the checkout button from the cart notification, so our app on the cart page cannot be bypassed.

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

<button class="button button--primary button--full-width" name="checkout">{{ 'sections.cart.checkout' | t }}</button>

Prepend the following to the code above:

{% comment %}

Append the following to the code you searched for:

 {% endcomment %}

It should look similar to the image below:

   


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. 



Troubleshooting

Did you find it helpful? Yes No

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