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 [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 and the following step will make sure our widget is consistent in the cart.

Open layout/theme.liquid and search for the following:

<script src="{{ 'custom.js?enable_js_minification=1' | asset_url }}" defer="defer"></script>


Cut that line of code and place it after the following code:

{%- endcomment -%}


It should look similar to the screenshot below:

Step 3

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

// ... update an app or a custom shipping caluclator


Append the following code to that line:

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


It should look similar to the screenshot below:

If you're using a drawer/pop up cart, you will need to add another step.

Step 4

  • This step will add padding on both sides of our widget.

Go to Store Pickup + Delivery > Settings > Developers, and under Custom styles, add the following CSS:

#storePickupApp {
padding-left: 10px;
padding-right: 10px;


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

Did this answer your question?