---
updatedAt: 2026-05-14T00:58:05.000Z
agentTools:
  projectIndex: https://developers.zip.co/llms.txt
---

# Add the IZI on-site messaging manually - Australia

<HTMLBlock>{`
<div class="article_header">
  <div class="article__header--icon">
    <img src="https://zip.co/static/zip-docs/docs-assets/icons/plugins.svg" alt="Plugin icon">
  </div>
  <div class="article__header--title" id="page-introduction">
    <h1 class="article__title article_title_subpage">Shopify</h1>
    <p class="subpage_title">Enable the Zip on-site messaging AU</p>
  </div>
  <div class="clearfix"></div>
</div>
<br>
`}</HTMLBlock>

<HTMLBlock>{`
<div class="sc-notice info">
  <p class="warning-title">Let your customers know</p>
  <p>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.</p>
</div>
`}</HTMLBlock>

<HTMLBlock>{`
<div class="tabs">
  <input type="radio" name="tabs" id="tab1" checked>
  <label for="tab1"><i class="fa fa-html5"></i><span>Mobile</span></label>

  <input type="radio" name="tabs" id="tab2">
  <label for="tab2"><i class="fa fa-css3"></i><span>Desktop</span></label>

  <div id="tab-content1" class="tab-content">
    <blockquote class="callout callout_info" theme="📘">
      <h3 class="callout-heading empty"><span class="callout-icon">📘</span></h3>
      <p>Mobile view of Zip widgets</p>
    </blockquote>
    <img class="img_box_shadow img_list" style="width:914px" src="https://zip.co/static/Readme%20Guides/asset%20images/mobile-widget.png"></img>
    <br><br>
  </div>

  <div id="tab-content2" class="tab-content">
    <blockquote class="callout callout_info" theme="📘">
      <h3 class="callout-heading empty"><span class="callout-icon">📘</span></h3>
      <p>Desktop view of Zip widgets</p>
    </blockquote>
    <img class="img_box_shadow img_list" style="width:914px" src="https://zip.co/static/Readme%20Guides/asset%20images/desktop-widget.png"></img>
    <br><br>
  </div>
</div>

<style>
.tabs { float: none; list-style: none; padding: 0; }
.tabs:after { content: ''; display: table; clear: both; }
.tabs input[type=radio] { display:none; }
.tabs label { display: block; float: left; color: #ccc; text-decoration: none; text-align: center; line-height: 2; cursor: pointer; padding: 10px; margin-left: -1px; position: relative; left: 1px; }
.tabs label i { padding: 5px; margin-right: 0; }
.tab-content { display: none; width: 100%; float: left; padding: 15px; box-sizing: border-box; background-color:#ffffff; border-top: 1px solid var(--sail-color-gray-100); margin-top: -3px; }
.tabs [id^="tab"]:checked + label { border-bottom: 2px solid #1c70f2; color: #1c70f2; }
#tab1:checked ~ #tab-content1, #tab2:checked ~ #tab-content2 { display: block; }
@media (min-width: 768px) { .tabs i { padding: 5px; margin-right: 10px; } .tabs label span { display: inline-block; } }
</style>
`}</HTMLBlock>

## 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, then right-click and select ***Snippets > Add a new file***
3. Name the new snippet **zip-widget**
4. Click ***Done***
5. Copy the zip-widget snippet code below and paste it into the snippet:

```liquid
{{ '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 ***ENTER YOUR ZIP PUBLIC KEY HERE*** with **your** actual Zip Public Key (no extra spaces).
7. Click ***Save***

<Image align="center" src="https://files.readme.io/39bf7c41cff0dd897c74227e39e57dc72ad5f1efdec40031bbbd246dd58fa90b-Screenshot_2025-09-17_at_9.47.23_AM.png" />

## Add the Product Page widget

1. Locate the product template file (usually ***sections/main-product.liquid***)
2. Search for ***render 'product-'price'*** or ***render 'price'***
3. Paste the following code directly after the last price:

```liquid
<!-- 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***

<Image align="center" src="https://files.readme.io/0b4295d58d6e1090838e764de8d45a014b5f7db6a566f5d5999e4e59502f94f0-Screenshot_2025-09-17_at_9.50.15_AM.png" />

## Add the Cart Page widget

<br />

1. In Shopify theme editor, navigate to ***Sections > main-cart-footer.liquid***
2. Search for the last occurrence of **Shipping**
3. Paste the following code below the `</div>`

```liquid
<!-- 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 -->
```

4. Click ***Save***

<Image align="center" src="https://files.readme.io/a873a2da0deb48dc73fade02926edb98a121d4ec4738b99784cf916d1b6a9e75-Screenshot_2025-09-17_at_9.52.15_AM.png" />

<HTMLBlock>{`
<p class="h2-title">Next Steps</p>
<div class="next-steps">
  <a href="shopify-landing-page" class="next-steps__step" style="width:45%">
    <div class="next-steps__label">required</div>
    <div class="next-steps__title">Set up a Zip landing page</div>
    <p class="next-steps__body">Create a Zip landing page using our default assets.</p>
  </a>
  <a href="shopify-zip-payment-icon" class="next-steps__step" style="width:45%">
    <div class="next-steps__label">required</div>
    <div class="next-steps__title">Add the Zip payment icon</div>
    <p class="next-steps__body">Add the Zip payment icon in the footer of your website.</p>
  </a>
</div>
`}</HTMLBlock>