---
updatedAt: 2026-09-04T11:22:20.000Z
agentTools:
  projectIndex: https://docs.us.zip.co/llms.txt
---

# Zip Widget for Shopify

> 📘 Before You Start
>
> If you haven't already, please try installing the [Zip On-Site Messaging](https://docs.us.zip.co/docs/installing-the-zip-on-site-messaging-app) app for a more streamlined and user-friendly installation experience.
>
> These instructions are for a Shopify store using moderately customized themes. If the store's theme is heavily customized, you may have to add the below snippets to different templates and files.

## Add the Zip widget to your Product Pages

1. Log in to your Shopify store.
2. In the left menu, click **Online Store**

![](https://files.readme.io/47b8b28-ClickOnlineStore.PNG "ClickOnlineStore.PNG")

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

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/6f2077f95b021ca64dafdcd52204d0576da5d5b6dc633c7ed3fa4201b4565479-Screenshot_2025-03-27_at_3.56.32_PM.png",
        "shopify_editcode.PNG",
        631
      ],
      "align": "center",
      "sizing": "100"
    }
  ]
}
[/block]

> 📘
>
> 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**.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/a11bea7-Shopify_Theme.Liquid.png",
        "Shopify Theme.Liquid.png",
        2398
      ],
      "align": "center",
      "sizing": "100"
    }
  ]
}
[/block]

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

```javascript Zip Informational Modal Script
<!-- zip.js Library -->
<script src="https://cdn.us.zip.co/v1/zip.js"></script>
```

Then click **Save**.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/9bd05443667bb536ba8e5a760b6bfcca79950789829ada52241c0620ed51223d-Screenshot_2025-03-27_at_4.12.23_PM.png",
        "Shopify_Add Script.png",
        ""
      ],
      "align": "center",
      "sizing": "100% "
    }
  ]
}
[/block]

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 the following code snippet. Click **Save**.

```liquid PDP -  Include Widget Snippet
<!-- 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 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.

![](https://files.readme.io/39d6b1a-Shopify_PDP_Code.png "Shopify PDP Code.png")

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

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/fcd344e01ef95658dca775377aa6617426ed56c2775562a68de03074166c540b-Screenshot_2025-03-27_at_4.17.57_PM.png",
        "PDP_Zip.png",
        1916
      ],
      "align": "center",
      "border": true
    }
  ]
}
[/block]

> 📘 Customizing the Styling of the Zip Widget
>
> For guidance on customizing the styling of the widget, visit the [Zip Widget Integration Guide](https://docs.us.zip.co/docs/zip-widget#customization).

## Add the Zip widget to your 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**.

```liquid Cart - Include Widget Snippet
<!-- Insert Zip Widget -->
  <quadpay-widget-v3 amount={{ cart.total_price | divided_by: 100.00 }} merchantId="[Insert merchant Id]" ></quadpay-widget-v3>
```

![](https://files.readme.io/536f7dc-Shopify_Cart_Code.png "Shopify Cart Code.png")

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

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/4fdbf759b763252d15558cdb5d1507596ef9054012d2a4ff189b69242034de9c-Screenshot_2025-03-27_at_4.22.42_PM.png",
        "Cart_Zip.png",
        640
      ],
      "align": "center",
      "sizing": "70% ",
      "border": true
    }
  ]
}
[/block]

> 📘 Customizing the Styling of the Zip Widget
>
> For guidance on customizing the styling of the widget, visit the [Zip Widget Integration Guide](https://docs.us.zip.co/docs/zip-widget#customization).

## Add the Zip widget to your 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**.

```liquid Mini Cart - Include Widget Snippet
<!-- Insert Zip Widget -->
  <quadpay-widget-v3 amount={{ cart.total_price | divided_by: 100.00 }} merchantId="[Insert merchant Id]" ></quadpay-widget-v3>
```

![](https://files.readme.io/c592e82-minicart_quadpay__code.png "minicart_quadpay_ code.png")

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

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/5f5bbf3d3e469a892d9d6a219287241d845dbaa05072500c8ed662285edb864c-Screenshot_2025-03-27_at_4.25.55_PM.png",
        "minicart_quadpay_ screen.png",
        1084
      ],
      "align": "center",
      "sizing": "50% ",
      "border": true
    }
  ]
}
[/block]

> 📘 Need additional support?
>
> If you would like support with adding the Zip widget to your site please reach out to **[Partner Support](mailto:partners@us.zip.co)**.