Previous Versions of the Widget

This version of the widget is older and eventually will be deprecated. For new integrations, please refer to the instructions for integrating the most current version of the QuadPay widget.

Add Widget to PDP

📘

Before You Start

These instructions are for a Shopify store using a default or lightly customized theme. If the store's theme is heavily customized, you may have to add the below snippets to different templates and files. If you would like support with adding the widget or for any questions please get in touch with us.

  1. Login to your Shopify store.
  2. In the left menu, click Online Store
265
  1. For the theme you would like to edit, expand the Actions menu and choose Edit Code.
631

📘

We recommend adding the QuadPay 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.

  1. In the Layout menu to the left, open theme.liquid.
1007
  1. In the theme.liquid file, before the closing </body> tag, insert this script which calls the QuadPay informational modal from each widget:
{% comment %}<!--   Insert QuadPay Learn More modal script and geoblock QuadPay widget outside of U.S.  -->{% endcomment %}
<link rel="stylesheet" href="https://widgets.quadpay.com/geo-hide-widget.css" />
<script async src="https://widgets.quadpay.com/MERCHANT-SLUG-TO-REPLACE/quadpay-widget-1.1.0.js" id="qp-script" type="application/javascript"></script>

Be sure to replace MERCHANT-SLUG-TO-REPLACE with the unique merchant slug provided by QuadPay. Then Click Save.

889
  1. Expand the Snippets menu and click Add a new snippet. Name the new snippet product-quadpay.liquid.

  2. Paste the HTML snippet code provided by QuadPay into product-quadpay.liquid. Click Save.

