Is there a way to dynamicly change price using js

Technical Q&A

Topic summary

A developer created a custom canvas feature with adjustable dimensions controlled by sliders. They successfully save the dimensions as order notes but need to dynamically update the checkout price based on JavaScript calculations.

Proposed Solutions:

  • Range-bound price variants: Create product variants corresponding to dimension ranges, then match the calculated dimensions to the appropriate variant price
  • Quantity-based pricing: Set a base price for minimum dimensions and adjust the quantity multiplier based on actual dimensions to reach the correct total

A reference video demonstrating the quantity-based approach (used for “donate any amount” functionality) was provided. The discussion remains open with an offer for implementation assistance.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I have recently made a custom feature using html, css and javascript. The feature is bassicly a canvas that you can change the size of with two sliders. I am saving the dimensions and calculating a price in the js. I have managed to have a button that saves the dimensions for the canvas and adds it as ‘notes’ to the order. However is there a way to use my calculated price form js to change the price at checkout?

I have tried using some apps but they have not worked with my custom feature. Is there any good solution to this?

2

Hi @Williamtidana ,

Yes, you can use two methods for the same.

  1. Create range bound price variants which will store the cost of specific range of dimension, search for matched variant and you have your price.
  2. Assuming the price is same keep the lowest dimension value and increase the quantity as per dimension and you will have your amount.

Second logic we have use to create product Donate any amount.

Request you to refer the video below for reference.

Hope this will helps, let me know if we can help you in implementing the same.

3

Hi @Williamtidana :raising_hands:

It seems like you’re having some trouble customizing your product using HTML, CSS, and JavaScript. If you’d like a simple solution, try our app Easify Product Options!

First, it allows you to add dimension fields directly on your product page so customers can easily enter their own measurements - no coding needed.

  • This is the result:

Ảnh màn hình 2025-10-29 lúc 16.13.06
Ảnh màn hình 2025-10-29 lúc 16.13.061920×1067 215 KB

  • This is the app setting

Ảnh màn hình 2025-10-29 lúc 15.04.16
Ảnh màn hình 2025-10-29 lúc 15.04.161920×1008 109 KB

  • Second, it supports flexible pricing based on customer selections, making it easy to create a smooth and dynamic shopping experience.

Ảnh màn hình 2025-10-29 lúc 16.13.54
Ảnh màn hình 2025-10-29 lúc 16.13.541920×1003 105 KB

This app is super easy to use and works perfectly for customizable products. If you need any help, feel free to reach out to the Easify team — we’re always happy to assist! :blush: