Shopify

Enable the Zip on-site messaging

Mobile Desktop

📘

Mobile view of Zip widgets

📘

Desktop view of Zip widgets

#3 Tab title here

#3 Tab content here

Dolor sit amet

Ololo pysh pysh

What is involved in adding the widgets?

There are 3 key steps to be completed here:

• Add the Javascript to a new snippet
• Add the widget code to your product page template
• Add the widget to your cart page template

Setup the Zip widgets library

1. In the Shopify admin dashboard, navigate to Online Store > Themes > Actions > Edit code

2. Navigate to Snippets > Add a new snippet
3. Name the new snippet “zip-widget”
4. Click "Done"

5. Copy the zip-widget snippet code in the box below, and Paste it into the zip-widget.liquid snippet you just created.

{{ 'https://static.zip.co/lib/js/zm-widget-js/dist/zip-widget.min.js' | script_tag }}
<div data-zm-merchant="ENTER YOUR ZIP PUBLIC KEY HERE" data-env="production"></div>

6. Replace the ENTER YOUR ZIP PUBLIC KEY HERE in the above code with your specific Zip Public Key
   
   

🚧

Paste your Public Key between the quotation marks " " and ensure there are no spaces at both end of the text.

Add the product page widget

Now we can move onto adding the code snippet to enable the widget below the product price.

1. Locate the product template file. This is usually in the sections named product-template.liquid
   
   

🚧

Cant find the right template?

If the product-template.liquid file in the Sections file list doesn't exist, look for the product.liquid file under the Sections file list or the Templates file list. It might be named product.form or main.product

2. Locate the "Price" search (press Ctrl + F ) for price
   This will highlight all the places the price appear on your product page.
   
   

3. Copy the Zip Widget Code in the box below, find the last highlighted price, and Paste it directly AFTER the < /div>
   
   

<!-- Zip WIDGET -->
{%render 'zip-widget'%}
<span style="cursor:pointer" id="shopify-zip-prod-widget" data-zm-asset="productwidget" data-zm-widget="popup" data-zm-popup-asset="termsdialog"></span>
<!-- end Zip WIDGET -->

4. Click "Save"

Implement the cart page widget

Now let's add the widget to the cart page.

1. In the Shopify theme editor navigate to Sections > cart-template.liquid
   
   

🚧

cart.liquid file in the Sections file list doesn't exist?

Try to locate the cart.liquid file under the Sections file list or the the Templates file list.

2. To locate the area above the checkout button, search (press Ctrl + F ) for checkout.
3. Locate the first highlighted “checkout”, this should be in the following line of code:
   
   

<div class="cart__shipping">{{ 'cart.general.shipping_at_checkout' | t }}</div>

4. Once you have found the line above you can paste the widget code below above this line
   
   

<!-- Zip WIDGET --> 
  {%include 'zip-widget'%} 
  <div style="cursor:pointer" id="zip-cart-widget" data-zm-asset="cartwidget" data-zm-widget="popup" data-zm-popup-asset="termsdialog"></div> 
<!-- end Zip WIDGET -->

5. Click "Save"