{% comment %}<!-- QuadPay Product Page Widget START -->{% endcomment %}
<style>.qp-container{margin:0 0 10px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;width:100%;min-height:35px;z-index:1}.qp-descrip{margin-bottom:4px}.qp-descrip__price{font-weight:700;margin-left:2px}.qp-quadpay{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;position:relative;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.qp-quadpay__link{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.qp-quadpay__logo{width:90px;margin:.15em 12px 0 6px;position:relative;bottom:-1px}.qp-quadpay__learn{min-width:75px}.qp-quadpay__learn:hover{text-decoration:underline}</style>    

<div id="qp-container" class="qp-container">
  <div id="qp-descrip" class="qp-descrip">or 4 interest-free payments 
    {% assign quadpay_min = 3500 %}
    {% assign quadpay_max = 150000 %}
    {% if current_variant.price  < quadpay_min %}
    on orders <span class="qp--nowrap">over {{quadpay_min | money_without_trailing_zeros }}</span>
    {% elsif current_variant.price  > quadpay_max %}
    on orders <span class="qp--nowrap">up to {{quadpay_max | money_without_trailing_zeros }}</span>
    {% else %}
    of <span class="qp-descrip__price">{{ current_variant.price | divided_by: 4.00 | money }}</span>
    {% endif %}
  </div>
  <div id="qp-quadpay" class="qp-quadpay">by
    <div id="qp-quadpay__link" class="qp-quadpay__link">
      <div id="qp-quadpay__logo" class="qp-quadpay__logo"><svg version="1.1" width="96" height="15" viewBox="0 0 96 15" xmlns="http://www.w3.org/2000/svg"><title>QuadPay</title><g fill="none" fill-rule="evenodd"><path d="m14.331 11.092l-1.348-1.6237c-0.06583-0.079292-0.16354-0.12517-0.2666-0.12517h-6.9553c-1.8958-0.18262-3.3253-1.6637-3.3253-3.4451 0-1.9098 1.6658-3.4637 3.7131-3.4637 0.089272 0 0.17819 0.0029803 0.2666 0.0088878 0.82947 0.055424 1.6146 0.36851 2.2346 0.89547 0.68467 0.58197 0.93434 1.3741 1.0205 2.2306l0.0029623 0.058259 9.556e-5 1.8504c8.32e-6 0.19136 0.15514 0.34648 0.3465 0.34648l1.8393-1.439e-5c0.19135 0 0.34647-0.15512 0.34647-0.34647 0-1.721e-4 -1e-7 -3.4419e-4 -4e-7 -5.1629e-4 -0.001863-1.2502-0.0036722-1.8882-0.0054277-1.9139-0.1935-3.0289-2.8707-5.4001-6.0949-5.4001-3.3668 0-6.1059 2.5786-6.1059 5.7482 0 2.9809 2.3749 5.441 5.5242 5.7223 0.019494 0.0016034 0.11878 0.0068593 0.57086 0.025299l3.0857 5.345e-4 0.49401 8.91e-5v0.62348 0.70757l6.77e-5 0.45914c1.737e-5 0.11774 0.059823 0.22742 0.15879 0.2912l1.8434 1.1881c0.16085 0.10367 0.37529 0.057311 0.47896-0.10354 0.03609-0.055997 0.055272-0.12121 0.055248-0.18783l-8.276e-4 -2.3544-1.912e-4 -0.62375h0.6691 1.1853c0.19137 0 0.3465-0.15513 0.3465-0.3465 0-0.08084-0.028266-0.15914-0.079904-0.22133z" fill=" #51626f"/><path d="m15.741 7.4022c0 2.4783 2.2212 4.337 4.9671 4.337 2.7634 0 5.0021-1.8587 5.0021-4.337v-6.9293c0-0.16304-0.15741-0.30978-0.3323-0.30978h-2.1512c-0.19239 0-0.3323 0.14674-0.3323 0.30978v6.7989c0 1.1902-0.92695 1.8587-2.1862 1.8587-1.2418 0-2.1512-0.66848-2.1512-1.8587v-6.7989c0-0.16304-0.13992-0.30978-0.3323-0.30978h-2.1512c-0.1749 0-0.3323 0.14674-0.3323 0.30978v6.9293zm11.841 4.1739c-0.26235 0-0.40226-0.21196-0.29733-0.42391l5.4743-10.973c0.052469-0.097826 0.1749-0.17935 0.29733-0.17935h0.1749c0.12243 0 0.24486 0.081522 0.29733 0.17935l5.4743 10.973c0.10494 0.21196-0.034979 0.42391-0.29733 0.42391h-1.9414c-0.31481 0-0.45473-0.097826-0.61214-0.40761l-0.62963-1.288h-4.7572l-0.62963 1.3043c-0.087449 0.19565-0.27984 0.3913-0.62963 0.3913h-1.9239zm4.2325-3.913h2.6584l-1.3292-2.6902h-0.01749l-1.3117 2.6902zm9.2695 3.6033v-10.793c0-0.16304 0.13992-0.30978 0.31481-0.30978h4.2675c3.3755 0 6.1389 2.5598 6.1389 5.6902 0 3.163-2.7634 5.7228-6.1389 5.7228h-4.2675c-0.1749 0-0.31481-0.14674-0.31481-0.30978zm2.7284-2.1033h1.8364c1.9763 0 3.2531-1.4511 3.2531-3.3098 0-1.8424-1.2767-3.2935-3.2531-3.2935h-1.8364v6.6033zm10.774 2.1033v-10.793c0-0.16304 0.13992-0.30978 0.3323-0.30978h4.215c2.3086 0 3.9177 1.6304 3.9177 3.6033 0 2.0217-1.6091 3.6685-3.9002 3.6685h-1.8364v3.8315c0 0.16304-0.15741 0.30978-0.3323 0.30978h-2.0638c-0.19239 0-0.3323-0.14674-0.3323-0.30978zm2.7284-6.212h1.7665c0.75206 0 1.2767-0.55435 1.2767-1.288 0-0.68478-0.52469-1.2065-1.2767-1.2065h-1.7665v2.4946zm6.0165 6.5217c-0.26235 0-0.40226-0.21196-0.29733-0.42391l5.4743-10.973c0.052469-0.097826 0.1749-0.17935 0.29733-0.17935h0.1749c0.12243 0 0.24486 0.081522 0.29733 0.17935l5.4743 10.973c0.10494 0.21196-0.034979 0.42391-0.29733 0.42391h-1.9414c-0.31481 0-0.45473-0.097826-0.61214-0.40761l-0.62963-1.288h-4.7572l-0.62963 1.3043c-0.087449 0.19565-0.27984 0.3913-0.62963 0.3913h-1.9239zm4.2325-3.913h2.6584l-1.3292-2.6902h-0.01749l-1.3117 2.6902zm10.546 3.6033v-5.1848l-3.8652-5.4457c-0.13992-0.21196 0-0.47283 0.27984-0.47283h2.2737c0.13992 0 0.22737 0.081522 0.27984 0.14674l2.4311 3.3424 2.4311-3.3424c0.052469-0.065217 0.12243-0.14674 0.27984-0.14674h2.2737c0.27984 0 0.41975 0.26087 0.27984 0.47283l-3.9177 5.4293v5.2011c0 0.16304-0.15741 0.30978-0.3323 0.30978h-2.0813c-0.19239 0-0.3323-0.14674-0.3323-0.30978z" fill=" #51626f"/><circle cx="93.75" cy="5.75" r="1.75" fill=" #51626f" fill-rule="nonzero"/></g></svg></div>
      <div id="qp-quadpay__learn" class="qp-quadpay__learn">Learn More</div>
    </div>   
  </div>    
</div>
{% comment %}<!-- QuadPay Widget END -->{% endcomment %}
  • The QuadPay Installment Price is simply the product price divided by 4. Shopify uses a variety of variables to indicate the product price. If the above snippet shows a QuadPay Installment Price of $0, the variable current_variant.price needs to be replaced. Examine how the product price is displayed on this page and replace current_variant.price all three times with the product price variable used in your store. Other common product price variables include: variant.price, product.price, product.selected_or_first_available_variant.price.
  • The default minimum price to purchase with QuadPay is $35.00. If your agreement with QuadPay specifies a different minimum price, please update {% assign quadpay_min = 3500 %} in the above snippet accordingly.
  • The default maximum price to purchase with QuadPay is $1,500.00. If your agreement with QuadPay specifies a different minimum price, please update {% assign quadpay_max = 150000 %} in the above snippet accordingly.
  1. Now, locate the Product Details Page template. Often this is in the Sections folder in the file product-template.liquid file. However, if your theme is customized, the Product Details Page template may be in another file.

  2. Inside the Product Details Page template, locate where the price is displayed. Then, right below the Product Price, paste in this include snippet. Click Save.

{% comment %}<!-- Insert QuadPay Widget -->{% endcomment %}
{% include 'product-quadpay' %}
1572
  1. Click the Preview link in the top menu to preview the QuadPay Widget in this theme.
1335

📘

Customizing the Styling of the QuadPay Widget

For guidance on customizing the styling of the widget, visit the QuadPay 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. Expand the Snippets menu and click Add a new snippet. Name the new snippet cart-quadpay.liquid.

  2. Paste the HTML snippet code provided by QuadPay into cart-quadpay.liquid. Click Save.

{% comment %}<!-- QuadPay Product Page Widget START -->{% endcomment %}
<style>.qp-container{margin:14px 0 10px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;width:100%;min-height:35px;z-index:1}.qp-cart{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;width:100%;}.qp-descrip{}.qp-descrip__price{font-weight:700;margin-left:2px}.qp-quadpay{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;position:relative;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.qp-quadpay__link{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.qp-quadpay__logo{width:90px;margin:.15em 12px 0 6px;position:relative;bottom:-1px}.qp-quadpay__learn{min-width:75px}.qp-quadpay__learn:hover{text-decoration:underline}</style>    

<div id="qp-container" class="qp-container"><div class="qp-cart">
  <div id="qp-descrip" class="qp-descrip">or 4 interest-free payments 
    {% assign quadpay_min = 3500 %}
    {% assign quadpay_max = 150000 %}
    {% if cart.total_price  < quadpay_min %}
    on orders <span class="qp--nowrap">over {{quadpay_min | money_without_trailing_zeros }}</span>
    {% elsif cart.total_price  > quadpay_max %}
    on orders <span class="qp--nowrap">up to {{quadpay_max | money_without_trailing_zeros }}</span>
    {% else %}
    of <span class="qp-descrip__price">{{ cart.total_price | divided_by: 4.00 | money }}</span>
    {% endif %}
  </div>
  <div id="qp-quadpay" class="qp-quadpay">by
    <div id="qp-quadpay__link" class="qp-quadpay__link">
      <div id="qp-quadpay__logo" class="qp-quadpay__logo"><svg version="1.1" width="96" height="15" viewBox="0 0 96 15" xmlns="http://www.w3.org/2000/svg"><title>QuadPay</title><g fill="none" fill-rule="evenodd"><path d="m14.331 11.092l-1.348-1.6237c-0.06583-0.079292-0.16354-0.12517-0.2666-0.12517h-6.9553c-1.8958-0.18262-3.3253-1.6637-3.3253-3.4451 0-1.9098 1.6658-3.4637 3.7131-3.4637 0.089272 0 0.17819 0.0029803 0.2666 0.0088878 0.82947 0.055424 1.6146 0.36851 2.2346 0.89547 0.68467 0.58197 0.93434 1.3741 1.0205 2.2306l0.0029623 0.058259 9.556e-5 1.8504c8.32e-6 0.19136 0.15514 0.34648 0.3465 0.34648l1.8393-1.439e-5c0.19135 0 0.34647-0.15512 0.34647-0.34647 0-1.721e-4 -1e-7 -3.4419e-4 -4e-7 -5.1629e-4 -0.001863-1.2502-0.0036722-1.8882-0.0054277-1.9139-0.1935-3.0289-2.8707-5.4001-6.0949-5.4001-3.3668 0-6.1059 2.5786-6.1059 5.7482 0 2.9809 2.3749 5.441 5.5242 5.7223 0.019494 0.0016034 0.11878 0.0068593 0.57086 0.025299l3.0857 5.345e-4 0.49401 8.91e-5v0.62348 0.70757l6.77e-5 0.45914c1.737e-5 0.11774 0.059823 0.22742 0.15879 0.2912l1.8434 1.1881c0.16085 0.10367 0.37529 0.057311 0.47896-0.10354 0.03609-0.055997 0.055272-0.12121 0.055248-0.18783l-8.276e-4 -2.3544-1.912e-4 -0.62375h0.6691 1.1853c0.19137 0 0.3465-0.15513 0.3465-0.3465 0-0.08084-0.028266-0.15914-0.079904-0.22133z" fill=" #51626f"/><path d="m15.741 7.4022c0 2.4783 2.2212 4.337 4.9671 4.337 2.7634 0 5.0021-1.8587 5.0021-4.337v-6.9293c0-0.16304-0.15741-0.30978-0.3323-0.30978h-2.1512c-0.19239 0-0.3323 0.14674-0.3323 0.30978v6.7989c0 1.1902-0.92695 1.8587-2.1862 1.8587-1.2418 0-2.1512-0.66848-2.1512-1.8587v-6.7989c0-0.16304-0.13992-0.30978-0.3323-0.30978h-2.1512c-0.1749 0-0.3323 0.14674-0.3323 0.30978v6.9293zm11.841 4.1739c-0.26235 0-0.40226-0.21196-0.29733-0.42391l5.4743-10.973c0.052469-0.097826 0.1749-0.17935 0.29733-0.17935h0.1749c0.12243 0 0.24486 0.081522 0.29733 0.17935l5.4743 10.973c0.10494 0.21196-0.034979 0.42391-0.29733 0.42391h-1.9414c-0.31481 0-0.45473-0.097826-0.61214-0.40761l-0.62963-1.288h-4.7572l-0.62963 1.3043c-0.087449 0.19565-0.27984 0.3913-0.62963 0.3913h-1.9239zm4.2325-3.913h2.6584l-1.3292-2.6902h-0.01749l-1.3117 2.6902zm9.2695 3.6033v-10.793c0-0.16304 0.13992-0.30978 0.31481-0.30978h4.2675c3.3755 0 6.1389 2.5598 6.1389 5.6902 0 3.163-2.7634 5.7228-6.1389 5.7228h-4.2675c-0.1749 0-0.31481-0.14674-0.31481-0.30978zm2.7284-2.1033h1.8364c1.9763 0 3.2531-1.4511 3.2531-3.3098 0-1.8424-1.2767-3.2935-3.2531-3.2935h-1.8364v6.6033zm10.774 2.1033v-10.793c0-0.16304 0.13992-0.30978 0.3323-0.30978h4.215c2.3086 0 3.9177 1.6304 3.9177 3.6033 0 2.0217-1.6091 3.6685-3.9002 3.6685h-1.8364v3.8315c0 0.16304-0.15741 0.30978-0.3323 0.30978h-2.0638c-0.19239 0-0.3323-0.14674-0.3323-0.30978zm2.7284-6.212h1.7665c0.75206 0 1.2767-0.55435 1.2767-1.288 0-0.68478-0.52469-1.2065-1.2767-1.2065h-1.7665v2.4946zm6.0165 6.5217c-0.26235 0-0.40226-0.21196-0.29733-0.42391l5.4743-10.973c0.052469-0.097826 0.1749-0.17935 0.29733-0.17935h0.1749c0.12243 0 0.24486 0.081522 0.29733 0.17935l5.4743 10.973c0.10494 0.21196-0.034979 0.42391-0.29733 0.42391h-1.9414c-0.31481 0-0.45473-0.097826-0.61214-0.40761l-0.62963-1.288h-4.7572l-0.62963 1.3043c-0.087449 0.19565-0.27984 0.3913-0.62963 0.3913h-1.9239zm4.2325-3.913h2.6584l-1.3292-2.6902h-0.01749l-1.3117 2.6902zm10.546 3.6033v-5.1848l-3.8652-5.4457c-0.13992-0.21196 0-0.47283 0.27984-0.47283h2.2737c0.13992 0 0.22737 0.081522 0.27984 0.14674l2.4311 3.3424 2.4311-3.3424c0.052469-0.065217 0.12243-0.14674 0.27984-0.14674h2.2737c0.27984 0 0.41975 0.26087 0.27984 0.47283l-3.9177 5.4293v5.2011c0 0.16304-0.15741 0.30978-0.3323 0.30978h-2.0813c-0.19239 0-0.3323-0.14674-0.3323-0.30978z" fill=" #51626f"/><circle cx="93.75" cy="5.75" r="1.75" fill=" #51626f" fill-rule="nonzero"/></g></svg></div>
      <div id="qp-quadpay__learn" class="qp-quadpay__learn">Learn More</div>
    </div>   
  </div>
 </div> 
</div>
{% comment %}<!-- QuadPay Widget END -->{% endcomment %}
  • The QuadPay Installment Price is simply the cart total price divided by 4. Shopify typically uses the variable cart.total_price for the cart total price, but if the above snippet shows a QuadPay Installment Price of $0, the variable cart.total_price needs to be replaced. Examine how the cart total is displayed on this page and replace cart.total_price all three times with the cart total variable used in your store.
  • The default minimum price to purchase with QuadPay is $35.00. If your agreement with QuadPay specifies a different minimum price, please update {% assign quadpay_min = 3500 %} in the above snippet accordingly.
  • The default maximum price to purchase with QuadPay is $1,500.00. If your agreement with QuadPay specifies a different minimum price, please update {% assign quadpay_max = 150000 %} in the above snippet accordingly.
  1. Now, locate the Cart template. Often this is in the Sections folder in the file cart-template.liquid file. However, if your theme is customized, the Cart template may be in another file.

  2. Inside the Cart template, locate where the price is displayed. Then, right below the Cart Subtotal or Cart Total, paste in this include snippet. Click Save.

{% comment %}<!-- Insert QuadPay Widget -->{% endcomment %}
{% include 'cart-quadpay' %}
774 542
  1. Click the Preview link in the top menu to preview the QuadPay Widget in this theme.

📘

Customizing the Styling of the QuadPay Widget

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

Add Widget to Mini Cart

Typically, adding the widget to the Mini Cart requires some customizing and a background in coding will be helpful. This Mini Cart Integration Helper may be a helpful resource for integrating the QuadPay widet into the Mini Cart.

If you would like support with adding the widget to the Mini Cart or for any questions please get in touch with us.