Empire Theme: Dual Unit Prices (kg and lb) working dynamically except conversion formula isnt't

Shopify Discussion

Topic summary

A Shopify store owner selling products by weight has implemented dual unit pricing ($/kg and $/lb) that displays correctly on initial page load but fails to update properly when customers switch between product variants.

Current Status:

  • The $/lb conversion (dividing by 2.20462) works when the page refreshes
  • Dynamic variant changes cause the $/lb price to revert to the $/kg value instead of recalculating
  • Custom code has been added to both product-price.liquid and empire.js.liquid files

Technical Implementation:

  • Added data-unit-pricelb elements to track pound-based pricing
  • Modified variant fields object to include unitPricelb reference
  • Implemented _updateUnitPrice function to handle price updates

Remaining Issue:
The JavaScript portion that should dynamically update the $/lb calculation when variants change isn’t functioning correctly. The developer has made significant progress but is stuck on getting the conversion formula to work during dynamic variant selection, though they’re willing to share the complete implementation once resolved.

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

Hi,

I sell products by weight and it would be very useful to display prices in $/kg and $/lb. I currently have it all working but when dynamically changing variants, the math operation isn’t updating. The price reverts back to the same as $/kg. It works perfectly when I refresh the page though.

From product-price.liquid (This is all added code I wrote):

{% if variant.unit_price_measurement.reference_unit == 'kg' %}  
{% assign variant = product.selected_or_first_available_variant %}
 {% capture unit_pricelb %}<span class="{{ class_root }}__unit-pricelb--amount money" **data-unit-pricelb-amount>{{ variant.unit_price | divided_by: 2.20462 | money }}**</span>{% endcapture %}
<div
      class="
        {{ class_root }}__unit-price
        {% unless variant.unit_price_measurement %}hidden{% endunless %}
      "
      data-unit-pricelb
    >
   | {{ unit_pricelb }} / lb
    </div>
{% endif %}

From empire.js.liquid (Bold and underlined is the added code):

    this.variantFields = {
      $priceContainer: this.$details.find('[data-price-container]'),
      $priceMoney: this.$details.find('[data-price-container] [data-price]'),
      $compareAtPrice: this.$details.find('[data-price-compare-container]'),
      $compareAtPriceMoney: this.$details.find('[data-price-compare-container] [data-price-compare]'),
      $badge: this.$details.find('[data-badge-sales]'),
      $badgeRange: this.$details.find('[data-badge-sales-range]'),
      $badgeSingle: this.$details.find('[data-badge-sales-single]'),
      $sku: this.$details.find('[data-product-sku]'),
      stockLevels: this.$details[0].querySelectorAll('[data-stock-level]'),
      unitPrice: this.$details[0].querySelector('[data-unit-price]'),
      **unitPricelb: this.$details[0].querySelector('[data-unit-pricelb]'),**
      totalQuantity: this.$details[0].querySelector('[data-total-quantity]'),
      unitPriceAmount: this.$details[0].querySelector('[data-unit-price-amount]'),
      **unitPriceAmountlb: this.$details[0].querySelector('[data-unit-pricelb-amount]'),**
      unitPriceMeasure: this.$details[0].querySelector('[data-unit-price-measure]'),
      taxLine: this.$details[0].querySelector('[data-tax-line]'),
      hiddenComparePrice: this.$details[0].querySelector('[data-compare-price-hidden]'),
      hiddenCurrentPrice: this.$details[0].querySelector('[data-current-price-hidden]'),
      hiddenComparePriceRange: this.$details[0].querySelector('[data-compare-price-range-hidden]'),
      hiddenCurrentPriceRange: this.$details[0].querySelector('[data-current-price-range-hidden]')
    };

  _updateUnitPrice(variant) {
    if (this.variantFields.unitPrice && variant.unit_price_measurement) {
      this.variantFields.totalQuantity.innerHTML = `${variant.unit_price_measurement.quantity_value}${variant.unit_price_measurement.quantity_unit}`;
      this.variantFields.unitPriceAmount.innerHTML = Shopify.formatMoney(variant.unit_price, this.settings.money_format);
      **this.variantFields.unitPriceAmountlb.innerHTML = Shopify.formatMoney(variant.unit_price, this.settings.money_format);**
      
      if (variant.unit_price_measurement.reference_value === 1) {
        this.variantFields.unitPriceMeasure.innerHTML = variant.unit_price_measurement.reference_unit;
      } else {
        this.variantFields.unitPriceMeasure.innerHTML = `${variant.unit_price_measurement.reference_value}${variant.unit_price_measurement.reference_unit}`;
      }

      this.variantFields.unitPrice.classList.remove('hidden');
    } else if (this.variantFields.unitPrice) {
      this.variantFields.unitPrice.classList.add('hidden');
    }

I’ve already gone so far into making it work but I’m stuck at that last part. Once it works I would be happy to share all the code to implement it into other stores.

Can you help?