Shopify

US Widget Installation Options

Widget Overview

The Zip Widget is a visual price breakdown that appears on the product page, cart, and mini cart.

It is an easy way for your customers to understand Zip's benefits, how it works, and help inspire them to checkout. Our merchant partners with the Zip Widget on their product pages have shown that the widget can increase Conversion rate and Topline sales by more than 20%!

Shown below is an example of what the widget will look like once added to your product page, mini cart, and cart page.

Widget Options

• Zip Widget App: To get the widget integrated in your Shopify store, please follow the Zip Widget App instructions to add the widget in just a few clicks!

• Zip Widget Lite: If you would prefer to integrate the widget manually, you can follow our Zip Widget Lite instructions below.

🚧

Widget App and Widget Lite Compatibility

First, please check you are using one of the compatible Shopify Themes for the Widget App and Widget Lite here.

Don't worry if your theme is not supported, you can still integrate our widget!

• Zip Classic Widget: You can follow our Classic Widget instructions.

Widget Lite

About Widget Lite

Widget Lite is an 'out-of-the-box’ solution that allows brands to easily integrate our widget onto the product detail, cart, and mini-cart page. Widget lite is only compatible with specific Shopify themes, confirm below to see if your theme is supported. Customization is not supported with widget lite, but can be done so with our classic widget.

A technical background maybe helpful when attempting to integrate the classic widget. Instructions for classic widget integration can be found below.

📘

Shopify Admin

Before starting, please ensure you are logged into your Shopify store as an Admin

Installation Video

Installation Instructions

1. In the left menu, click Online Store to expand drop down menu.

2. Then click Themes.

3. For the theme you would like to edit, expand the Actions drop down menu.

4. Choose Edit Code.

5. This will open the Layout menu to the left.

6. Find the theme.liquid file.
   a. Edit this file.
   b. Copy and insert Zip Widget Lite script from below in your theme.liquid file before the closing tag.

{% comment %} <!-- Insert QuadPay Widget Lite --> {% endcomment %}
<script src="https://widgets.quadpay.com/quadpay-shopify.js" defer="defer"></script>

6. Click save.

👍

Congratulations! Well done!

View the theme you just worked on, if the widget was integrated properly it should appear in your product page, mini cart, and cart. If it doesn't, you will need to integrate via Classic Widget instructions.

📘

Go-Live Next Steps - Almost there!

Please configure your Shopify Zip Payment Gateway.

This allows your customer select Zip as a payment choice at Checkout. The Widget is only for informational and marketing purposes.

Widget Lite Compatibility

📘

Supported Shopify Themes: (August, 2022).

atlantic
blockshop
boundless
brilliant
broadcast
brooklyn
canopy
cascade
colors
debut
district
ella
empire
envy
fashionopolism
flex
flow
focal
foxic
handy
icon
impulse
kalles
minimal
modular
motion
narrative
parallax
pipeline
pop
prestige
responsive
showtime
simple
split
streamline
sunrise
super
supply
symmetry
testament
turbo
vantage
venture
venue
warehouse
wookie
zeexo

Classic Widget

🚧

Re-integration via Classic Widget Instructions

If you are integrating the Classic Widget after having already integrated Widget Lite, please remember to remove the Widget Lite code you have already inserted before you start the Classic Widget integration.

Before You Start
These instructions are for a Shopify store using one of the default Shopify or lightly customized themes. If the store's theme is heavily customized, you may have to add the below snippets to different templates and files.

For additional integration support: email us

Add the Widget to the PDP

1. Login to your Shopify store.
2. In the left menu, click Online Store

3. For the theme you would like to edit, expand the Actions menu and choose Edit Code.

📘

We recommend adding the Zip widget to a development theme or a copy of the currently live theme. This way you can control when you share the integration with your customers.

4. In the Layout menu to the left, open theme.liquid.

5. In the theme.liquid file, before the closing </body> tag, insert this script which calls the Zip informational modal from each widget:

<!-- quadpay.js Library -->
<script src="https://cdn.us.zip.co/v1/quadpay.js"></script>

