Cost per unit calculation based on variant selection

Technical Q&A

Topic summary

A Shopify store owner selling coffee beans needs to display two dynamic prices: cost per kilogram (already working) and cost per cup (currently requires page refresh to update when variant changes).

Current Implementation:

  • Using Debut theme with modified product-price.liquid
  • Calculation formula: variant.unit_price | divided_by: 1000 | times: 7 for per-cup pricing
  • Per-kg pricing updates correctly with variant selection
  • Per-cup pricing only updates after manual page refresh

Proposed Solutions:

  1. JavaScript approach - Implement custom script to recalculate dynamically when variants change (mentioned by multiple respondents)
  2. Metafield implementation - Use custom development with metafields
  3. App solution - Use third-party apps like Weario that handle variant-dependent calculations automatically

Status: Issue remains unresolved. The core problem is that Liquid code executes server-side and doesn’t respond to client-side variant changes without JavaScript intervention. One user also noted this unit pricing feature is currently limited to French and German Shopify stores.

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

Hello!
we want to show our clients the costs per base unit (1kg) as well as a cost per cup of coffee in our store tazzacofee.de for the selected variant of coffee beans. It should look as follows:

TAZZACoffee_0-1648644532429.png

The cost per base unit is already implemented as shown in the screenshot above and changes based on the variant (package size) selected.

The cost per cup of coffee is also already calculated, but does not update when the variant is changed. It requires a refresh of the website.

For the calculation, we are using the following code:

nur {{ variant.unit_price | divided_by: 1000 | times: 7 }}ct pro

Am I just missing something here?

We are using Debut theme and updated the product-price.liquid.

Thank you already in advance,
Benedikt

1 Like
2

@TAZZACoffee

sorry for any issye can you please try this way Shopify per Unit price

3

I would love to use this feature but it’s only available for French and German stores. When will it be available in the US?

4

Hi @Savory_Gourmet ,

This feature can be implemented through custom development using a metafield within the theme.

5

Hi @TAZZACoffee ,

To fix this you have to work in script, which will calculate the same thing using javascript.

6

Hi @TAZZACoffee ! The issue you’re experiencing with the cost per cup not updating dynamically is a common challenge when using custom Liquid code for variant-dependent calculations.

While you could solve this with JavaScript to make your current code update without page refresh, you might want to consider using an app as a more robust solution.

Our app Weario handles exactly this scenario - dynamic per-unit calculations that update automatically when variants change. While it’s primarily designed for fashion brands showing “per wear” pricing, the labels are fully customizable so you can display both “per kg” and “per cup” pricing for your coffee variants.

For your tazzacoffee.de setup:

  • Create Product Sets for different package sizes (250g, 500g, 1kg, etc.)
  • Set up calculations for both base unit (kg) and custom unit (cups using your 7g calculation)
  • Both prices update instantly when customers change variants
  • No JavaScript debugging or page refresh issues

The advantage is you get the dynamic updating functionality you need without having to code the variant change detection and recalculation logic yourself. Plus it’s designed to work seamlessly with German compliance requirements.

https://apps.shopify.com/weario

Especially useful for stores like yours where customers need to understand both regulatory pricing (per kg) and practical value (per cup)!