Shopify

Enable the Zip on-site messaging New Zealand

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

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

<script type="text/javascript" src="https://static.zip.co/lib/js/zm-widget-js/dist/zip-widget.min.js"></script>

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 even be named product.form

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' %}
<div style="cursor:pointer" 
     id="zip-product-widget" 
     data-zm-widget="popup" 
     data-zm-region="NZ"
     data-env="production"
     data-zm-merchant="insert your AU merchant public id here or leave empty for NZ"      
     data-zm-price="insert product price here" 
     data-zm-asset="productwidget" 
     data-zm-popup-asset="termsdialog" 
     >
</div>

<!-- Zip Widget End -->

4. Click "Save"

Implement the cart page widget

1. Navigate to Sections > cart-template.liquid

2. To locate the area correct, search (press Ctrl + F) for checkout

– Locate the last highlighted “subtotal”, this should be in the following line of code (or similar):

<span class="h5 cart__subtotal-price">{{ cart.total_price | money }}</span>

3. Copy the Zip Widget Code in the box below, and paste it after the line of code you just located

<!-- Zip Widget -->
        {% render 'zip-widget' %}
<div style="cursor:pointer" 
     id="zip-product-widget" 
     data-zm-widget="popup" 
     data-zm-region="NZ"
     data-env="production"
     data-zm-merchant="insert your AU merchant public id here or leave empty for NZ"      
     data-zm-price="insert product price here" 
     data-zm-asset="productwidget" 
     data-zm-popup-asset="termsdialog" 
     >
</div>
<!-- Zip Widget End -->

🚧

If you’re unable to find the cart-template.liquid file, look for the cart.liquid file under the Sections file list or the Templates file list

4. Click "Save"

👍

Need some help?

You can find our FAQs here but if you'd like to get in touch with our Zip NZ Merchant Experience Team, please submit a request here!