Displaying unit prices

Note

This guide is relevant only to merchants selling in France.

If you sell products in quantities or measurements, then you might need to display the price per unit for certain products. When you enter a unit price for a product, the unit price is displayed on the product pages, collection pages, cart page, checkout pages, and order confirmation notifications.

Add unit prices to your product

Desktop

1. From your Shopify admin, go to Products.

2. Click the name of the product that you want to change.

3. Click the variant you want to update.

4. Under Pricing, select Show unit price for this product.

5. In the Total measurement of product field, enter in the number of units your product has.

6. Use the Select unit dropdown menu to select the variant's unit of measurement. The type of unit you display is different depending on the type of product you are selling. For example, if the product is 2 litres of soap, then select litres.

7. In the Unit price field, enter the product's price per unit.

8. Optional: Input a number for the base unit. For example, for a product weighing 1 kg, you might select a base unit of 100 g.

9. Click Save.

iPhone

1. From the Shopify app, go to Products > All products.

2. From the All products screen, tap a product.

3. Tap the variant you want to update.

4. Under Pricing, select Show unit price for this product.

5. In the Total measurement of product field, enter in the number of units your product has.

6. Use the Select unit dropdown menu to select the variant's unit of measurement. The type of unit you display is different depending on the type of product you are selling. For example, if the product is 2 litres of soap, then select litres.

7. In the Unit price field, enter the product's price per unit.

8. Optional: Select a base unit. For example, for a product weighing 1 kg, you might select a base unit of 100 g.

9. Tap Save.

Android

1. From the Shopify app, go to Products > All products.

2. From the All products screen, tap a product.

3. Tap the variant you want to update.

4. Under Pricing, select Show unit price for this product.

5. In the Total measurement of product field, enter in the number of units your product has.

6. Use the Select unit dropdown menu to select the variant's unit of measurement. The type of unit you display is different depending on the type of product you are selling. For example, if the product is 2 litres of soap, then select litres.

7. In the Unit price field, enter the product's price per unit.

8. Optional: Select a base unit. For example, for a product weighing 1 kg, you might select a base unit of 100 g.

9. Tap Save.

Show unit prices on your online store

The steps for this customization vary depending on your theme. Click the button for your theme before following the instructions below:

Caution

Back up your theme before you start editing the code. The following instructions are advanced. Consider the section on getting help with customizations if you need help adding the feature to your theme.

Debut

Steps for Debut

Unit prices are available in the Debut theme for versions 12.1.0 and above. If you aren't able to update your theme to the latest version, then you can add unit price customization to previous versions of Debut.

Edit your product price snippet

1. In the Snippets directory, click the product-price.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for data-price:

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}" data-price>

1. Replace the code with the following snippet:

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the following code by searching for price__sale:

<div class="price__sale">
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="price-item price-item--sale" data-sale-price>
      {{ money_price }}
    </span>
    <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
  </dd>
</div>

1. Add the following code under the closing </div> tag:

{% if variant.unit_price_measurement %}
<div class="price__unit">
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd class="price-unit-price">
    {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if available and variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
  </dd>
</div>
{% endif %}

1. Click Save to confirm your changes.

Edit your cart page

1. In the Sections directory, click the cart-template.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for cart__price-wrapper:

{%- if item.original_price != item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ item.original_price | money }}
{%- endif -%}

1. Replace the code with the following snippet:

