Skip to main content

Update your Product Page

After installing the Billease payment app from the Shopify app store, log in to your Shopify store admin.

Go to Online Store => Themes.

Does your store use a Shopify 2.0 theme?​

On Current theme section, click the Customize button.

From the template dropdown menu at the top, select Products and then Default product.

shopify_select_product_template

On Product information section at the right, click Add block.

shopify_add_block

Select BillEase Widget under APPS.

shopify_select_billease_widget

Move BillEase Widget block after Price or Variant Picker.

Configure BillEase Widget settings based on your product settings with BillEase.

shopify_configure_widget

Click Save.

It should now show this on product view:

shopify_page_update

Does your store use a vintage Shopify theme?​

On Current theme section, select Edit code from Actions dropdown menu.

shopify_edit_theme_code

Under Sections, select product-template.liquid.

Paste this code after the Price section. Depending on the theme, find something like this line: {% include 'product-price', variant: current_variant %}:

<div id="billease_installments_widget_product_page_{{ current_variant.id }}"></div>
<script>
  function start() {
    const marketing_link = 'https://billease.ph';  // Replace with your own page
    const is_pay_in_four = false;  // Set to true to use pay in 4
    const installments = 3;  // Replace with your desired tenor/months (1-12)
    const dp_pct = 0;  // Replace with your desired down payment percentage (0-100)
    const is_zero_interest = false;  // Set to true to use 0% interest
    const product_id = {{ current_variant.id }};
    const price = {{ current_variant.price }} / 100;
    const billease_logo = `<img src="https://s3-ap-southeast-1.amazonaws.com/static.billease.ph/public/billease-logo.svg" width="70"/>`;
    const storage_key = 'BILLEASE_INSTALLMENT_FACTOR';
    const learn_more = `<a target="_blank" href="${marketing_link}" style="text-decoration: underline; color: #203AA9">Learn More</a>`;
    function round_up(val) {
      return val % 100 === 0 ? val : (val + 100) - (val % 100);
    }
    function insert_billease_text(installment_factor = null) {
      const cashout = is_pay_in_four ? 0 : (dp_pct ? round_up(price * (dp_pct / 100)) : 0);
      const financed_amount = price - cashout;
      const amount = Math.ceil(is_pay_in_four ? (price / 4) : (installment_factor ? (installment_factor[installments] * financed_amount) : (financed_amount / installments)));
      const billease_text = document.getElementById(`billease_installments_widget_product_page_${product_id}`);
      let installment_text;
      if (is_pay_in_four) {
        installment_text = 'Or <strong>4 payments</strong>';
      } else if (cashout) {
        installment_text = `Or pay <strong>₱${cashout.toLocaleString()} upfront</strong>, the rest in <strong>${installments} months</strong>`;
      } else {
        installment_text = `Or <strong>${installments} months</strong>`;
      }
      billease_text.innerHTML = `<span style="vertical-align: middle">${installment_text} for only <strong>₱${amount.toLocaleString()}</strong> with ${billease_logo}. ${learn_more}.</span>`;
    }
    if (is_pay_in_four || is_zero_interest) {
      insert_billease_text();
    } else {
      const billease_installment_factor = localStorage.getItem(storage_key);
      if (billease_installment_factor) {
        insert_billease_text(JSON.parse(billease_installment_factor));
      } else {
        fetch('https://billease.ph/billease_installments.json')
            .then(response => response.json())
            .then(data => {
              localStorage.setItem(storage_key, JSON.stringify(data.installment_factor));
              insert_billease_text(data.installment_factor);
            });
      }
    }
  }
  start();
</script>

Click Save.

It should now show this on product view: shopify_page_update