Signup

Colors 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 step removes our ZapietID from the cart page.

Open snippets/form-cart.liquid and search for the following:

{% unless p.last == blank %}

Replace the line above with the following line:

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


Step 3

  • This step will make sure our widget stays consistent on the cart page and reloads when the quantity is changed.

Open snippets/form-cart.liquid and search for the following:

</form>

Prepend the following code to the line above: 

<script>document.dispatchEvent(new CustomEvent("zapiet:start"))</script>


If you're using the drawer cart, you will need to add a few additional steps. 


Step 4

  • This step will make sure our widget shows in the drawer cart.

Open snippets/ajax-cart-template.liquid and search for the following:

<button type="submit" class="btn accent cart__checkout"

Append the following code to the line above:

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


Step 5

  • This step removes our ZapietID from the cart page.

Open snippets/ajax-cart-template.liquid and search for the following:

<div class="description">{{@key}}: {{this}}</div>

Remove that line of code from the file.


Step 6

If the colors in the drawer cart don't match your theme, use the code below to manage the widget's colors. 

Add the code in Store Pickup + Delivery > Settings > Developers, and change the colors as needed.

#storePickupApp .checkoutMethod .pickupIcon {
        fill: #fff; }
#storePickupApp .checkoutMethod .deliveryIcon {
        fill: #fff; }
#storePickupApp .checkoutMethod .shippingIcon {
        fill: #fff; }
#storePickupApp .checkoutMethod.active .pickupIcon {
        fill: #4e4132; }
#storePickupApp .checkoutMethod.active .deliveryIcon {
        fill: #4e4132; }
#storePickupApp .checkoutMethod.active .shippingIcon {
        fill: #4e4132; }

#storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active {
      background: #fff; }

    #storePickupApp .checkoutMethodsContainer.default .checkoutMethod.active .checkoutMethodName {
        color: #4e4132; }

#storePickupApp .checkoutMethodContainer .locations .location.active {
        color: #4e4132; }

   


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


Troubleshooting

Did you find it helpful? Yes No

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