<dl>
  {%- if item.original_price != item.final_price -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    <s>{{ item.original_price | money }}</s>
  </dd>
  <dt>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="order-discount">{{ item.final_price | money }}</span>
  </dd>
  {%- else -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    {{ item.original_price | money }}
  </dd>
  {%- endif -%}
  {%- if item.unit_price_measurement -%}
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd>
    <span class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if item.unit_price_measurement.reference_value != 1 -%}
      {{- item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

After your edits, the cart-template.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your collection page

1. In the Sections directory, click the collection.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for grid-view-item__title:

{% include 'product-price' %}

1. Replace the code with the following snippet:

{% include 'product-price', variant: nil %}

After your edits, the collection.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your product card grid

1. In the Snippets directory, click the product-card-grid.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for grid-view-item__title:

{% include 'product-price', variant: product %}

1. Replace the code with the following snippet:

{% include 'product-price', variant: product.selected_or_first_available_variant %}

After your edits, the product-card-grid.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your product card list

1. In the Snippets directory, click the product-card-list.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for {% if product.available %}:

{% include 'product-price', variant: product %}

1. Replace the code with the following snippet:

{% include 'product-price', variant: product.selected_or_first_available_variant %}

After your edits, the product-card-list.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your order page

1. In the Templates directory, click the customers/order.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for data-label="{{ 'customer.order.price' | t }}":

{%- if line_item.original_price != line_item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ line_item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ line_item.original_price | money }}
{%- endif -%}

1. Replace the code with the following snippet:

<dl>
  {%- if line_item.original_price != line_item.final_price -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    <s>{{ line_item.original_price | money }}</s>
  </dd>
  <dt>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="order-discount">{{ line_item.final_price | money }}</span>
  </dd>
  {%- else -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    {{ line_item.original_price | money }}
  </dd>
  {%- endif -%}
  {%- if line_item.unit_price_measurement -%}
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd>
    <span class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if line_item.unit_price_measurement.reference_value != 1 -%}
      {{- line_item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ line_item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

After your edits, the customers/order.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your theme styles

1. In the Assets directory, click the theme.scss.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for .price__vendor {:

.price__vendor {
  color: $color-body-text;
  font-size: 0.9em;
  font-weight: $font-weight-body;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 5px 0 10px;
  width: 100%;
  @include flex-basis(100%);
}

1. Add the following snippet under the code from step 2:

.price__unit {
  @include flex-basis(100%);
  display: none;

  .price--unit-available & {
    display: block;
  }
}
.price-unit-price {
  color: $color-body-text;
  font-size: 0.8em;
}

After your edits, the theme.scss.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your javascript theme code

1. In the Assets directory, click the theme.js file.

2. Use the find keyboard shortcut to locate the following code:

salePrice: '[data-sale-price]'

1. Add the following snippet over the code from step 2:

unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the following code:

productOnSale: 'price--on-sale',

1. Add the following snippet after the code from step 4:

productUnitAvailable: 'price--unit-available',

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the following code:

var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';

1. Replace the code with the following snippet:

var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';

1. Use the find keyboard shortcut to locate the following code:

var salePrice = '';

1. Add the following snippet under the code from step 8:

var unitLabel = '';
var unitPrice = '';
if (variant.unit_price_measurement) {
  unitLabel = theme.strings.unitPrice;
  unitPrice =
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat) +
    ' ' +
    theme.strings.unitPriceSeparator +
    ' ' +
    this._getBaseUnit(variant);
}

1. Use the find keyboard shortcut to locate the following code:

.replace('[$]', salePrice)

1. Add the following snippet under the code from step 10:

.replace('[UnitPrice]', unitLabel)
.replace('[$$$]', unitPrice)

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the following code:

_updatePrice: function(evt) {

1. Add the following snippet before the code from step 12:

_getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;
},

1. Use the find keyboard shortcut to locate the following code:

var $salePrice = $(this.selectors.salePrice, $priceContainer);

1. Add the following snippet under the code from step 14:

var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $unitPriceBaseUnit = $(
  this.selectors.unitPriceBaseUnit,
  $priceContainer
);

1. Use the find keyboard shortcut to locate the following code:

.removeClass(this.classes.productOnSale)

1. Add the following snippet under the code from step 16:

.removeClass(this.classes.productUnitAvailable)

1. Use the find keyboard shortcut to locate the following code:

else {
  // Regular price
  $regularPrice.html(
    theme.Currency.formatMoney(variant.price, theme.moneyFormat)
  );
}

1. Add the following snippet under the code from step 18:

// Unit price
if (variant.unit_price_measurement) {
  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  $unitPriceBaseUnit.html(this._getBaseUnit(variant));
  $priceContainer.addClass(this.classes.productUnitAvailable);
}

After your edits, the result should look like this:

1. Click Save to confirm your changes.

Edit your english translations

1. In the Locales directory, click the en.default.json file.

2. Use the find keyboard shortcut to locate the following code:

"selection_help": "press the space key then arrow keys to make a selection"

1. Add the following snippet over the code from step 2:

"unit_price_separator": "per",

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the following code:

"include_taxes": "Tax included.",

1. Add the following snippet under the code from step 4:

"unit_price_label": "Unit price",

After your edits, the result should look like this:

1. Click Save to confirm your changes.

Edit your theme layout

1. In the Layout directory, click the theme.liquid file.

2. Use the find keyboard shortcut to locate the following code:

regularPrice: {{ 'products.product.regular_price' | t | json }},

1. Add the following snippet under the code from step 2:

unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},

After your edits, the theme.liquid file should look like this:

1. Click Save to confirm your changes.

(Optional) Add translations for other languages

1. Go to the Themes page in your Shopify admin.

2. Click the ... button > Edit default theme content.

3. Click Change theme language, then select the language you want to edit. This is only possible on your published theme.

4. Enter Unit Price in the search field.

5. Update the Unit price separator field under General / Accessibility.

6. Update the Unit price label field under Products / Product.

7. Click Save.

Brooklyn

Steps for Brooklyn

Unit prices are available in the Brooklyn theme for versions 13.1.0 and above. If you aren't able to update your theme to the latest version, then you can add unit price customization to previous versions of Brooklyn.

Add a product price snippet

1. In the Snippets directory, click Add a new snippet.

2. Enter product-price in the name field.

3. Copy and paste the following code into the file.

<div class="price-container{% if variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
  {%- if variant.compare_at_price > variant.price -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper" aria-hidden="false">
      <span id="ComparePrice" class="product-single__price--compare-at">
        {{ variant.compare_at_price | money }}
      </span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
  {%- else -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper hide" aria-hidden="true">
      <span id="ComparePrice" class="product-single__price--compare-at"></span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
  {%- endif -%}
  <span id="ProductPrice"
    class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
    itemprop="price"
    content="{{ variant.price | divided_by: 100.00 }}">
    {{ variant.price | money }}
  </span>
  <div class="product-single__unit">
    {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span class="product-unit-price">
      <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </div>
</div>

1. Click Save to confirm your changes.

Edit your featured product page

1. In the Sections directory, click the featured-product.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for itemprop="offers":

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if compare_at_price > price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if compare_at_price > price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ price | money }}
    </span>
</div>

1. Replace the code with the following snippet:

{% include 'product-price', variant: current_variant %}

After your edits, the featured-product.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your product page

1. In the Sections directory, click the product-template.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for itemprop="offers":

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if current_variant.compare_at_price > current_variant.price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ current_variant.compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ current_variant.price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ current_variant.price | money }}
    </span>
</div>

1. Replace the code with the following snippet:

{% include 'product-price', variant: current_variant %}

After your edits, the product-template.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your ajax cart

1. In the Snippets directory, click the ajax-cart-template.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for <span class="ajaxcart__price">{{{price}}}</span>:

{{#if discountsApplied}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.regular_price' | t }}{% raw %}</span>
    <del class="ajaxcart__price">{{{price}}}</del>
    <span class="visually-hidden">{% endraw %}{{ 'products.general.sale_price' | t }}{% raw %}</span>
    <span class="ajaxcart__price">{{{discountedPrice}}}</span>
    {{else}}
    <span class="ajaxcart__price">{{{price}}}</span>
{{/if}}

1. Add the following code under the {{/if}} from step 2:

{{#if unitPrice}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.unit_price' | t }}{% raw %}</span>
    <span class="cart__unit-price">
        {% endraw %}
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{'general.accessibility.unit_price_separator' | t}}&nbsp;</span>
        {%- endcapture -%}
        {% raw %}
        <span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
    </span>
{{/if}}

After your edits, the ajax-cart-template.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your product grid item

1. In the Snippets directory, click the product-grid-template.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for capture img_id_class:

{% capture img_id_class %}ProductImage-{{ product.featured_image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_image.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

1. Add the following snippet before the code from step 2:

{%- assign variant = product.selected_or_first_available_variant -%}

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the following code by searching for {{ product.price | money_without_trailing_zeros }}:

<span class="grid-product__price">
    {% if on_sale %}
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    {% endif %}
    {% if product.price_varies %}
        {{ product.price_min | money_without_trailing_zeros }}
        <span class="icon-fallback-text">
        <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
        <span class="fallback-text">+</span>
        </span>
    {% else %}
        {{ product.price | money_without_trailing_zeros }}
    {% endif %}
</span>

1. Add the following code under the </span>:

{%- if product.price_varies == false and variant.unit_price_measurement -%}
    {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
        <span>
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
        </span>
    {%- endcapture -%}
    <span class="product-unit-price">
        <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
        <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{-   unit_price_base_unit -}}
    </span>
{%- endif -%}

After your edits, the result should look like this:

1. Click Save to confirm your changes.

Edit your cart page

1. In the Templates directory, click the cart.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for <span class="cart__price">:

{%- if item.original_line_price != item.final_line_price -%}
  <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
  <del class="cart__price">{{ item.original_line_price | money }}</del>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount cart__price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart__price">{{ item.original_line_price | money }}</span>
{%- endif -%}

Note

If you have an older theme version, you may not be able to find this snippet. In that case, add the code from step 3 directly under the <span class="cart__price"> element.

1. Add the following snippet under the code from step 2:

{%- if item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="cart__unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if item.unit_price_measurement.reference_value != 1 -%}
            {{- item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

After your edits, the cart.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your order page

1. In the Templates directory, click the customers/order.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for {{ line_item.original_price | money }}:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
    {%- if line_item.original_price != line_item.final_price -%}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        <del>{{ line_item.original_price | money }}</del>
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
        {{ line_item.original_price | money }}
    {%- endif -%}
</td>

1. Add the following snippet before the </td> from step 2:

{%- if line_item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="product-unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if line_item.unit_price_measurement.reference_value != 1 -%}
            {{- line_item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ line_item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

After your edits, the customers/order.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your theme styles - Part 1

1. In the Assets directory, click the theme.scss.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for .ajaxcart__price {:

.ajaxcart__price {
    font-size: em(13px);
    display: block;
}

1. Add the following snippet under the code from step 2:

.cart__unit-price {
    display: block;
}

After your edits, the theme.scss.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your theme styles - Part 2

1. In the Assets directory, click the timber.scss.liquid file.

2. Use the find keyboard shortcut to locate the following code by searching for .product-single__policies {:

.product-single__policies {
  margin: 15px 0 25px 0;
}

1. Add the following snippet over the code from step 2:

.product-single__unit {
  display: none;

  .price-container--unit-available & {
    display: block;
  }
}

After your edits, the result should look like this:

1. Go to the very end of the file and add the following code:

.product-unit-price {
  color: $colorTextBody;
  display: block;
}

After your edits, the result should look like this:

1. Click Save to confirm your changes.

Edit your JavaScript theme code

1. In the Assets directory, click the theme.js.liquid file.

2. Use the find keyboard shortcut to locate the following code:

var prodImg;

1. Add the following snippet under the code from step 2:

var unitPrice = null;

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the following code:

// Create item's data object and add to 'items' array

1. Add the following snippet over the code from step 4:

if (cartItem.unit_price_measurement) {
  unitPrice = {
    addRefererenceValue:
      cartItem.unit_price_measurement.reference_value !== 1,
    price: theme.Currency.formatMoney(
      cartItem.unit_price,
      settings.moneyFormat
    ),
    reference_value: cartItem.unit_price_measurement.reference_value,
    reference_unit: cartItem.unit_price_measurement.reference_unit
  };
}

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the following code:

vendor: cartItem.vendor

1. Add the following snippet over the code from step 6:

unitPrice: unitPrice,

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the following code:

productPrice: '#ProductPrice',

1. Add the following snippet under the code from step 8:

unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the following code by searching for $(this.selectors.priceContainer, this.$container).removeClass(:

$(this.selectors.priceContainer, this.$container).removeClass(
  'visibility-hidden'
);

1. Replace the code with the following snippet:

$(this.selectors.priceContainer, this.$container).removeClass(
  'visibility-hidden price-container--unit-available'
);

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the following code:

$(this.selectors.SKU).html(variant.sku);

1. Add the following snippet over the code from step 12:

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(
    this.selectors.unitPriceBaseUnit,
    this.$container
  );

  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, moneyFormat)
  );
  $unitPriceBaseUnit.html(this.getBaseUnit(variant));

  $(this.selectors.priceContainer, this.$container).addClass(
    'price-container--unit-available'
  );
}

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the following code by searching for this.destroyImageCarousel();:

onUnload: function() {
  this.$container.off(this.settings.namespace);
  this.destroyImageCarousel();
}

1. Add the following snippet over the code from step 14:

getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;
},

After your edits, the result should look like this:

1. Click Save to confirm your changes.

Edit your English translations

1. In the Locales directory, click the en.default.json file.

2. Use the find keyboard shortcut to locate the following code:

"refresh_page": "choosing a selection results in a full page refresh"

1. Add the following snippet over the code from step 2:

"unit_price_separator": "per",

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the following code:

"include_taxes": "Tax included.",

1. Add the following snippet under the code from step 4:

"unit_price": "Unit price",

After your edits, the result should look like this:

1. Click Save to confirm your changes.

(Optional) Add translations for other languages

1. Go to the Themes page in your Shopify admin.

2. Click the ... button > Edit default theme content

3. Click Change theme language, and then select the language you want to edit. This is only possible on your published theme.

4. Enter Unit Price in the search field.

5. Update the Unit price separator field under General / Accessibility.

6. Update the Unit price label field under Products / General.

7. Click Save.

Minimal

Steps for Minimal

Unit prices are available in the Minimal theme for versions 11.2.0 and above. If you are unable to update your theme to the latest version, then you can add unit price customization to previous versions of Minimal.

Update your Snippets

1. Locate and expand the Snippets folder.

2. Select Add a new snippet.

3. Enter the name product-unit-price.

4. Copy and paste the following code into product-unit-price.liquid.

{%- unless available -%}
  {%- if variant.title -%}
    {%- assign available = variant.available -%}
  {%- else -%}
    {%- assign available = true -%}
  {%- endif -%}
{%- endunless -%}
<span class="product-unit-price{% unless available and variant.unit_price_measurement %} hide{% endunless %}{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}" data-unit-price-container>
  {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
  {%- endcapture -%}
  {%- capture unit_price_base_unit -%}
    <span data-unit-price-base-unit>
      {%- if available and variant.unit_price_measurement -%}
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
          {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
      {%- endif -%}
    </span>
  {%- endcapture -%}
  <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
  <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>

1. Click Save.

2. Find and edit the file product-grid-item.liquid.

3. Replace this line:

{% capture price %}{{ featured.price | money }}{% endcapture %}

With this line:

{%- assign price = featured.price | money -%}

1. Use the find keyboard shortcut to locate {{ price }} and add this code below:

{%- assign variant = featured.selected_or_first_available_variant -%}
{%- if variant.available and variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
{%- endif -%}

After your edits, the product-grid-item.liquid file should look like this:

1. Click Save to confirm your changes.

2. Locate and edit the file search-result.liquid

3. Use the find keyboard shortcut to locate {% if item.object_type == 'product' %} and add the following code on the line below:

{%- assign variant = item.selected_or_first_available_variant -%}

1. Now use the find keyboard shortcut to locate the following two snippets of code:

<s><small>{{ item.compare_at_price_max | money }}</small></s>

And

<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span itemprop="price">
  {{ item.price | money }}
</span>

1. Add the following block of code under each of the two code snippets listed in the previous step:

{%- if variant.available and variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: variant %}
{%- endif -%}

After your edits, the search-result.liquid file should look like this:

1. Click Save to confirm your changes.

Update your styles

1. Locate and expand the Assets folder.

2. Edit the file theme.scss.liquid.

3. Use the find keyboard shortcut to locate this chunk of code:

.grid-link__title,
.grid-link__meta {
  position: relative;
  margin-bottom: 5px;

1. Insert the following code block under the code snippet you located in the previous step:

font-family: $headerFontStack;

1. Use the find keyboard shortcut to locate the following snippet of code:

.grid-link__sale_price {
  opacity: 0.95;
  filter: alpha(opacity=95);
}

1. Insert the following code block under the code snippet you located in the previous step:

.grid-link__unit-price {
  font-size: 1em;
}

1. Use the find keyboard shortcut to locate the following snippet of code:

.order-discount--list {
  margin: 0.8em 0 0.6em 1.3em;
  list-style: none;
  padding: 0;
}

1. Insert the following code block under the code snippet you located in the previous step:

.order-discount--price {
  margin-bottom: 0;
}

1. Use the find keyboard shortcut to locate the following snippet of code:

.cart__product-title {
  display: inline-block;

1. Insert the following code block under the code snippet you located in the previous step:

font-weight: $bodyFontWeightBold;

After your edits, the theme.scss.liquid file should look like this:

1. Click Save to confirm your changes.

2. Locate and edit the file timber.scss.liquid.

3. Use the find keyboard shortcut to locate this code:

  .quantity-selector {
    display: inline-block;
  }
}

1. Insert the following code block under the code snippet you located in the previous step:

.product-single__title {
  font-weight: $bodyFontWeightBold;
}

1. Insert this code at the end of the file:

.product-unit-price {
  color: rgba($colorTextBody, 0.6);
  display: block;
  font-family: $headerFontStack;
  font-size: em(12px);
}

After your edits, the timber.scss.liquid file should look like this:

1. Click Save to confirm your changes.

Update your templates

1. Locate and expand the Templates folder.

2. Locate and edit the file customers/order.liquid.

3. Use the find keyboard shortcut to locate the code:

{%- else -%}
  {{ line_item.original_price | money }}
{%- endif -%}

1. Add this code below the code from step 3:

{%- if line_item.unit_price_measurement -%}
  {% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}

After your edits, the customers/order.liquid file should look like this:

1. Click Save to confirm your changes.

Update your JavaScript

1. Locate and edit theme.js in Assets.

2. Use the find keyboard shortcut to locate the line containing .shopify-payment-button and replace it with:

$shopifyPaymentButton: $('.shopify-payment-button', this.$container),
$unitPrice: $('[data-unit-price]', this.$container),
$unitPriceBaseUnit: $('[data-unit-price-base-unit]', this.$container),
$unitPriceContainer: $('[data-unit-price-container]', this.$container)

That chunk of the code should look like this:

1. Look for this code:

else {
  this.selectors.$comparePrice.addClass('hide').html('');
  this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
}

1. Add this code below it:

// Unit price
this.selectors.$unitPriceContainer.addClass('hide');
if (variant.unit_price) {
  this.selectors.$unitPrice.html(
      Shopify.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  this.selectors.$unitPriceBaseUnit.html(this.getBaseUnit(variant));
  this.selectors.$unitPriceContainer.removeClass('hide');
}

The result should look like this:

1. Use the find keyboard shortcut to locate this code:

    .attr('data-zoom')
  });
});

1. Insert the following code block under the code snippet you located in the previous step:

},
getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;

The result should look like this:

1. Click Save to confirm your changes.

Update your cart template

1. Locate and expand the Sections folder.

2. Edit the file cart-template.liquid.

3. Use the find keyboard shortcut to locate the code <span class="order-discount h5">{{ item.final_price | money }}</span>.

4. Replace the line with this code:

<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>

1. Find the first occurence of the code {%- if item.line_level_discount_allocations != blank -%}:

{%- if item.line_level_discount_allocations != blank -%}
  <ul class="order-discount order-discount--list order-discount--title order-discount--cart medium-down--hide" aria-label="{{ 'customer.order.discount' | t }}">
    {%- for discount_allocation in item.line_level_discount_allocations -%}
      <li class="order-discount__item">
        <span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
      </li>
    {%- endfor -%}
  </ul>
{%- endif -%}

1. Add this chunk of code above the code from step 5:

{%- if item.variant.available and item.variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: item, available: item.variant.available %}
{%- endif -%}

After your edits, the cart-template.liquid file should look like this:

1. Click Save to confirm your changes.

Update your featured product

1. Locate and expand the Sections folder.

2. Edit the file featured-product.liquid.

3. Use the find keyboard shortcut to locate the line with itemprop="name" and replace it by:

<h1 class="product-single__title" itemprop="name">{{ title }}</h1>

1. Locate the code containing id="PriceA11y":

{% if compare_at_price > price %}
  <span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  <s id="ComparePrice" class="product-single__sale-price">
    { compare_at_price | money }}
  </s>
{% endif %}

1. Insert the following code block under the code snippet you located in the previous step:

{% include 'product-unit-price', variant: variant, available: true %}

After your edits, the featured-product.liquid file should look like this:

1. Click Save to confirm your changes.

Update your product template

1. Locate and expand the Sections folder.

2. Edit the file product-template.liquid.

3. Use the find keyboard shortcut to locate the line with itemprop="name" and replace it with:

<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

1. Use the find keyboard shortcut to locate the code:

{% else %}
  <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
    <s id="ComparePrice" class="product-single__sale-price hide">
      {{ product.compare_at_price_max | money }}
    </s>
{% endif %}

1. Add this line below:

{% include 'product-unit-price', variant: variant, available: true %}

After your edits, the product-template.liquid file should look like this:

1. Click Save to confirm your changes.

Update the locales

1. Locate and expand the Locales folder.

2. Open and edit the en.default.json file.

3. Use the find keyboard shortcut to locate the line containing refresh_page and replace it with:

"refresh_page": "choosing a selection results in a full page refresh",
"unit_price_separator": "per"

The result should look like this:

1. Locate the line containing full_details and replace it with:

"full_details": "Full details",
"unit_price_label": "Unit price"

The result should look like this:

1. Click Save to confirm your changes.

(Optional) Add translations for other languages

1. Go to the Themes page in your Shopify admin.

2. Click the ... button > Edit default theme content.

3. Click Change theme language, then select the language you want to edit. This is only possible on your published theme.

4. Enter Unit Price in the search field.

5. Update the Unit price separator field under General / Accessibility.

6. Update the Unit price label field under Products / Product.

7. Click Save.

Venture

Steps for Venture

Unit prices were added to the Venture theme for versions 9.4.0 and above. If you're not able to update your theme to the latest version, then follow these steps to apply the unit price customization to previous versions of Venture.

Edit your theme's language file

1. In the Locales directory, click en.default.json.

2. Use the find keyboard shortcut to locate the line containing refresh_page:

 "refresh_page": "choosing a selection results in a full page refresh"

1. Add the following code above the line found in step 2:

  "unit_price_separator": "per",

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the line containing stock_unavailable:

  "stock_unavailable": "The item could not be added to your cart because there are not enough in stock."

1. Add the following code above the line found in step 4:

  "unit_price_label": "Unit price",

After your edits, the result should look like this:

1. Click Save to confirm your changes.

Edit your theme's stylesheet

1. In the Assets directory, click theme.scss.liquid.

2. Use the find keyboard shortcut to locate the line .product-single__policies {:

  .product-single__policies {
    font-size: em($font-size-base - 1);
  }

1. Add the following code below the closing } tag of the code block found in step 2:

  .product-unit-price {
    font-size: em(12);
    color: $color-body-text;
  }

  .product-card__unit-price {
    display: block;
  }

After your edits, the theme.scss.liquid file should look like this:

1. Click Save to confirm your changes.

Add a product unit price snippet

1. In the Snippets directory, click Add a new snippet.

2. Enter the name product-unit-price.

3. Add the following code into product-unit-price.liquid:

<span class="product-unit-price{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}{% unless product_variant.unit_price_measurement %} hide{% endunless %}" data-unit-price-container>
  {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
  {%- endcapture -%}
  {%- capture unit_price_base_unit -%}
    <span data-unit-price-base-unit>
      {%- if product_variant.unit_price_measurement.reference_value != 1 -%}
        {{- product_variant.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ product_variant.unit_price_measurement.reference_unit }}
    </span>
  {%- endcapture -%}
  <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
  <span data-unit-price>{{ product_variant.unit_price | money }}</span>
  {{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>

1. Click Save to confirm your changes.

Edit your product card snippet

1. In the Snippets directory, click product-card.liquid.

2. Use the find keyboard shortcut to locate the line <a href="{{ product.url | within: collection }}".

3. Add the following code above the line found in step 2:

  {%- assign current_variant = product.selected_or_first_available_variant -%}

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the line <div class="product-card__price">:

<div class="product-card__price">
  {% if product.compare_at_price > product.price %}
    {% comment %}
      Product is on sale
    {% endcomment %}
    {% if product.price_varies %}
      {% assign sale_price = product.price | money_without_trailing_zeros %}
      {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
    {% else %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      {{ product.price | money_without_trailing_zeros }}
    {% endif %}
  {% else %}
    {% comment %}
      Not on sale, but could still have varying prices
    {% endcomment %}
    {% if product.price_varies %}
      {% assign price = product.price | money_without_trailing_zeros %}
      {{ 'products.product.from_text_html' | t: price: price }}
    {% else %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      {{ product.price | money_without_trailing_zeros }}
    {% endif %}
  {% endif %}
</div>

1. Add the following code above the closing </div> tag found in step 5:

{%- unless product.price_varies -%}
  {%- if current_variant.unit_price_measurement -%}
    {% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
  {%- endif -%}
{%- endunless -%}

After your edits, the result should look like this:

1. Click Save to confirm your changes.

Edit your cart page template

1. In the Sections directory, click cart-template.liquid.

2. Use the find keyboard shortcut to locate the first instance of <td class="cart__cell--total">:

<td class="cart__cell--total">
  {%- if item.original_line_price != item.final_line_price -%}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <del class="cart__item-total">{{ item.original_line_price | money }}</del>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    <span class="cart__item-total">{{ item.final_line_price | money }}</span>
  {%- else -%}
    <span class="cart__item-total">{{ item.original_line_price | money }}</span>
  {%- endif -%}

1. Add the following code below the endif tag found in step 2:

{%- if item.unit_price_measurement -%}
  {% include 'product-unit-price', product_variant: item %}
{%- endif -%}

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the second instance of <td class="cart__cell--total">:

<td class="cart__cell--total">
  {{#if discountsApplied}}
      <span class="visually-hidden">{% endraw %}{{ 'products.product.regular_price' | t }}{% raw %}</span>
    <del class="cart__item-total">{{{originalLinePrice}}}</del>
    <span class="visually-hidden">{% endraw %}{{ 'products.product.sale_price' | t }}{% raw %}</span>
    <span class="cart__item-total">{{{linePrice}}}</span>
  {{else}}
    <span class="cart__item-total">{{{originalLinePrice}}}</span>
  {{/if}}
  {{#if discountsApplied}}
    <ul class="order-discount order-discount--cart order-discount--list order-discount--title" aria-label="{% endraw %}{{ 'customer.order.discount' | t }}{% raw %}">
      {{#each discounts}}
        <li class="order-discount__item">
          {% endraw %}{%- include 'icon-saletag' -%}{% raw %}{{ this.discount_application.title }} (-{{{ this.formattedAmount }}})
        </li>
      {{/each}}
    </ul>
  {{/if}}

1. Add the following code below the second closing {{/if}} tag found in step 4:

{{#if unitPrice}}
  <span class="visually-hidden">{% endraw %}{{ 'products.product.unit_price_label' | t }}{% raw %}</span>
  <span class="product-unit-price">
    {% endraw %}
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
    {% raw %}
    <span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
  </span>
{{/if}}

After your edits, the result should look like this:

1. Click Save to confirm your changes.

Edit your featured product page template

1. In the Sections directory, click featured-product.liquid.

2. Use the find keyboard shortcut to locate the line {% assign current_variant = product.selected_or_first_available_variant %}.

3. Add the following code below the line found in step 2:

{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the line containing <ul class="product-single__meta-list:

<ul class="product-single__meta-list list--no-bullets list--inline">
  <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
  <div class="product-tag">
    {{ 'products.product.on_sale' | t }}
  </div>
  </li>
  <li>
    {% unless product.compare_at_price_max > product.price %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    {% endunless %}
    <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
      {{ current_variant.price | money }}
    </span>
  </li>
  {% if product.compare_at_price_max > product.price %}
    <li>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
        {{ current_variant.compare_at_price | money }}
      </s>
    </li>
  {% endif %}
  {% if section.settings.stock_enable %}

1. Below this ul tag, find the code {% if section.settings.stock_enable %}.

2. Add the following code above the if block found in step 6:

{%- if variants_with_unit_price.size > 0 -%}
  <li>
    {% include 'product-unit-price', product_variant: current_variant %}
  </li>
{%- endif -%}

After your edits, the result should look like this:

1. Click Save to confirm your changes.

Edit your product page template

1. In the Sections directory, click product-template.liquid.

2. Use the find keyboard shortcut to locate the line {% assign current_variant = product.selected_or_first_available_variant %}.

3. Add the following code below the line found in step 2:

{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the line containing <ul class="product-single__meta-list:

<ul class="product-single__meta-list list--no-bullets list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
  <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
    <div class="product-tag">
      {{ 'products.product.on_sale' | t }}
    </div>
  </li>
  <li>
    {% unless product.compare_at_price_max > product.price %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    {% endunless %}
    <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
      {{ current_variant.price | money }}
    </span>
  </li>
  {% if product.compare_at_price_max > product.price %}
    <li>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
        {{ current_variant.compare_at_price | money }}
      </s>
    </li>
  {% endif %}
  {% if section.settings.stock_enable %}

1. Below this ul tag, find the code {% if section.settings.stock_enable %}.

2. Add the following code above the if block found in step 5:

{%- if variants_with_unit_price.size > 0 -%}
  <li>
    {% include 'product-unit-price', product_variant: current_variant %}
  </li>
{%- endif -%}

After your edits, the result should look like this:

1. Click Save to confirm your changes.

Edit your customers' order template

1. In the Templates directory, click customers/order.liquid.

2. Use the find keyboard shortcut to locate the line <td class="text-right" data-label="{{ 'customer.order.price' | t }}">:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  {%- if line_item.original_price != line_item.final_price -%}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <del>{{ line_item.original_price | money }}</del>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
  {%- else -%}
    {{ line_item.original_price | money }}
  {%- endif -%}
</td>

1. Replace the code found in step 2 with the following code:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  <div>
    {%- if line_item.original_price != line_item.final_price -%}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <del>{{ line_item.original_price | money }}</del>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
      {{ line_item.original_price | money }}
    {%- endif -%}
  </div>
  {%- if line_item.unit_price_measurement -%}
    {% include 'product-unit-price', product_variant: line_item %}
  {%- endif -%}
</td>

After your edits, the customers/order.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your theme's JavaScript file

1. In the Assets directory, click theme.js.

2. Use the find keyboard shortcut to locate the line // Create item's data object and add to 'items' array.

3. Add the following code above the line found in step 2:

var unitPrice = null;
if (cartItem.unit_price_measurement) {
  unitPrice = {
    addRefererenceValue:
      cartItem.unit_price_measurement.reference_value !== 1,
    price: theme.Currency.formatMoney(
      cartItem.unit_price,
      theme.moneyFormat
    ),
    reference_value: cartItem.unit_price_measurement.reference_value,
    reference_unit: cartItem.unit_price_measurement.reference_unit
  };
}

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the line vendor: cartItem.vendor,

2. Add the following code below the line found in step 4:

unitPrice: unitPrice,

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the line shopifyPaymentButton: '.shopify-payment-button'.

2. Replace the line found in step 6 with the following code:

shopifyPaymentButton: '.shopify-payment-button',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
unitPriceContainer: '[data-unit-price-container]'

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the line _updateSKU: function(evt) {.

2. Add the following code above the line found in step 8:

_getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
      variant.unit_price_measurement.reference_unit;
},

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the line this._updateIncomingInfo(variant);:

} else {
  // Variant is sold out, disable the submit button
  cache.$addToCart.prop('disabled', true).addClass('btn--sold-out');
  cache.$addToCartText.html(theme.strings.soldOut);
  $(this.selectors.shopifyPaymentButton, this.$container).hide();
  // Update when stock will be available
  this._updateIncomingInfo(variant);
}

1. Add the following code below the closing } tag found in step 10:

$(this.selectors.unitPriceContainer, this.$container).addClass('hide');

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(
    this.selectors.unitPriceBaseUnit,
    this.$container
  );

  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  $unitPriceBaseUnit.html(this._getBaseUnit(variant));

  $(this.selectors.unitPriceContainer, this.$container).removeClass(
    'hide'
  );
}

After your edits, the result should look like this:

1. Click Save to confirm your changes.

(Optional) Add translations for other languages

1. Go to the Themes page in your Shopify admin.

2. Click the ... button > Edit default theme content.

3. Click Change theme language, then select the language you want to edit. This is only possible on your published theme.

4. Enter Unit Price in the search field.

5. Update the Unit price separator field under General / Accessibility.

6. Update the Unit price label field under Products / Product.

7. Click Save.

Supply

Steps for Supply

Unit prices were added to the Supply theme for versions 8.3.0 and above. If you are unable to update your theme to the latest version, follow these steps to apply the unit price customization to previous versions of Supply.

Add a product unit price snippet

1. Locate and expand the Snippets folder.

2. Select Add a new snippet.

3. Enter the name product-unit-price.

4. Copy and paste the following code into the file and select Save.

{%- unless available -%}
{%- if variant.title -%}
    {%- assign available = variant.available -%}
{%- else -%}
    {%- assign available = true -%}
{%- endif -%}
{%- endunless -%}
<div class="product-price-unit {% if available and variant.unit_price_measurement %} product-price-unit--available{% endif %}" data-unit-price-container>
<span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
{%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
    <span>
    {%- if available and variant.unit_price_measurement -%}
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
        {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
    {%- endif -%}
    </span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>
{{- unit_price_separator -}}
<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
</div>

After your edits, the product-unit-price.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your featured product template

1. Locate and expand the Sections folder then select the featured-product.liquid file.

2. Use the find keyboard shortcut to locate the line {% include 'price' with price %} in the file:

<li>
  <span id="productPrice-{{ section.id }}" class="h1">
    {% include 'price' with price %}
  </span>
</li>

1. Add the following code under the closing </span> of the snippet from step 2:

{% include 'product-unit-price' variant: variant %}

After your edits, the featured-product.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your product template

1. Locate and expand the Sections folder then select the product-template.liquid file.

2. Use the find keyboard shortcut to locate the line {% include 'price' with variant.price %} in the file:

<li>
  <span id="productPrice-{{ section.id }}" class="h1">
    {% include 'price' with variant.price %}
  </span>
</li>

1. Add the following code under the closing </span> from step 2:

{% include 'product-unit-price', variant: variant %}

After your edits, the product-template.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your product grid item snippet

1. Locate and expand the Snippets folder then select the product-grid-item.liquid file.

2. Use the find keyboard shortcut to locate the line {% if on_sale and section.settings.product_show_saved_amount %} in the file:

  {% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </span>
  {% endif %}
</div>

1. Replace the code with the following snippet:

{%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
{%- endif -%}
  </div>
{% if on_sale and section.settings.product_show_saved_amount %}
  <div class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
    {% assign compare_price = product.compare_at_price %}
    {% assign product_price = product.price %}
    {% include 'price-sale' %}
  </div>
{% endif %}

After your edits, the product-grid-item.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your product list item snippet

1. Locate and expand the Snippets folder then select the product-list-item.liquid file.

2. Use the find keyboard shortcut to locate the line <div class="product-item--price text-center"> in the file:

<div class="product-item--price text-center">
  <p class="h1 medium-down--left">
    {% if on_sale %}
      <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
    {% else %}
      <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
    {% endif %}
    {% include 'price' with product.price %}
    {% if on_sale and section.settings.product_show_compare_at_price %}
      <small>
        <s>
          <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
          {% include 'price' with product.compare_at_price %}
        </s>
      </small>
    {% endif %}
  </p>
  {% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </span>

1. Replace the code with the following snippet:

<div class="text-center">
  <div class="product-item--price">
    <p class="h1 medium-down--left">
      {% if on_sale %}
        <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
      {% else %}
        <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
      {% endif %}
      {% include 'price' with product.price %}
      {% if on_sale and section.settings.product_show_compare_at_price %}
        <small>
          <s>
            <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
            {% include 'price' with product.compare_at_price %}
          </s>
        </small>
      {% endif %}
    </p>
    {%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
      {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
    {%- endif -%}
  </div>
  {% if on_sale and section.settings.product_show_saved_amount %}
    <div class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </div>

After your edits, the product-list-item.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your search result grid snippet

1. Locate and expand the Snippets folder then select the search-result-grid.liquid file.

2. Use the find keyboard shortcut to locate the line {% if on_sale and section.settings.product_show_saved_amount %} in the file:

  {% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag medium--right">
      {% assign compare_price = item.compare_at_price %}
      {% assign product_price = item.price %}
      {% include 'price-sale' %}
    </span>
  {% endif %}
</div>

1. Replace the code with the following snippet:

  {%- if item.first_available_variant.available and item.first_available_variant.unit_price_measurement -%}
    {% include 'product-unit-price', variant: item.first_available_variant %}
  {%- endif -%}
</div>
{% if on_sale and section.settings.product_show_saved_amount %}
  <div class="sale-tag medium--right">
    {% assign compare_price = item.compare_at_price %}
    {% assign product_price = item.price %}
    {% include 'price-sale' %}
  </div>
{% endif %}

After your edits, the search-result-grid.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your cart template

1. Locate and expand the Templates folder then select the cart.liquid file.

2. Use the find keyboard shortcut to locate the line <del class="cart-original-price order-discount--cart-price"> in the file:

  <del class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</del>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}

1. Replace the code with the following snippet:

  <small><s class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</s></small>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}
{%- if item.variant.available and item.variant.unit_price_measurement -%}
  {% include 'product-unit-price' variant: item, available: item.variant.available %}
{%- endif -%}

After your edits, the cart.liquid file should look like this:

1. Click Save to confirm your changes.

Edit Your Order Template

1. Locate and expand the Templates folder then select the customers/order.liquid file.

2. Use the find keyboard shortcut to locate the line <td class="text-right" data-label="customer.order.price"> in the file:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  {%- if line_item.original_price != line_item.final_price -%}
    <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <del>{{ line_item.original_price | money }}</del>
    <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    <span class="order-discount">{{ line_item.final_price | money }}</span>
  {%- else -%}
    {{ line_item.original_price | money }}
  {%- endif -%}
</td>

1. Add the following code above the closing </td> from step 2:

{%- if line_item.unit_price_measurement -%}
  {% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}

After your edits, the customers/order.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your theme layout

1. Locate and expand the Layout folder then select the theme.liquid file.

2. Use the find keyboard shortcut to locate the line containing only_left: in the file:

product:{
  unavailable: {{ 'products.product.unavailable' | t | json }},
  will_be_in_stock_after:{{ 'products.product.will_be_in_stock_after' | t: date: '[date]' | json }},
  only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
},

1. Add the following code above only_left:{{ 'products.product.only_left' | t: count: '1' | json }} from step 2:

unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},

After your edits, the theme.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your theme styles

1. Locate and expand the Sections folder then select the theme.scss.liquid file.

2. Use the find keyboard shortcut to locate the line .product-item--price { in the file:

.product-item--price {
  @include clearfix;
  .h1 {
    margin-bottom: $gutter/2;
  }
  span {
    line-height: 22px;
  }
  small {
    white-space: nowrap;
  }
}

1. Replace the code with the following snippet:

.product-item--price {
  @include clearfix;
  margin-bottom: $gutter/2;

  .h1 {
    margin-bottom: 0;
  }

  span {
    line-height: 22px;
  }

  small {
    white-space: nowrap;
  }
}

.product-price-unit {
  display: none;
  font-size: em(12px);
  margin-right: 10px;

  .cart-pricing &,
  .order-table & {
    margin-right: 0;
  }

  &.product-price-unit--available {
    display: block;
  }
}

After your edits, the theme.scss.liquid file should look like this:

1. Click Save to confirm your changes.

Edit your JavaScript theme code

1. Locate and expand the Assets folder then select the theme.js.liquid file.

2. Use the find keyboard shortcut to locate the line originalSelectorId: 'productSelect-' + sectionId, in the file:

selectors: {
  originalSelectorId: 'productSelect-' + sectionId,
  $addToCart: $('#addToCart-' + sectionId),
  $SKU: $('.variant-sku', this.$container),
  $productPrice: $('#productPrice-' + sectionId),
  $comparePrice: $('#comparePrice-' + sectionId),
  $addToCartText: $('#addToCartText-' + sectionId),
  $quantityElements: $('#quantity-selector-' + sectionId),
  $variantQuantity: $('#variantQuantity-' + sectionId),
  $variantQuantityMessage: $('#variantQuantity-' + sectionId + '__message'),
  $variantIncoming: $('#variantIncoming-' + sectionId),
  $variantIncomingMessage: $('#variantIncoming-' + sectionId + '__message'),
  $productImageContainer: $('#productPhotoContainer-' + sectionId),
  $productImageWrapper: $('[id^="productPhotoWrapper-' + sectionId + '"]'),
  $productImage: $('[id^="productPhotoImg-' + sectionId + '"]'),
  $productFullDetails: $('.full-details', this.$container),
  $thumbImages: $('#productThumbs-' + sectionId).find('a.product-photo-thumb'),
  $shopifyPaymentButton: '.shopify-payment-button'
}

1. Add the following code above originalSelectorId: 'productSelect-' + sectionId, from step 2:

unitPriceContainer: '[data-unit-price-container]',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the line productVariantCallback: function(variant) { in the file:

productVariantCallback: function(variant) {
  var self = this;
  if (variant) {
    // Update variant image, if one is set
    if (variant.featured_image) {
      var newImg = variant.featured_image;
      var $newImage = this.settings.selectors.$productImageWrapper.filter('[data-image-id="' + newImg.id + '"]');
      var $otherImages = this.settings.selectors.$productImageWrapper.not('[data-image-id="' + newImg.id + '"]');

      $newImage.removeClass('hide');
      $otherImages.addClass('hide');
    }

1. Add the following code under if (variant) { from step 2:

// Update unit price, if one is set
var $unitPriceContainer = $(this.settings.selectors.unitPriceContainer, this.$container);

$unitPriceContainer.removeClass('product-price-unit--available');

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.settings.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(this.settings.selectors.unitPriceBaseUnit, this.$container);

  $unitPrice.text(Shopify.formatMoney(variant.unit_price, moneyFormat));
  $unitPriceBaseUnit.text(this.getBaseUnit(variant));
  $unitPriceContainer.addClass('product-price-unit--available');
}

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the line customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; in the file:

customPriceFormat = ' <span aria-hidden="true">' + customPrice + '</span>';
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.regular_price</span> ' + a11yComparePrice + '</span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.sale_price</span> ' + a11yPrice + '</span>';

1. Replace the line customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; with the following snippet:

customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the line $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide(); in the file:

} else {
  // The variant doesn't exist, disable submit button.
  // This may be an error or notice that a specific variant is not available.
  this.settings.selectors.$addToCart.addClass('disabled').prop('disabled', true);
  this.settings.selectors.$addToCartText.html(theme.strings.product.unavailable);
  this.settings.selectors.$variantQuantity.removeClass('is-visible');
  this.settings.selectors.$quantityElements.hide();
  $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
}

1. Add the following code under the snippet from step 11:

},

getBaseUnit: function (variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;

After your edits, the result should look like this:

1. Click Save to confirm your changes.

Edit your theme’s language file

1. Locate and expand the Locales folder then select the en.default.json file.

2. Use the find keyboard shortcut to locate the line containing "refresh_page" in the file:

"accessibility": {
  "refresh_page": "choosing a selection results in a full page refresh"
},

1. Add the following code above "refresh_page" from step 2:

"unit_price_separator": "per",

After your edits, the result should look like this:

1. Use the find keyboard shortcut to locate the line containing "will_be_in_stock_after" in the file:

"product": {
  "sold_out": "Sold Out",
  "will_not_ship_until": "Will not ship until ",
  "quantity": "Quantity",
  "add_to_cart": "Add to Cart",
  "unavailable": "Unavailable",
  "will_be_in_stock_after": "Will be in stock after ",
  "only_left": {
    "one": "Only  left!",
    "other": "Only  left!"
  },
  "full_details": "Full details"
}

1. Add the following code after "will_be_in_stock_after" from step 5:

"unit_price_label": "Unit price",

After your edits, the result should look like this:

1. Click Save to confirm your changes.

(Optional) Add translations for other languages

1. Go to the Themes page in your Shopify admin.

2. Click the ... button > Edit default theme content.

3. Click on Change theme language, then select the language you want to edit. This is only possible on your published theme.

4. Search for Unit Price in the input bar.

5. Update the Unit price separator field under General / Accessibility.

6. Update the Unit price label field under Products / Product.

7. Click Save.

Show unit prices in your order notifications

If you have added unit prices to your product but your unit prices are not appearing in your order confirmation notifications, then you might need to update your order notification template.

Steps:

1. From your Shopify admin, go to Settings > Notifications.

2. Click Order confirmation.

3. Add the following snippet to the template:

{%- 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 -%}

1. Click Save.