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.
The steps for this customization vary depending on your theme. Click the button for your theme before following the instructions below:
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
In the Snippets directory, click the product-price.liquid
file.
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>
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 display in this way:
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>
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 }} </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 %}
Click Save to confirm your changes.
Edit your cart page
In the Sections directory, click the cart-template.liquid
file.
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 -%}
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 }} </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 display in this way:
Click Save to confirm your changes.
Edit your collection page
In the Sections directory, click the collection.liquid
file.
Use the find keyboard shortcut to locate the following code by searching for grid-view-item__title
:
{% include 'product-price' %}
Replace the code with the following snippet:
{% include 'product-price' , variant : nil %}
After your edits, the collection.liquid
file should display in this way:
Click Save to confirm your changes.
Edit your product card grid
In the Snippets directory, click the product-card-grid.liquid
file.
Use the find keyboard shortcut to locate the following code by searching for grid-view-item__title
:
{% include 'product-price' , variant : product %}
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 display in this way:
Click Save to confirm your changes.
Edit your product card list
In the Snippets directory, click the product-card-list.liquid
file.
Use the find keyboard shortcut to locate the following code by searching for {% if product.available %}
:
{% include 'product-price' , variant : product %}
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 display in this way:
Click Save to confirm your changes.
Edit your order page
In the Templates directory, click the customers/order.liquid
file.
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 -%}
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 }} </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 display in this way:
Click Save to confirm your changes.
Edit your theme styles
In the Assets directory, click the theme.scss.liquid
file.
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%);
}
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 display in this way:
Click Save to confirm your changes.
Edit your javascript theme code
In the Assets directory, click the theme.js
file.
Use the find keyboard shortcut to locate the following code:
salePrice : ' [data-sale-price] '
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 display in this way:
Use the find keyboard shortcut to locate the following code:
productOnSale : ' price--on-sale ' ,
Add the following snippet after the code from step 4:
productUnitAvailable : ' price--unit-available ' ,
After your edits, the result should display in this way:
Use the find keyboard shortcut to locate the following code:
var liveRegionText = ' [Availability] [Regular] [$$] [Sale] [$] ' ;
Replace the code with the following snippet:
var liveRegionText = ' [Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$] ' ;
Use the find keyboard shortcut to locate the following code:
var salePrice = '' ;
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 );
}
Use the find keyboard shortcut to locate the following code:
. replace ( ' [$] ' , salePrice )
Add the following snippet under the code from step 10:
. replace ( ' [UnitPrice] ' , unitLabel )
. replace ( ' [$$$] ' , unitPrice )
After your edits, the result should display in this way:
Use the find keyboard shortcut to locate the following code:
_updatePrice : function ( evt ) {
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 ;
},
Use the find keyboard shortcut to locate the following code:
var $salePrice = $ ( this . selectors . salePrice , $priceContainer );
Add the following snippet under the code from step 14:
var $unitPrice = $ ( this . selectors . unitPrice , $priceContainer );
var $unitPriceBaseUnit = $ (
this . selectors . unitPriceBaseUnit ,
$priceContainer
);
Use the find keyboard shortcut to locate the following code:
. removeClass ( this . classes . productOnSale )
Add the following snippet under the code from step 16:
. removeClass ( this . classes . productUnitAvailable )
Use the find keyboard shortcut to locate the following code:
else {
// Regular price
$regularPrice . html (
theme . Currency . formatMoney ( variant . price , theme . moneyFormat )
);
}
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 display in this way:
Click Save to confirm your changes.
Edit your english translations
In the Locales directory, click the en.default.json
file.
Use the find keyboard shortcut to locate the following code:
"selection_help" : "press the space key then arrow keys to make a selection"
Add the following snippet over the code from step 2:
"unit_price_separator" : "per" ,
After your edits, the result should display in this way:
Use the find keyboard shortcut to locate the following code:
"include_taxes" : "Tax included." ,
Add the following snippet under the code from step 4:
"unit_price_label" : "Unit price" ,
After your edits, the result should display in this way:
Click Save to confirm your changes.
Edit your theme layout
In the Layout directory, click the theme.liquid
file.
Use the find keyboard shortcut to locate the following code:
regularPrice: {{ 'products.product.regular_price' | t | json }} ,
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 display in this way:
Click Save to confirm your changes.
(Optional) Add translations for other languages
Go to the Themes page in your Shopify admin.
Click the ... button > Edit default theme content .
Click Change theme language , then select the language you want to edit. This is only possible on your published theme.
Enter Unit Price
in the search field.
Update the Unit price separator field under General / Accessibility .
Update the Unit price label field under Products / Product .
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
In the Snippets directory, click Add a new snippet .
Enter product-price
in the name field.
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"> {{ 'general.accessibility.unit_price_separator' | t }} </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>
Click Save to confirm your changes.
Edit your featured product page
In the Sections directory, click the featured-product.liquid
file.
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>
Replace the code with the following snippet:
{% include 'product-price' , variant : current_variant %}
After your edits, the featured-product.liquid
file should display in this way:
Click Save to confirm your changes.
Edit your product page
In the Sections directory, click the product-template.liquid
file.
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>
Replace the code with the following snippet:
{% include 'product-price' , variant : current_variant %}
After your edits, the product-template.liquid
file should display in this way:
Click Save to confirm your changes.
Edit your ajax cart
In the Snippets directory, click the ajax-cart-template.liquid
file.
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}}
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"> {{ 'general.accessibility.unit_price_separator' | t }} </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 display in this way:
Click Save to confirm your changes.
Edit your product grid item
In the Snippets directory, click the product-grid-template.liquid
file.
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.' -%}
Add the following snippet before the code from step 2:
{%- assign variant = product . selected_or_first_available_variant -%}
After your edits, the result should display in this way:
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>
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"> {{ 'general.accessibility.unit_price_separator' | t }} </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 display in this way:
Click Save to confirm your changes.
Edit your cart page
In the Templates directory, click the cart.liquid
file.
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 might not be able to find this snippet. In that case, add the code from step 3 directly under the <span class="cart__price">
element.
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"> {{ 'general.accessibility.unit_price_separator' | t }} </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 display in this way:
Click Save to confirm your changes.
Edit your order page
In the Templates directory, click the customers/order.liquid
file.
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>
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"> {{ 'general.accessibility.unit_price_separator' | t }} </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 display in this way:
Click Save to confirm your changes.
Edit your theme styles - Part 1
In the Assets directory, click the theme.scss.liquid
file.
Use the find keyboard shortcut to locate the following code by searching for .ajaxcart__price {
:
.ajaxcart__price {
font-size : em ( 13px );
display : block ;
}
Add the following snippet under the code from step 2:
.cart__unit-price {
display : block ;
}
After your edits, the theme.scss.liquid
file should display in this way:
Click Save to confirm your changes.
Edit your theme styles - Part 2
In the Assets directory, click the timber.scss.liquid
file.
Use the find keyboard shortcut to locate the following code by searching for .product-single__policies {
:
.product-single__policies {
margin : 15px 0 25px 0 ;
}
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 display in this way:
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 display in this way:
Click Save to confirm your changes.
Edit your JavaScript theme code
In the Assets directory, click the theme.js.liquid
file.
Use the find keyboard shortcut to locate the following code:
var prodImg ;
Add the following snippet under the code from step 2:
var unitPrice = null ;
After your edits, the result should display in this way:
Use the find keyboard shortcut to locate the following code:
// Create item's data object and add to 'items' array
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 display in this way:
Use the find keyboard shortcut to locate the following code:
vendor : cartItem . vendor
Add the following snippet over the code from step 6:
unitPrice : unitPrice ,
After your edits, the result should display in this way:
Use the find keyboard shortcut to locate the following code:
productPrice : ' #ProductPrice ' ,
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 display in this way:
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 '
);
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 display in this way:
Use the find keyboard shortcut to locate the following code:
$ ( this . selectors . SKU ). html ( variant . sku );
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 display in this way:
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 ();
}
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 display in this way:
Click Save to confirm your changes.
Edit your English translations
In the Locales directory, click the en.default.json
file.
Use the find keyboard shortcut to locate the following code:
"refresh_page" : "choosing a selection results in a full page refresh"
Add the following snippet over the code from step 2:
"unit_price_separator" : "per" ,
After your edits, the result should display in this way:
Use the find keyboard shortcut to locate the following code:
"include_taxes" : "Tax included." ,
Add the following snippet under the code from step 4:
"unit_price" : "Unit price" ,
After your edits, the result should display in this way:
Click Save to confirm your changes.
(Optional) Add translations for other languages
Go to the Themes page in your Shopify admin.
Click the ... button > Edit default theme content
Click Change theme language , and then select the language you want to edit. This is only possible on your published theme.
Enter Unit Price
in the search field.
Update the Unit price separator field under General / Accessibility .
Update the Unit price label field under Products / General .
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
Locate and expand the Snippets folder.
Select Add a new snippet .
Enter the name product-unit-price
.
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>
Click Save .
Find and edit the file product-grid-item.liquid
.
Replace this line:
{% capture price %}{{ featured . price | money }}{% endcapture %}
With this line:
{%- assign price = featured . price | money -%}
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 display in this way:
Click Save to confirm your changes.
Locate and edit the file search-result.liquid
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 -%}
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>
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 display in this way:
Click Save to confirm your changes.
Update your styles
Locate and expand the Assets folder.
Edit the file theme.scss.liquid
.
Use the find keyboard shortcut to locate this chunk of code:
.grid-link__title ,
.grid-link__meta {
position : relative ;
margin-bottom : 5px ;
Insert the following code block under the code snippet you located in the previous step:
font-family : $ headerFontStack ;
Use the find keyboard shortcut to locate the following snippet of code:
.grid-link__sale_price {
opacity : 0.95 ;
filter : alpha ( opacity = 95 );
}
Insert the following code block under the code snippet you located in the previous step:
.grid-link__unit-price {
font-size : 1em ;
}
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 ;
}
Insert the following code block under the code snippet you located in the previous step:
.order-discount--price {
margin-bottom : 0 ;
}
Use the find keyboard shortcut to locate the following snippet of code:
.cart__product-title {
display : inline-block ;
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 display in this way:
Click Save to confirm your changes.
Locate and edit the file timber.scss.liquid
.
Use the find keyboard shortcut to locate this code:
.quantity-selector {
display : inline-block ;
}
}
Insert the following code block under the code snippet you located in the previous step:
.product-single__title {
font-weight : $ bodyFontWeightBold ;
}
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 display in this way:
Click Save to confirm your changes.
Update your templates
Locate and expand the Templates folder.
Locate and edit the file customers/order.liquid
.
Use the find keyboard shortcut to locate the code:
{%- else -%}
{{ line_item . original_price | money }}
{%- endif -%}
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 display in this way:
Click Save to confirm your changes.
Update your JavaScript
Locate and edit theme.js
in Assets .
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 display in this way:
Look for this code:
else {
this . selectors . $comparePrice . addClass ( ' hide ' ). html ( '' );
this . selectors . $comparePriceA11y . attr ( ' aria-hidden ' , ' true ' );
}
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 display in this way:
Use the find keyboard shortcut to locate this code:
. attr ( ' data-zoom ' )
});
});
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 display in this way:
Click Save to confirm your changes.
Update your cart template
Locate and expand the Sections folder.
Edit the file cart-template.liquid
.
Use the find keyboard shortcut to locate the code <span class="order-discount h5">{{ item.final_price | money }}</span>
.
Replace the line with this code:
<span class="order-discount order-discount--price h5">{{ item . final_price | money }} </span>
Find the first occurrence 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 -%}
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 display in this way:
Click Save to confirm your changes.
Update your featured product
Locate and expand the Sections folder.
Edit the file featured-product.liquid
.
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>
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 %}
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 display in this way:
Click Save to confirm your changes.
Update your product template
Locate and expand the Sections folder.
Edit the file product-template.liquid
.
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>
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 %}
Add this line below:
{% include 'product-unit-price' , variant : variant , available : true %}
After your edits, the product-template.liquid
file should display in this way:
Click Save to confirm your changes.
Update the locales
Locate and expand the Locales folder.
Open and edit the en.default.json
file.
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 display in this way:
Locate the line containing full_details
and replace it with:
"full_details" : "Full details" ,
"unit_price_label" : "Unit price"
The result should display in this way:
Click Save to confirm your changes.
(Optional) Add translations for other languages
Go to the Themes page in your Shopify admin.
Click the ... button > Edit default theme content .
Click Change theme language , then select the language you want to edit. This is only possible on your published theme.
Enter Unit Price
in the search field.
Update the Unit price separator field under General / Accessibility .
Update the Unit price label field under Products / Product .
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
In the Locales directory, click en.default.json
.
Use the find keyboard shortcut to locate the line containing refresh_page
:
"refresh_page" : "choosing a selection results in a full page refresh"
Add the following code above the line found in step 2:
"unit_price_separator" : "per" ,
After your edits, the result should display in this way:
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."
Add the following code above the line found in step 4:
"unit_price_label" : "Unit price" ,
After your edits, the result should display in this way:
Click Save to confirm your changes.
Edit your theme's stylesheet
In the Assets directory, click theme.scss.liquid
.
Use the find keyboard shortcut to locate the line .product-single__policies {
:
.product-single__policies {
font-size : em ( $ font-size-base - 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 display in this way:
Click Save to confirm your changes.
Add a product unit price snippet
In the Snippets directory, click Add a new snippet .
Enter the name product-unit-price
.
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>
Click Save to confirm your changes.
Edit your product card snippet
In the Snippets directory, click product-card.liquid
.
Use the find keyboard shortcut to locate the line <a href="{{ product.url | within: collection }}"
.
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 display in this way:
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>
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 display in this way:
Click Save to confirm your changes.
Edit your cart page template
In the Sections directory, click cart-template.liquid
.
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 -%}
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 display in this way:
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}}
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"> {{ 'general.accessibility.unit_price_separator' | t }} </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 display in this way:
Click Save to confirm your changes.
Edit your featured product page template
In the Sections directory, click featured-product.liquid
.
Use the find keyboard shortcut to locate the line {% assign current_variant = product.selected_or_first_available_variant %}
.
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 display in this way:
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 %}
Below this ul
tag, find the code {% if section.settings.stock_enable %}
.
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 display in this way:
Click Save to confirm your changes.
Edit your product page template
In the Sections directory, click product-template.liquid
.
Use the find keyboard shortcut to locate the line {% assign current_variant = product.selected_or_first_available_variant %}
.
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 display in this way:
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 %}
Below this ul
tag, find the code {% if section.settings.stock_enable %}
.
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 display in this way:
Click Save to confirm your changes.
Edit your customers' order template
In the Templates directory, click customers/order.liquid
.
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>
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 display in this way:
Click Save to confirm your changes.
Edit your theme's JavaScript file
In the Assets directory, click theme.js
.
Use the find keyboard shortcut to locate the line // Create item's data object and add to 'items' array
.
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 display in this way:
Use the find keyboard shortcut to locate the line vendor: cartItem.vendor,
Add the following code below the line found in step 4:
unitPrice : unitPrice ,
After your edits, the result should display in this way:
Use the find keyboard shortcut to locate the line shopifyPaymentButton: '.shopify-payment-button'
.
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 display in this way:
Use the find keyboard shortcut to locate the line _updateSKU: function(evt) {
.
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 display in this way:
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 );
}
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 display in this way:
Click Save to confirm your changes.
(Optional) Add translations for other languages
Go to the Themes page in your Shopify admin.
Click the ... button > Edit default theme content .
Click Change theme language , then select the language you want to edit. This is only possible on your published theme.
Enter Unit Price
in the search field.
Update the Unit price separator field under General / Accessibility .
Update the Unit price label field under Products / Product .
Click Save .
Supply
Steps for Supply
Unit prices were added to the Supply theme for versions 8.3.0 and above. If you're unable to update your theme to the latest version, then follow these steps to apply the unit price customization to previous versions of Supply.
Add a product unit price snippet
Locate and expand the Snippets folder.
Select Add a new snippet .
Enter the name product-unit-price
.
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"> {{ 'general.accessibility.unit_price_separator' | t }} </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 display in this way:
Click Save to confirm your changes.
Edit your featured product template
Locate and expand the Sections folder then select the featured-product.liquid
file.
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>
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 display in this way:
Click Save to confirm your changes.
Edit your product template
Locate and expand the Sections folder then select the product-template.liquid
file.
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>
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 display in this way:
Click Save to confirm your changes.
Edit your product grid item snippet
Locate and expand the Snippets folder then select the product-grid-item.liquid
file.
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>
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 display in this way:
Click Save to confirm your changes.
Edit your product list item snippet
Locate and expand the Snippets folder then select the product-list-item.liquid
file.
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>
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 display in this way:
Click Save to confirm your changes.
Edit your search result grid snippet
Locate and expand the Snippets folder then select the search-result-grid.liquid
file.
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>
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 display in this way:
Click Save to confirm your changes.
Edit your cart template
Locate and expand the Templates folder then select the cart.liquid
file.
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 -%}
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 display in this way:
Click Save to confirm your changes.
Edit Your Order Template
Locate and expand the Templates folder then select the customers/order.liquid
file.
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>
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 display in this way:
Click Save to confirm your changes.
Edit your theme layout
Locate and expand the Layout folder then select the theme.liquid
file.
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 }}
},
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 display in this way:
Click Save to confirm your changes.
Edit your theme styles
Locate and expand the Sections folder then select the theme.scss.liquid
file.
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 ;
}
}
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 display in this way:
Click Save to confirm your changes.
Edit your JavaScript theme code
Locate and expand the Assets folder then select the theme.js.liquid
file.
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 '
}
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 display in this way:
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 ' );
}
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 display in this way:
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> ' ;
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 display in this way:
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 ();
}
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 display in this way:
Click Save to confirm your changes.
Edit your theme’s language file
Locate and expand the Locales folder then select the en.default.json
file.
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"
} ,
Add the following code above "refresh_page"
from step 2:
"unit_price_separator" : "per" ,
After your edits, the result should display in this way:
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"
}
Add the following code after "will_be_in_stock_after"
from step 5:
"unit_price_label" : "Unit price" ,
After your edits, the result should display in this way:
Click Save to confirm your changes.
(Optional) Add translations for other languages
Go to the Themes page in your Shopify admin.
Click the ... button > Edit default theme content .
Click on Change theme language , then select the language you want to edit. This is only possible on your published theme.
Search for Unit Price
in the input bar.
Update the Unit price separator field under General / Accessibility .
Update the Unit price label field under Products / Product .
Click Save .
By default, the order confirmation notification displays unit prices when the feature is active.
If you've added unit prices to your product, but your unit prices aren't appearing in your order confirmation notifications, then you might need to manually update your template.