If a merchant sells products in specific quantities or measurements, they might need to display a price per unit for those products. For example, if a product is sold in weights of 500g, 1kg, and 1.5kg, a merchant might want to show the price per 100g for each variant.
In this tutorial, you'll learn how to display unit prices for product variants.
> Tip:
> Unit prices are available only to stores located in the European Union (EU) or Switzerland. Unit prices can be added to products [through the Shopify admin](https://help.shopify.com/manual/products/details/product-pricing/unit-pricing#add-unit-prices-to-your-product).
## Resources
To display unit prices in your theme, you'll use the following:
- The [`unit_price_measurement`](/docs/api/liquid/objects/unit_price_measurement) object
- The `unit_price` property
Depending on where you're implementing your unit price display, you'll access unit price information through the associated parent object:
| Context | Example template types | Parent object |
| --- | --- | --- |
| Variants that have been added to a cart or are part of an order | <ul><li>[cart](/docs/storefronts/themes/architecture/templates/cart)</li><li>[customers/order](/docs/storefronts/themes/architecture/templates/customers-order)</li></ul> | [line_item](/docs/api/liquid/objects/line_item) |
| Product and variant listings | <ul><li>[product](/docs/storefronts/themes/architecture/templates/product)</li><li>[collection](/docs/storefronts/themes/architecture/templates/collection)</li></ul> | [variant](/docs/api/liquid/objects/variant) |
## Implementing unit price displays
You should add support for unit prices wherever you have a price display. Common locations include:
- The collection template
- The product template
- The cart template
- The customers/order template
You can include this code in the relevant template or a section in the template.
Your code should do the following:
1. Check whether the variant or line item has a unit price measurement using [`variant.unit_price_measurement`](/docs/api/liquid/objects/variant#variant-unit_price_measurement) or [`line_item.unit_price_measurement`](/docs/api/liquid/objects/line_item#line_item-unit_price_measurement).
2. If the variant or line item uses a unit price measurement, display the unit price, the reference value, and the reference unit.
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="Example"></script>
<script type="text/plain" data-language="liquid" data-title="variant">
RAW_MD_CONTENT
{% if variant.unit_price_measurement %}
{{ variant.unit_price | money }}
{% if variant.unit_price_measurement.reference_value != 1 %}
{{ variant.unit_price_measurement.reference_value }}
{% endif %}
{{ variant.unit_price_measurement.reference_unit }}
{% endif %}
END_RAW_MD_CONTENT</script>
<script type="text/plain" data-language="liquid" data-title="line_item">
RAW_MD_CONTENT
{% if line_item.unit_price_measurement %}
{{ line_item.unit_price | money }}
{% if line_item.unit_price_measurement.reference_value != 1 %}
{{ line_item.unit_price_measurement.reference_value }}
{% endif %}
{{ line_item.unit_price_measurement.reference_unit }}
{% endif %}
END_RAW_MD_CONTENT</script>
</div>
</p>