Shopify

Enable the Zip on-site messaging AU

Mobile Desktop

📘

Mobile view of Zip widgets

📘

Desktop view of Zip widgets

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:

{{ '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

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:

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

Add the Cart Page widget

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>

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