Then Click Save.

6. Locate the Product Details Page template. Often this is in the Sections folder in the file product-template.liquid file. (If your theme is customized, the Product Details Page template may be in another file.) Inside the Product Details Page template, locate where the price is displayed. Then, right below the Product Price, paste in this snippet. Click Save.

<!-- Insert Zip Widget -->
  <quadpay-widget-v3 amount={{ current_variant.price | divided_by: 100.00 }}></quadpay-widget-v3>

7. Note the variable that is used to display the price. Paste this same price variable after amount= in the above snippet. Shopify uses a variety of variables to indicate the product price, including:

• Current_variant.price
• Variant.price
• Product.price
• Product.selected_or_first_available_variant.price
• If the price is displayed with a JavaScript variable, you may need to wrap the price variable in raw tags as follows:
  {% raw %} {{{totalQPPrice}}} {% endraw %}

Note: If the above snippet always shows "4 interest-free payments on orders over ${min price} even when the price is above the minimum allowed price, the price variable after amount= needs to be replaced.

8. Click the Preview link in the top menu to preview the Zip Widget in this theme.

📘

Customizing the Styling of the Zip Widget

For guidance on customizing the styling of the widget, visit the Zip Widget Integration Guide.

Add Widget to Cart

After you have added the widget to the Product Details Page template, add the widget to the Cart template.

1. Locate the Cart template. Often this is in the Sections folder in the file cart-template.liquid file. (If your theme is customized, the Cart template may be in another file.) Inside the Cart template, locate where the price is displayed. Then, right below the Cart Subtotal or Cart Total, paste in this snippet. Click Save.

<!-- Insert Zip Widget -->
  <quadpay-widget-v3 amount={{ cart.total_price | divided_by: 100.00 }}></quadpay-widget-v3>

2. Note the variable that is used to display the cart total. Paste this same cart total variable after amount= in the above snippet. Shopify uses various variables to indicate the cart total, but typically the cart total variable is: cart.total_price
   Note: If the above snippet always shows "4 interest-free payments on orders over ${min price} even when the price is above the minimum allowed price, the cart total variable after amount= needs to be updated.

3. Click the Preview link in the top menu to preview the Zip Widget in this theme.

📘

Customizing the Styling of the Zip Widget

For guidance on customizing the styling of the widget, visit the Zip Widget Integration Guide.

Add Widget to Mini Cart

If your site uses a Mini Cart, after you add the widget to the Product Details Page and Cart templates, add the widget to the Mini Cart.

1. Locate the Mini Cart template. Often this is handled in the Layout/theme.liquid file, but the mini cart is also frequently handled through separate JavaScript files in the Assets folder. Inside the Mini Cart file, locate where the price is displayed. Then, right below the Cart Subtotal or Cart Total, paste in this snippet. Click Save.

<!-- Insert Zip Widget -->
  <quadpay-widget-v3 amount={{ cart.total_price | divided_by: 100.00 }}></quadpay-widget-v3>

2. Note the variable that is used to display the mini cart total. Paste this same variable after amount= in the above snippet. Shopify uses various variables to indicate the cart total in the mini cart, but often the mini cart total variable is: cart.total_price or {{{totalPrice}}}
   Note: If the above snippet always shows "4 interest-free payments on orders over ${min price} even when the price is above the minimum allowed price, the cart total variable after amount= needs to be updated.

3. Click the Preview link in the top menu to preview the Zip Widget in this theme.

Sometimes, the Mini Cart is already quite customized and integrating the Zip widget requires additional customizing. If you would like support with adding the widget to the Mini Cart or for any questions please get in touch with us.

Widget FAQs

What if I would like to customize my widget?

For merchants or developers that are comfortable working with code, we suggest integrating via the Classic Zip Widget.

The Classic Widget integration method offers the most flexibility and options, however, you may need to hire a Shopify developer to assist you.

What happens if I try to use Widget Lite in an unsupported Theme?

In most cases, your theme will not be affected and the widget will simply not appear. We then suggest integrating via the Classic Zip Widget.