Signup

Focal 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 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 will make sure the widget shows in the cart page.

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

<button type="submit" is="loader-button" class="cart__checkout-button checkout-button button button--primary button--full" name="checkout">
HTML

Prepend the following to the code above:

<div id="storePickupApp"></div>


Step 3

  • This will prevent the checkout button from continuously loading in the cart page.

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

<button type="submit" is="loader-button" class="cart__checkout-button checkout-button button button--primary button--full" name="checkout">

Replace the code above with the following code:

<button type="submit"  class="cart__checkout-button checkout-button button button--primary button--full" name="checkout">


If you're using a drawer cart, two additional steps are needed. 


Step 4

  • This and the next step will redirect the checkout button in the drawer cart to the regular cart. Our widget is not compatible with the drawer cart on this theme (it cannot be placed there).

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

 <button is="loader-button" form="mini-cart-form" type="submit" class="checkout-button button button--primary button--full" name="checkout">

Replace the code above with the following code:

<button is="loader-button" form="mini-cart-form" type="submit" class="checkout-button button button--primary button--full" name="cart">


Step 5

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

<input type="hidden" name="checkout">

Replace the code above with the following code:

<input type="hidden" name="cart">

 


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.