Flex 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.


Please reach out to us at—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 will make sure the widget appears in the correct place on the cart page.

Open sections/cart__main.liquid and search for the following:

<div class="is-flex is-align-center is-justify-end cart__buttons">

Prepend the following code to the line above:

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

Step 3

Open sections/cart__main.liquid and search for the following:

{% unless p.last == blank %}

Replace the code above with the following code:

{% unless p.last == blank or p.first == "_ZapietId" %}

Step 4

Open templates/cart.ajax.liquid and search for the following:

{% if p.last != blank %}

Replace the code above with the following code:

{% if p.last != blank and p.first != "_ZapietId" %}

Step 5

  • This step will reload our widget when the quantity changes.

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

 },  unload: function unload($section) {

Prepend the following to the line above:

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

If you are using a drawer cart, make sure to remove the checkout button from the drawer cart in Theme > Customize > Cart. This button should be unchecked.

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 you find it helpful? Yes No

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