How can my Squarespace product page price (with multiple product variants) be adjusted based on the choice of a single product variant

I have products on my squarespace site (ex: https://www.spaceystudios.com/shop-all/my-mountains) with two product variants (size and frame color). Right now, you have to choose the frame size and the frame color in order for the price to adjust, and I am wondering if there is anything I can do so that the price change changes ONLY with the change in product size?

Thanks for trying to help!!

Squarespace Product Page with 2 Product Variants

Solution

That is indeed possible to achieve and is similar to things I've done in the past. Using JavaScript, you would:

Create a function that detects applicable pages (and doesn't error when not on such a page)
Parses and stores the JSON data from the .product-variants div's data-variants attribute.
Adds an 'onchange' event listener to the "Select Size" dropdown.
That listener calls a function that obtains the value of the selected option and looks for the first match within the aforementioned JSON data.
When/If found, it sets the price within .sqs-money-native to the corresponding price.
Wrap that code appropriately to account AJAX loading and other Squarespace-specific considerations.

If you're not comfortable with writing the JavaScript for the above, I'd guess that it'd take an experienced Squarepace dev. less than a few hours to write, setup and test (always good to test in multiple devices and browsers).