Signup

Emerge 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 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 %}

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

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


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">

Prepend the following code to the code above:

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


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' %}

Replace the lines above with the following:

<div id="desktop">

It should look similar to the screenshot below:


Step 5

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

{% when 'mobile' %}

Replace the line above with the following:

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

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 %} 

Replace the line above with the following:

</div>

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' %}

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;
  }
}


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();



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.