Better way to implement instalment widget on product pages?

Store Design
,

Topic summary

A merchant received code from their payment gateway provider to add an installment payment calculator to product pages. The provider instructed them to insert it into the main-product.liquid theme file.

Key Questions:

  • Can this code be implemented using Shopify’s ‘custom liquid’ block in the theme editor instead?
  • Is it possible to simplify or modify the provided code for easier implementation?

Technical Details:

  • The code includes HTML structure, CSS styling, and JavaScript from embed.payjustnow.com
  • It appears to set product amounts and display installment options
  • The merchant finds the code volume excessive for what seems like a simple calculator

Status: The discussion remains open with no solution provided yet. The merchant is seeking alternative implementation methods that avoid direct theme file editing.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

One of our payment gateway offers a installment payment plan.

They sent me some code that had to be inserted into the main-product.liquid file.

Surely it can be inserted in the editor using the ‘custom liquid’ block?

It seems like an awful lot of code for a simple instalment calculator.

Is it possible to edit the code below to work in the ‘custom liquid’ block?

Screenshot 2024-05-16 at 08.38.53.png
Screenshot 2024-05-16 at 08.38.53.png653×382 44.2 KB

This is the code they sent me:

<html>
<header>
<script src="[https://embed.payjustnow.com/product/js/product.js](https://embed.payjustnow.com/product/js/product.js)"></script>
<script>
function onLoad() {
setPJNProductAmounts( {{ product.price }} , 3);
}
</script>
</header>
<body onload="onLoad()">
<div id="pjn-product-container"></div>
<style>
.pjn-infolink {
display: table;
}
.pjn-container .pjn-text {
display: block;
}
</style>
</body>
</html>
2

Hi Roshi

Thank you so much.