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

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