How to change displayed price when variant changes

Technical Q&A
,

Topic summary

A developer needed to display prices multiplied by 2.5 for customers with a specific tag, without affecting actual purchase prices.

Initial Solution:

  • Successfully implemented price multiplication using Liquid code in product-price.liquid and product-template.liquid files
  • Used conditional logic checking if customer tags contain ‘retail’

Problem Encountered:

  • When product variants changed, a JavaScript updatePrice function reverted displayed prices back to original values
  • Attempted to use customer metafields within the JavaScript function but initial approaches failed

Progress Made:

  • Created a customer metafield called “type” with value “retail”
  • Tried multiple JavaScript implementations to check metafield and multiply variant price
  • Achieved partial success: price stayed multiplied by 2.5 for default variant but didn’t update when switching variants

Resolution:

  • Issue was resolved with help from another user (Tranali/T)
  • Final solution successfully maintains the 2.5x price multiplier across all variant changes
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hello,

We need to display a different price for customers with a specific customer tag. This is only to DISPLAY specific prices (there is no purchase capability on the site).

Basically for this group of customers we need to display whatever the actual price is and multiply by 2.5.

I was able to do this successfully with Liquid in the product-price.liquid file, and in the product-template.liquid file:

{% if customer.tags contains ‘retail’ %}
{{ current_variant.price | times: 2.5 | money }}
{% else %}
{{ current_variant.price | money }}
{% endif %}

However I’m running into a wall with Javascript. The issue is when the variant changes, it loads the updatePrice JS function which reverts the price shown back to the original price.

I added a new customer metafield called “retail” and I was trying to call it within the updatePrice function:

_updatePrice: function(evt) {
var variant = evt.variant;

var customer_type = customer.metafields.custom.retail.value;

if (customer_type == “retail”) {

variant.price = variant.price * 2.5;

}

But this doesn’t seem to work. Any idea how we can accomplish this, so when variant changes it doesn’t go back to original price (but original price * 2.5)?

Thanks for any suggestions!

2

Hi Tranali,

I created a customer metafield called “type” and value as “retail”. But I’m not sure how to use it within Javascript. I tried adding the following to the _updatePrice function:

if (customer.metafields.custom.type.retail == “retail”) {
variant.price = variant.price * 2.5;
}

and I also tried:

if (customer.metafields.custom.type.retail == “retail”) {
this.currentVariant.price = this.currentVariant.price * 2.5;
}

And with either one of these, now the price stays the same as the default variant (multiplied by 2.5) but it doesn’t change at all when switching variants.

One step closer though, at least it’s not switching back to original price!

Do you know what might be wrong, why it’s not changing?

Thanks for your help!

3

Thank you T, it works perfectly now! Exactly what I needed. You’re a rockstar!

1 Like