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 encourage you to do so, as the steps to install this theme are more complex than usual.

Only proceed if you are comfortable editing code yourself.

On the theme, click Actions > Edit code.

Step 2

Within snippets/framework--cart.liquid search for the following code (you'll find it in two places):

{% unless property.last == blank %}

HTML

Replace the line above with the following (in both places):

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

HTML

Step 3

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

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

<div class="cart--footer">

HTML

Prepend the following code to the code above:

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

HTML

The following steps are needed to make sure our widget shows correctly on mobile devices.

Step 4

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

{% case view %} {% when 'desktop' %}

HTML

Replace the lines above with the following:

<div id="desktop">

HTML

It should look similar to the screenshot below:


Step 5

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

{% when 'mobile' %}

HTML

Replace the line above with the following:

</div> <div id="mobile">

HTML

It should look similar to the screenshot below:

Step 6

Open snippets/framework--cart.liquid and search for the following code (located above the <div class="cart--footer">):

{% endcase %}

HTML

Replace the line above with the following:

</div>

HTML

It should look similar to the screenshot below:


Step 7

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

{% render 'framework--cart', view: 'mobile' %}

HTML

Remove it.

Step 8

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

#desktop {
display: none;
}
#mobile {
display: block;
}

@media only screen and (min-width: 768px) {
#desktop {
display: block;
}
#mobile {
display: none;
}
}

CSS

Step 9

Open Store Pickup + Delivery > Settings > Developers, and under Custom scripts add the following:

function updateWidget() {      
if ($(window).width() < 960) {
$(".cart--root").attr('data-view', 'mobile');
} else {
$(".cart--root").attr('data-view', 'desktop');
}

}
window.addEventListener("resize", function() {
updateWidget();
});
updateWidget();

JavaScript


The widget should appear on the cart page when you have added a product to the cart.

It should look similar to the screenshot below.

  • In the regular cart

  • In the drawer cart

Did this answer your question?