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 [email protected]—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>

HTML

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

HTML

Replace the code above with the following code:

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

HTML

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

HTML

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

HTML

Step 5

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

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

HTML

Replace the code above with the following code:

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

HTML


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.

Did this answer your question?