How to make a 4 installment payments text in the product page

Store Design
, , , ,

Topic summary

Goal: add an installment-payment message on the product page that auto-calculates price ÷ 4 and expands to show details with text and an image. An example link was provided to illustrate the desired behavior.

Key suggestions:

  • Use a payment gateway’s built-in installment/BNPL widget (e.g., Affirm). These widgets can display per-installment amounts on product pages and also integrate with checkout. Affirm is a Buy Now, Pay Later service that provides embeddable messaging.
  • Implement a custom solution via Shopify theme code (Liquid, HTML, CSS, JavaScript) to calculate price/4 and show a toggleable info panel.

Notes:

  • A screenshot was shared; the example product page demonstrates the UI and interaction.
  • No code snippets or exact implementation steps were provided in-thread.

Outcome/Status:

  • No final implementation confirmed. One participant offers custom development help. The question remains open pending the user choosing a BNPL widget or custom coding approach.
Summarized with AI on December 23. AI used: gpt-5.
1

IMG_1448.jpeg
IMG_1448.jpeg1170×2185 187 KB

Hi! Im kind of new in shopify, anyone knows how to make this “widget” in the product page, is a installment payments text, that is personalized with the product price divided by four, and when you click it it shows a text and a image with the info.

You can view it in this website

https://armatura.com.co/products/2-pack-sueter-halfzip-textured?

variant=43907092414662

Thank you for all your help.

2

@DV9408

Well its a payment gateway which provides installment option widget for product page, also on checkout, you can use same like widges for Affirm which provides same options and test it.

Thanks

3

Hello @DV9408 ,

This is possible through code customization with liquid code, html, css and javascript. we can do it for you.