Installation Guide – Shopify

Step 1
Login into admin panel of store.

arrow

Step 2
Go to online stores & click on edit code.

arrow

Step 3
Find the product template liquid file and put the below code where you want to display the product level tooltip.

{% comment %}PLEASE DO NOT REMOVE BELOW CODE. {% endcomment %}
{% assign DivideBuy = shop.metafields.DivideBuy %}
{% assign DivideBuyEnableFlagKey = 'DivideBuyEnableFlag' %}
{% assign DivideBuyFlag = DivideBuy[DivideBuyEnableFlagKey] %}
{% if DivideBuyFlag != '0' and request.page_type == 'product' %}
{% render 'dividebuyproduct', product: products[0] %}
{% endif %}

arrow

Step 4
Find cart.liquid file and put the below code where you want to display the DivideBuy button.

{% comment %}PLEASE DO NOT REMOVE BELOW CODE. {% endcomment %}
{% assign DivideBuy = shop.metafields.DivideBuy %}
{% assign DivideBuyEnableFlagKey = 'DivideBuyEnableFlag' %}
{% assign DivideBuyFlag = DivideBuy[DivideBuyEnableFlagKey] %}
{% if DivideBuyFlag != '0' %}
{% render 'dividebuycart' %}
{% endif %}

arrow

Step 5
Open below files and replace the product price, cart total and quantity input classes according to retailer theme.

dividebuyproduct.liquid (line number : 83, 93, 103, 115, 117, 128, 130, 136, 138)

dividebuycart.liquid (line number : 120, 132, 147, 149)

dividebuysoftsearch.liquid (line number : 43, 45, 61, 63)

Please see below to example to understand how it works.

You can check find below code in same file
// Getting dynamic product price
var productPrice = "{{ product.price | money_without_currency | remove: ','}}";
if(jQuery('.product__info-container:first .price-item--sale').length > 0) {
// replace this with product price class used in retailer theme
productPrice = jQuery('.product__info-container:first .price-item--sale:first').text();
}

Modify the code as explained below.

// Getting dynamic product price
var productPrice = “{{ product.price | money_without_currency | remove: ‘,’}}”;
if(jQuery(‘Your product price’s class or id’).length > 0) {
// replace this with product price class used in retailer theme
productPrice = jQuery(‘Your product price’s class or id’).text();
}

arrow

Step 6 (Shopify Plus)
Find checkout.liquid and put below code before end of <body> tag.

You can check find below code in same file
{% comment %}Adding DivideBuy payment gateway description{% endcomment %}
{{'dividebuy-style.css' | asset_url | stylesheet_tag}}
{{'checkout_script.js' | asset_url | script_tag}}
{{'dividebuy.js' | asset_url | script_tag}}
{{'dividebuy-checkout.js' | asset_url | script_tag}}
{%comment %}Getting instalment values {% endcomment %}
{% assign installment_details = shop.metafields.Installmentdetails %}
{% assign installment_K_details = 'keyInstallmentdetails' %}
{% assign installMents = isntallment_details[installment_K_details] %}
<script type="text/javascript">
var installMents = unserialize('{{ installMents }}');
var minimumOrder = getOrderAmount(installMents);
displayDivideBuyPaymentDescription(minimumOrder, installMents);
</script>
{% if checkoutLevelSoftCreditBanner == '1' %}
<script type="text/javascript">
var retailerBaseUrl = 'https://{{shop.permanent_domain}}';
var minimumOrder = getOrderAmount(installMents);
minimumOrder = parseFloat(minimumOrder).toFixed(2);
displaySoftCreditPopupCheckout(retailerBaseUrl,minimumOrder);
</script>
{% endif %}

Was this page helpful?

Page last updated: 31 January 2024
Skip to content