Enable the Zip on-site messaging (NZ)

Plugin icon


Enable the Zip on-site messaging New Zealand

Let your customers know

Consumers are not always aware of the different payment options available to them before they reach the checkout. Knowing that Zip is available early on can influence the purchase decision. Enabling the Zip on-site assets is a great way to let them know even before they decide to buy.


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

  1. Navigate to Snippets > Add a new snippet
  2. Name the new snippet zip-widget
  3. Click "Create snippet"

  1. Copy the zip-widget snippet code in the box below, and Paste it into the zip-widget.liquid snippet you just created.
<!-- Zip Widget Start -->
  <style type="text/css">
    background: none !important;
    padding-left: 0px !important;
    width: 100% !important;
{%- assign current_variant = product.selected_or_first_available_variant -%}
  {% if template.name == 'product' %}
  <script async src="https://widgets.partpay.co.nz/zip-widget-classic-v3.0.0.js?amount={{ current_variant.price | divided_by: 100.0 }}&locale=nz"></script>
  {% else %}
  <script async src="https://widgets.partpay.co.nz/zip-widget-classic-v3.0.0.js?&justification=right&amount={{ cart.total_price | divided_by: 100.0 }}&locale=nz"></script>
  {% endif %}
<!-- Zip Widget End -->

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

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

  2. 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' %}
<!-- Zip Widget End -->
  1. 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>
  1. 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' %}
<!-- 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

  1. 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!