Visa enhetspriser
Om du säljer produkter i kvantiteter eller mått kan du behöva visa pris per enhet för vissa produkter. När du anger ett enhetspris för en produkt visas enhetspriset på produktsidorna, produktseriesidorna, varukorgssidan, betalningssidorna och orderbekräftelserna.
På den här sidan
Lägg till enhetspriser till din produkt
Dator
Gå till Produkter i din Shopify-administratör.
Klicka på den produkt som du vill redigera.
Valfritt: Om din produkt har varianter klickar du på den variant som du vill redigera i avsnittet Varianter.
I avsnittet Prissättning väljer du Visa enhetspris för den här produkten.
Ange din produkts totala mått i fältet Totala produktmått och välj sedan måttenhet.
Valfritt: Om du vill ändra standardbasmåttet lägger du till ditt nya basmått i fältet Basmått och väljer sedan en måttenhet. Om en produkt exempelvis väger 200 g kan du välja en basenhet på 1 kg.
Klicka på Spara.
iPhone
- Från Shopify app, gå till produkter > alla produkter.
- Klicka på den produkt som du vill redigera.
- Tryck på ditt produktprisområde.
- Välj Visa enhetspris.
- Ange din produkts totala mått i fältet Totala produktmått och välj sedan måttenhet.
- Valfritt: Om du vill ändra standardbasmåttet lägger du till ditt nya basmått i fältet Basmått och väljer sedan en måttenhet. Om en produkt exempelvis väger 200 g kan du välja en basenhet på 1 kg.
- Tryck på Spara.
Android
- Från Shopify app, gå till produkter > alla produkter.
- Klicka på den produkt som du vill redigera.
- Tryck på ditt produktprisområde.
- Välj Visa enhetspris.
- Ange din produkts totala mått i fältet Totala produktmått och välj sedan måttenhet.
- Valfritt: Om du vill ändra standardbasmåttet lägger du till ditt nya basmått i fältet Basmått och väljer sedan en måttenhet. Om en produkt exempelvis väger 200 g kan du välja en basenhet på 1 kg.
- Tryck på ✓.
Visa enhetspriser i din webbshop
Alla Online Store 2.0-teman har redan funktionen för enhetspris. Ingen åtgärd krävs för att visa enhetspriser i din webbutik.
Om du har ett äldre tema och inte kan uppdatera det till en version som har stöd för enhetsprisfunktionen, kan du anpassa din temakod manuellt för att visa enhetspris.
Visa enhetspriser i ett äldre tema
Stegen för denna anpassning varierar beroende på ditt tema. Klicka på knappen för ditt tema innan du följer anvisningarna nedan:
Debut
Steg för Debut
Enhetspriser finns i Debut-temat för version 12.1.0 och senare. Om du inte kan uppdatera ditt tema till den senaste versionen kan du lägga till anpassning av enhetspris till tidigare versioner av Debut.
Redigera din produkts prisfragment
Klicka på filen
product-price.liquid
i katalogen Utdrag.Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter
data-price
:
<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}" data-price>
- Ersätt koden med följande utdrag:
<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>
Efter dina redigeringar borde resultatet visas så här:

- Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter
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>
- Lägg till följande kod under den avslutande
</div>
-taggen:
{% 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 %}
- Klicka på Spara för att bekräfta dina ändringar.
Redigera din kundvagnssida
Klicka på filen
cart-template.liquid
i katalogen Avsnitt.Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter
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 -%}
- Ersätt koden med följande utdrag:
<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>
Efter dina redigeringar borde cart-template.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din produktseriesida
Klicka på filen
collection.liquid
i katalogen Avsnitt.Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter
grid-view-item__title
:
{% include 'product-price' %}
- Ersätt koden med följande utdrag:
{% include 'product-price', variant: nil %}
Efter dina redigeringar borde collection.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera ditt rutnät för produktkort
Klicka på filen
product-card-grid.liquid
i katalogen Utdrag.Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter
grid-view-item__title
:
{% include 'product-price', variant: product %}
- Ersätt koden med följande utdrag:
{% include 'product-price', variant: product.selected_or_first_available_variant %}
Efter dina redigeringar borde product-card-grid.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din produktkortslista
Klicka på filen
product-card-list.liquid
i katalogen Utdrag.Använd hitta tangentbordsgenvägen, för att hitta följande kod genom att söka efter
{% if product.available %}
:
{% include 'product-price', variant: product %}
- Ersätt koden med följande utdrag:
{% include 'product-price', variant: product.selected_or_first_available_variant %}
Efter dina redigeringar borde product-card-list.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din ordersida
Klicka på filen
customers/order.liquid
i katalogen Mallar.Använd hitta tangentbordsgenvägen, för att hitta följande kod genom att söka efter
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 -%}
- Ersätt koden med följande utdrag:
<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>
Efter dina redigeringar borde customers/order.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera dina temastilar
Klicka på filen
theme.scss.liquid
i katalogen Tillgångar.Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter
.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%);
}
- Lägg till följande utdrag under koden från steg 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;
}
Efter dina redigeringar borde theme.scss.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din javascript-kod
Klicka på filen
theme.js
i katalogen Tillgångar.Använd Hitta tangentbordsgenvägen för att hitta följande kod:
salePrice: '[data-sale-price]'
- Lägg till följande utdrag för koden från steg 2:
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Efter dina redigeringar borde resultatet visas så här:

- Använd Hitta tangentbordsgenvägen för att hitta följande kod:
productOnSale: 'price--on-sale',
- Lägg till följande fragment efter koden från steg 4:
productUnitAvailable: 'price--unit-available',
Efter dina redigeringar borde resultatet visas så här:

- Använd Hitta tangentbordsgenvägen för att hitta följande kod:
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';
- Ersätt koden med följande utdrag:
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';
- Använd Hitta tangentbordsgenvägen för att hitta följande kod:
var salePrice = '';
- Lägg till följande utdrag under koden från steg 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);
}
- Använd Hitta tangentbordsgenvägen för att hitta följande kod:
.replace('[$]', salePrice)
- Lägg till följande fragment under koden från steg 10:
.replace('[UnitPrice]', unitLabel)
.replace('[$$$]', unitPrice)
Efter dina redigeringar borde resultatet visas så här:

- Använd Hitta tangentbordsgenvägen för att hitta följande kod:
_updatePrice: function(evt) {
- Lägg till följande fragment före koden från steg 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;
},
- Använd Hitta tangentbordsgenvägen för att hitta följande kod:
var $salePrice = $(this.selectors.salePrice, $priceContainer);
- Lägg till följande fragment under koden från steg 14:
var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
$priceContainer
);
- Använd Hitta tangentbordsgenvägen för att hitta följande kod:
.removeClass(this.classes.productOnSale)
- Lägg till följande fragment under koden från steg 16:
.removeClass(this.classes.productUnitAvailable)
- Använd Hitta tangentbordsgenvägen för att hitta följande kod:
else {
// Regular price
$regularPrice.html(
theme.Currency.formatMoney(variant.price, theme.moneyFormat)
);
}
- Lägg till följande fragment under koden från steg 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);
}
Efter dina redigeringar borde resultatet visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera dina engelska översättningar
Klicka på filen
en.default.json
i katalogen Lokaler.Använd Hitta tangentbordsgenvägen för att hitta följande kod:
"selection_help": "press the space key then arrow keys to make a selection"
- Lägg till följande utdrag för koden från steg 2:
"unit_price_separator": "per",
Efter dina redigeringar borde resultatet visas så här:

- Använd Hitta tangentbordsgenvägen för att hitta följande kod:
"include_taxes": "Tax included.",
- Lägg till följande utdrag under koden från steg 4:
"unit_price_label": "Unit price",
Efter dina redigeringar borde resultatet visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din temalayout
Klicka på filen
theme.liquid
i katalogen Layout.Använd Hitta tangentbordsgenvägen för att hitta följande kod:
regularPrice: {{ 'products.product.regular_price' | t | json }},
- Lägg till följande utdrag under koden från steg 2:
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
Efter dina redigeringar borde theme.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
(Valfritt) Lägg till översättningar för andra språk
Gå till sidan Teman i din Shopify-administratör.
Klicka på knappen ... > Redigera standardtemainnehåll.
Klicka på Ändra temaspråk och välj sedan det språk du vill redigera. Detta är endast möjligt för ditt publicerade tema.
Ange
Unit Price
i sökfältetUppdatera fältet enhetsprisavskiljare under Allmänt / tillgänglighet.
Uppdatera fältet Enhetspris under Produkter / Produkt.
Klicka på Spara.
Brooklyn
Steg för Brooklyn
Enhetspriser finns i Brooklyn-temat för version 13.1.0 och senare. Om du inte kan uppdatera ditt tema till den senaste versionen kan du lägga till anpassning av enhetspris till tidigare versioner av Brooklyn.
Lägg till ett produktprisfragment
Klicka på Lägg till en ny snippet i katalogen Snippets.
Ange
product-price
i fältet namn.Kopiera och klistra in följande kod i filen.
<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>
- Klicka på Spara för att bekräfta dina ändringar.
Redigera din utvalda produktsida
Klicka på filen
featured-product.liquid
i katalogen Avsnitt.Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter
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>
- Ersätt koden med följande utdrag:
{% include 'product-price', variant: current_variant %}
Efter dina redigeringar borde featured-product.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din produktsida
Klicka på filen
product-template.liquid
i katalogen Avsnitt.Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter
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>
- Ersätt koden med följande utdrag:
{% include 'product-price', variant: current_variant %}
Efter dina redigeringar borde product-template.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din ajaxvarukorg
Klicka på filen
ajax-cart-template.liquid
i katalogen Utdrag.Använd hitta tangentbordsgenvägen, för att hitta följande kod genom att söka efter
<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}}
- Lägg till följande kod under
{{/if}}
från steg 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}}
Efter dina redigeringar borde ajax-cart-template.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera ditt produktrutnätsartikel
Klicka på filen
product-grid-template.liquid
i katalogen Utdrag.Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter
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.' -%}
- Lägg till följande fragment före koden från steg 2:
{%- assign variant = product.selected_or_first_available_variant -%}
Efter dina redigeringar borde resultatet visas så här:

- Använd hitta tangentbordsgenvägen, för att hitta följande kod genom att söka efter
{{ 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>
- Lägg till följande kod under
</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 -%}
Efter dina redigeringar borde resultatet visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din kundvagnssida
Klicka på filen
cart.liquid
i katalogen Mallar.Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter
<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 -%}
Obs! Om du har en äldre temaversion kan det hända att det inte går att hitta det här fragmentet. I det fallet lägger du till koden från steg 3 direkt under
<span class="cart__price">
-elementet.
- Lägg till följande utdrag under koden från steg 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 -%}
Efter dina redigeringar borde cart.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din ordersida
Klicka på filen
customers/order.liquid
i katalogen Mallar.Använd hitta tangentbordsgenvägen, för att hitta följande kod genom att söka efter
{{ 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>
- Lägg till följande fragment innan
</td>
från steg 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 -%}
Efter dina redigeringar borde customers/order.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera dina temastilar – del 1
Klicka på filen
theme.scss.liquid
i katalogen Tillgångar.Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter
.ajaxcart__price {
:
.ajaxcart__price {
font-size: em(13px);
display: block;
}
- Lägg till följande utdrag under koden från steg 2:
.cart__unit-price {
display: block;
}
Efter dina redigeringar borde theme.scss.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera dina temastilar – del 2
Klicka på filen
timber.scss.liquid
i katalogen Tillgångar.Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter
.product-single__policies {
:
.product-single__policies {
margin: 15px 0 25px 0;
}
- Lägg till följande utdrag för koden från steg 2:
.product-single__unit {
display: none;
.price-container--unit-available & {
display: block;
}
}
Efter dina redigeringar borde resultatet visas så här:

- Gå till slutet av filen och lägg till följande kod:
.product-unit-price {
color: $colorTextBody;
display: block;
}
Efter dina redigeringar borde resultatet visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din temakod för JavaScript
Klicka på filen
theme.js.liquid
i katalogen Tillgångar.Använd Hitta tangentbordsgenvägen för att hitta följande kod:
var prodImg;
- Lägg till följande utdrag under koden från steg 2:
var unitPrice = null;
Efter dina redigeringar borde resultatet visas så här:

- Använd Hitta tangentbordsgenvägen för att hitta följande kod:
// Create item's data object and add to 'items' array
- Lägg till följande fragment över koden från steg 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
};
}
Efter dina redigeringar borde resultatet visas så här:

- Använd Hitta tangentbordsgenvägen för att hitta följande kod:
vendor: cartItem.vendor
- Lägg till följande fragment över koden från steg 6:
unitPrice: unitPrice,
Efter dina redigeringar borde resultatet visas så här:

- Använd Hitta tangentbordsgenvägen för att hitta följande kod:
productPrice: '#ProductPrice',
- Lägg till följande utdrag under koden från steg 8:
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Efter dina redigeringar borde resultatet visas så här:

- Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter
$(this.selectors.priceContainer, this.$container).removeClass(
:
$(this.selectors.priceContainer, this.$container).removeClass(
'visibility-hidden'
);
- Ersätt koden med följande utdrag:
$(this.selectors.priceContainer, this.$container).removeClass(
'visibility-hidden price-container--unit-available'
);
Efter dina redigeringar borde resultatet visas så här:

- Använd Hitta tangentbordsgenvägen för att hitta följande kod:
$(this.selectors.SKU).html(variant.sku);
- Lägg till följande fragment över koden från steg 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'
);
}
Efter dina redigeringar borde resultatet visas så här:

- Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter
this.destroyImageCarousel();
:
onUnload: function() {
this.$container.off(this.settings.namespace);
this.destroyImageCarousel();
}
- Lägg till följande fragment över koden från steg 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;
},
Efter dina redigeringar borde resultatet visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera dina engelska översättningar
Klicka på filen
en.default.json
i katalogen Lokaler.Använd Hitta tangentbordsgenvägen för att hitta följande kod:
"refresh_page": "choosing a selection results in a full page refresh"
- Lägg till följande utdrag för koden från steg 2:
"unit_price_separator": "per",
Efter dina redigeringar borde resultatet visas så här:

- Använd Hitta tangentbordsgenvägen för att hitta följande kod:
"include_taxes": "Tax included.",
- Lägg till följande utdrag under koden från steg 4:
"unit_price": "Unit price",
Efter dina redigeringar borde resultatet visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
(Valfritt) Lägg till översättningar för andra språk
Gå till sidan Teman i din Shopify-administratör.
Klicka på knappen ... > Redigera standardtemainnehåll
Klicka på Ändra temaspråk och välj sedan det språk du vill redigera. Detta är endast möjligt för ditt publicerade tema.
Ange
Unit Price
i sökfältetUppdatera fältet enhetsprisavskiljare under Allmänt / tillgänglighet.
Uppdatera fältet Enhetsprisetikett under Produkt/Allmänt.
Klicka på Spara.
Minimal
Steg för Minimal
Enhetspriser finns tillgängliga i Minimal-temat för version 11.2.0 och senare. Om du inte kan uppdatera ditt tema till den senaste versionen kan du lägga till anpassning av enhetspris till tidigare versioner av Minimal.
Uppdatera dina fragment
Leta reda på och öppna mappen Utkast.
Välj Lägg till ett nytt utdrag.
Ange namnet
product-unit-price
.Kopiera och klistra in följande kod i
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>
Klicka på Spara.
Hitta och redigera filen
product-grid-item.liquid
.Byt ut den här raden:
{% capture price %}{{ featured.price | money }}{% endcapture %}
Med den här raden:
{%- assign price = featured.price | money -%}
- Använd Hitta tangentbordsgenväg för att hitta
{{ price }}
och lägg till koden nedan:
{%- 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 -%}
Efter dina redigeringar borde product-grid-item.liquid
-filen visas så här:

Klicka på Spara för att bekräfta dina ändringar.
Leta reda på och redigera filen
search-result.liquid
Använd Hitta tangentbordsgenväg för att hitta
{% if item.object_type == 'product' %}
och lägg till följande kod på raden nedan:
{%- assign variant = item.selected_or_first_available_variant -%}
- Använd nu Hitta tangentbordsgenvägen för att leta reda på följande två kodfragment:
<s><small>{{ item.compare_at_price_max | money }}</small></s>
Och
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span itemprop="price">
{{ item.price | money }}
</span>
- Lägg till följande block med kod under vart och ett av de två kodfragmenten som listas i föregående steg:
{%- if variant.available and variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: variant %}
{%- endif -%}
Efter dina redigeringar borde search-result.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Uppdatera dina stilar
Leta reda på och öppna mappen Tillgångar.
Redigera filen
theme.scss.liquid
.Använd hitta tangentbordsgenväg för att hitta denna bit av koden:
.grid-link__title,
.grid-link__meta {
position: relative;
margin-bottom: 5px;
- Infoga följande kodblock under kodavsnittet du befann dig i föregående steg:
font-family: $headerFontStack;
- Använd Hitta tangentbordsgenvägen för att hitta följande kodfragment:
.grid-link__sale_price {
opacity: 0.95;
filter: alpha(opacity=95);
}
- Infoga följande kodblock under kodavsnittet du befann dig i föregående steg:
.grid-link__unit-price {
font-size: 1em;
}
- Använd Hitta tangentbordsgenvägen för att hitta följande kodfragment:
.order-discount--list {
margin: 0.8em 0 0.6em 1.3em;
list-style: none;
padding: 0;
}
- Infoga följande kodblock under kodavsnittet du befann dig i föregående steg:
.order-discount--price {
margin-bottom: 0;
}
- Använd Hitta tangentbordsgenvägen för att hitta följande kodfragment:
.cart__product-title {
display: inline-block;
- Infoga följande kodblock under kodavsnittet du befann dig i föregående steg:
font-weight: $bodyFontWeightBold;
Efter dina redigeringar borde theme.scss.liquid
-filen visas så här:



Klicka på Spara för att bekräfta dina ändringar.
Leta reda på och redigera filen
timber.scss.liquid
.Använd Hitta tangentbordsgenvägen för att hitta den här koden:
.quantity-selector {
display: inline-block;
}
}
- Infoga följande kodblock under kodavsnittet du befann dig i föregående steg:
.product-single__title {
font-weight: $bodyFontWeightBold;
}
- Infoga den här koden i slutet av filen:
.product-unit-price {
color: rgba($colorTextBody, 0.6);
display: block;
font-family: $headerFontStack;
font-size: em(12px);
}
Efter dina redigeringar borde timber.scss.liquid
-filen visas så här:


- Klicka på Spara för att bekräfta dina ändringar.
Uppdatera dina mallar
Leta reda på och öppna mappen mallar.
Leta reda på och redigera filen
customers/order.liquid
.Använd Hitta tangentbordsgenvägen för att hitta koden:
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
- Lägg till den här koden under koden från steg 3:
{%- if line_item.unit_price_measurement -%}
{% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}
Efter dina redigeringar borde customers/order.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Uppdatera ditt JavaScript
Leta reda på och redigera
theme.js
i Tillgångar.Använd Hitta tangentbordsgenvägen för att hitta den rad som innehåller
.shopify-payment-button
och ersätt den med:
$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)
Denna bit av koden borde visas så här:

- Leta efter den här koden:
else {
this.selectors.$comparePrice.addClass('hide').html('');
this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
}
- Lägg till den här koden under den:
// 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');
}
Resultatet borde visas så här:

- Använd Hitta tangentbordsgenvägen för att hitta den här koden:
.attr('data-zoom')
});
});
- Infoga följande kodblock under kodavsnittet du befann dig i föregående steg:
},
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;
Resultatet borde visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Uppdatera din varukorgsmall
Leta reda på och öppna mappen Avsnitt.
Redigera filen
cart-template.liquid
.Använd hitta tangentbordsgenväg för att hitta koden
<span class="order-discount h5">{{ item.final_price | money }}</span>
.Byt rad med den här koden:
<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>
- Hitta den första förekomsten av koden
{%- 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 -%}
- Lägg till denna bit av koden över koden från steg 5:
{%- if item.variant.available and item.variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: item, available: item.variant.available %}
{%- endif -%}
Efter dina redigeringar borde cart-template.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Uppdatera din utvalda produkt
Leta reda på och öppna mappen Avsnitt.
Redigera filen
featured-product.liquid
.Använd Hitta tangentbordsgenväg för att hitta raden med
itemprop="name"
och ersätt den med:
<h1 class="product-single__title" itemprop="name">{{ title }}</h1>
- Leta reda på koden som innehåller
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 %}
- Infoga följande kodblock under kodavsnittet du befann dig i föregående steg:
{% include 'product-unit-price', variant: variant, available: true %}
Efter dina redigeringar borde featured-product.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Uppdatera din produktmall
Leta reda på och öppna mappen Avsnitt.
Redigera filen
product-template.liquid
.Använd Hitta tangentbordsgenväg för att hitta raden med
itemprop="name"
och ersätt den med:
<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
- Använd Hitta tangentbordsgenvägen för att hitta koden:
{% 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 %}
- Lägg till den här raden nedan:
{% include 'product-unit-price', variant: variant, available: true %}
Efter dina redigeringar borde product-template.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Uppdatera platserna
Leta reda på och öppna mappen Platser.
Öppna och redigera filen
en.default.json
.Använd Hitta tangentbordsgenvägen för att hitta den rad som innehåller
refresh_page
och ersätt den med:
"refresh_page": "choosing a selection results in a full page refresh",
"unit_price_separator": "per"
Resultatet borde visas så här:

- Leta reda på raden som innehåller
full_details
och ersätt den med:
"full_details": "Full details",
"unit_price_label": "Unit price"
Resultatet borde visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
(Valfritt) Lägg till översättningar för andra språk
Gå till sidan Teman i din Shopify-administratör.
Klicka på knappen ... > Redigera standardtemainnehåll.
Klicka på Ändra temaspråk och välj sedan det språk du vill redigera. Detta är endast möjligt för ditt publicerade tema.
Ange
Unit Price
i sökfältetUppdatera fältet enhetsprisavskiljare under Allmänt / tillgänglighet.
Uppdatera fältet Enhetspris under Produkter / Produkt.
Klicka på Spara.
Venture
Steg för Venture
Enhetspriser las till i Venture-temat för version 9.4.0 och senare. Om du inte kan uppdatera ditt tema till den senaste versionen ska du följa dessa steg för att tillämpa enhetsprisanpassningen till tidigare versioner av venture.
Redigera ditt temas språkfil
Klicka på
en.default.json
i katalogen platser.Använd hitta tangentbordsgenvägen för att leta reda på den rad som innehåller
refresh_page
:
"refresh_page": "choosing a selection results in a full page refresh"
- Lägg till följande kod över den rad som finns i steg 2:
"unit_price_separator": "per",
Efter dina redigeringar borde resultatet visas så här:

- Använd hitta tangentbordsgenvägen för att leta reda på den rad som innehåller
stock_unavailable
:
"stock_unavailable": "The item could not be added to your cart because there are not enough in stock."
- Lägg till följande kod över den rad som finns i steg 4:
"unit_price_label": "Unit price",
Efter dina redigeringar borde resultatet visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera temats formatmall
Klicka på
theme.scss.liquid
i registret Tillgångar.Använd hitta tangentbordsgenvägen för att hitta raden
.product-single__policies {
:
.product-single__policies {
font-size: em($font-size-base - 1);
}
- Lägg till följande kod under den avslutande
}
-taggen i kodblocket som finns i steg 2:
.product-unit-price {
font-size: em(12);
color: $color-body-text;
}
.product-card__unit-price {
display: block;
}
Efter dina redigeringar borde theme.scss.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Lägg till ett prisutdrag för produktenhet
Klicka på Lägg till en ny snippet i katalogen Snippets.
Ange namnet
product-unit-price
.Lägg till följande kod i
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>
- Klicka på Spara för att bekräfta dina ändringar.
Redigera ditt produktkortsfragment
Klicka på
product-card.liquid
i katalogen Fragment.Använd hitta tangentbordsgenvägen för att hitta raden
<a href="{{ product.url | within: collection }}"
.Lägg till följande kod över den rad som finns i steg 2:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Efter dina redigeringar borde resultatet visas så här:

- Använd hitta tangentbordsgenvägen för att hitta raden
<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>
- Lägg till följande kod över den avslutande
</div>
-taggen som finns i steg 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 -%}
Efter dina redigeringar borde resultatet visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din mall för varukorgssidan
Klicka på
cart-template.liquid
i registret Avsnitt.Använd hitta tangentbordsgenvägen för att hitta den första förekomsten av
<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 -%}
- Lägg till följande kod under
endif
-taggen som finns i steg 2:
{%- if item.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: item %}
{%- endif -%}
Efter dina redigeringar borde resultatet visas så här:

- Använd hitta tangentbordsgenvägen för att hitta den andra förekomsten av
<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}}
- Lägg till följande kod under det andra avslutande taggen
{{/if}}
som finns i steg 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}}
Efter dina redigeringar borde resultatet visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din utvalda mall för produktsida
Klicka på
featured-product.liquid
i registret Avsnitt.Använd hitta tangentbordsgenvägen för att hitta raden
{% assign current_variant = product.selected_or_first_available_variant %}
.Lägg till följande kod under den rad som finns i steg 2:
{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}
Efter dina redigeringar borde resultatet visas så här:

- Använd hitta tangentbordsgenvägen för att leta reda på den rad som innehåller
<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 %}
Nedanför denna
ul
tagg ska du leta efter koden{% if section.settings.stock_enable %}
.Lägg till följande kod ovanför blocket
if
som finns i steg 6:
{%- if variants_with_unit_price.size > 0 -%}
<li>
{% include 'product-unit-price', product_variant: current_variant %}
</li>
{%- endif -%}
Efter dina redigeringar borde resultatet visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera produktsidemallen
Klicka på
product-template.liquid
i registret Avsnitt.Använd hitta tangentbordsgenvägen för att hitta raden
{% assign current_variant = product.selected_or_first_available_variant %}
.Lägg till följande kod under den rad som finns i steg 2:
{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}
Efter dina redigeringar borde resultatet visas så här:

- Använd hitta tangentbordsgenvägen för att leta reda på den rad som innehåller
<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 %}
Nedanför denna
ul
tagg ska du leta efter koden{% if section.settings.stock_enable %}
.Lägg till följande kod ovanför blocket
if
som finns i steg 5:
{%- if variants_with_unit_price.size > 0 -%}
<li>
{% include 'product-unit-price', product_variant: current_variant %}
</li>
{%- endif -%}
Efter dina redigeringar borde resultatet visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera dina kunders ordermall
Klicka på
customers/order.liquid
i katalogen Mallar.Använd hitta tangentbordsgenvägen för att hitta raden
<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>
- Byt ut koden som finns i steg 2 med följande kod:
<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>
Efter dina redigeringar borde customers/order.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera ditt temas JavaScript-fil
Klicka på
theme.js
i registret Tillgångar.Använd hitta tangentbordsgenvägen för att hitta raden
// Create item's data object and add to 'items' array
.Lägg till följande kod över den rad som finns i steg 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
};
}
Efter dina redigeringar borde resultatet visas så här:

Använd hitta tangentbordsgenvägen för att hitta raden
vendor: cartItem.vendor,
Lägg till följande kod under den rad som finns i steg 4:
unitPrice: unitPrice,
Efter dina redigeringar borde resultatet visas så här:

Använd hitta tangentbordsgenvägen för att hitta raden
shopifyPaymentButton: '.shopify-payment-button'
.Byt ut den rad som finns i steg 6 med följande kod:
shopifyPaymentButton: '.shopify-payment-button',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
unitPriceContainer: '[data-unit-price-container]'
Efter dina redigeringar borde resultatet visas så här:

Använd hitta tangentbordsgenvägen för att hitta raden
_updateSKU: function(evt) {
.Lägg till följande kod över den rad som finns i steg 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;
},
Efter dina redigeringar borde resultatet visas så här:

- Använd hitta tangentbordsgenvägen för att hitta raden
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);
}
- Lägg till följande kod under den avslutande taggen
}
som finns i steg 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'
);
}
Efter dina redigeringar borde resultatet visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
(Valfritt) Lägg till översättningar för andra språk
Gå till sidan Teman i din Shopify-administratör.
Klicka på knappen ... > Redigera standardtemainnehåll.
Klicka på Ändra temaspråk och välj sedan det språk du vill redigera. Detta är endast möjligt för ditt publicerade tema.
Ange
Unit Price
i sökfältetUppdatera fältet enhetsprisavskiljare under Allmänt / tillgänglighet.
Uppdatera fältet Enhetspris under Produkter / Produkt.
Klicka på Spara.
Supply
Steg för Supply
Enhetspriser har lagts till i Supply-temat för version 8.3.0 och senare. Om du inte kan uppdatera ditt tema till den senaste versionen kan du följa dessa steg för att tillämpa enhetsprisanpassningen till tidigare versioner av Supply.
Lägg till ett prisutdrag för produktenhet
Leta reda på och öppna mappen Utkast.
Välj Lägg till ett nytt utdrag.
Ange namnet
product-unit-price
.Kopiera och klistra in följande kod i filen och välj Spara.
{%- 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>
Efter dina redigeringar borde product-unit-price.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din utvalda produktmall
Leta reda på och öppna mappen Avsnitt och välj sedan filen
featured-product.liquid
.Använd Hitta tangentbordsgenvägen för att hitta raden
{% include 'price' with price %}
i filen:
<li>
<span id="productPrice-{{ section.id }}" class="h1">
{% include 'price' with price %}
</span>
</li>
- Lägg till följande kod under avslutningen
</span>
av fragmentet från steg 2:
{% include 'product-unit-price' variant: variant %}
Efter dina redigeringar borde featured-product.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din produktmall
Leta reda på och öppna mappen Avsnitt och välj sedan filen
product-template.liquid
.Använd Hitta tangentbordsgenvägen för att hitta raden
{% include 'price' with variant.price %}
i filen:
<li>
<span id="productPrice-{{ section.id }}" class="h1">
{% include 'price' with variant.price %}
</span>
</li>
- Lägg till följande kod under avslutningen
</span>
från steg 2:
{% include 'product-unit-price', variant: variant %}
Efter dina redigeringar borde product-template.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera ditt fragment för produktrutnätsartikel
Leta reda på och öppna mappen Fragment och välj sedan filen
product-grid-item.liquid
.Använd Hitta tangentbordsgenvägen för att hitta raden
{% if on_sale and section.settings.product_show_saved_amount %}
i filen:
{% 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>
- Ersätt koden med följande utdrag:
{%- 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 %}
Efter dina redigeringar borde product-grid-item.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera ditt fragment för produktlistartikel
Leta reda på och öppna mappen Fragment och välj sedan filen
product-list-item.liquid
.Använd Hitta tangentbordsgenvägen för att hitta den raden
<div class="product-item--price text-center">
i filen:
<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>
- Ersätt koden med följande utdrag:
<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>
Efter dina redigeringar borde product-list-item.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera ditt fragment för resultatrutnät
Leta reda på och öppna mappen Fragment och välj sedan filen
search-result-grid.liquid
.Använd Hitta tangentbordsgenvägen för att hitta raden
{% if on_sale and section.settings.product_show_saved_amount %}
i filen:
{% 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>
- Ersätt koden med följande utdrag:
{%- 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 %}
Efter dina redigeringar borde search-result-grid.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din varukorgsmall
Leta reda på och öppna mappen Mallar och välj sedan filen
cart.liquid
.Använd Hitta tangentbordsgenvägen för att hitta den raden
<del class="cart-original-price order-discount--cart-price">
i filen:
<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 -%}
- Ersätt koden med följande utdrag:
<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 -%}
Efter dina redigeringar borde cart.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din ordermall
Leta reda på och öppna mappen Mallar och välj sedan filen
customers/order.liquid
.Använd Hitta tangentbordsgenvägen för att hitta den raden
<td class="text-right" data-label="customer.order.price">
i filen:
<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>
- Lägg till följande kod ovanför avslutningen
</td>
från steg 2:
{%- if line_item.unit_price_measurement -%}
{% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}
Efter dina redigeringar borde customers/order.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din temalayout
Leta reda på och öppna mappen Layout och välj sedan filen
theme.liquid
.Använd Hitta tangentbordsgenvägen för att hitta den rad som innehåller
only_left:
i filen:
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 }}
},
- Lägg till följande kod över
only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
från steg 2:
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
Efter dina redigeringar borde theme.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera dina temastilar
Leta reda på och öppna mappen Avsnitt och välj sedan filen
theme.scss.liquid
.Använd Hitta tangentbordsgenvägen för att hitta den raden
.product-item--price {
i filen:
.product-item--price {
@include clearfix;
.h1 {
margin-bottom: $gutter/2;
}
span {
line-height: 22px;
}
small {
white-space: nowrap;
}
}
- Ersätt koden med följande utdrag:
.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;
}
}
Efter dina redigeringar borde theme.scss.liquid
-filen visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera din temakod för JavaScript
Leta reda på och expandera mappen Tillgångar och välj sedan filen
theme.js.liquid
.Använd Hitta tangentbordsgenvägen för att hitta den raden
originalSelectorId: 'productSelect-' + sectionId,
i filen:
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'
}
- Lägg till följande kod över
originalSelectorId: 'productSelect-' + sectionId,
från steg 2:
unitPriceContainer: '[data-unit-price-container]',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Efter dina redigeringar borde resultatet visas så här:

- Använd Hitta tangentbordsgenvägen för att hitta den raden
productVariantCallback: function(variant) {
i filen:
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');
}
- Lägg till följande kod under
if (variant) {
från steg 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');
}
Efter dina redigeringar borde resultatet visas så här:

- Använd Hitta tangentbordsgenvägen för att hitta den raden
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
i filen:
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>';
- Byt ut raden
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
med följande fragment:
customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';
Efter dina redigeringar borde resultatet visas så här:

- Använd Hitta tangentbordsgenvägen för att hitta den raden
$(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
i filen:
} 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();
}
- Lägg till följande kod under avsnittet från steg 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;
Efter dina redigeringar borde resultatet visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
Redigera ditt temas språkfil
Leta reda på och öppna mappen Platseroch välj sedan filen
en.default.json
.Använd Hitta tangentbordsgenvägen för att hitta den rad som innehåller
"refresh_page"
i filen:
"accessibility": {
"refresh_page": "choosing a selection results in a full page refresh"
},
- Lägg till följande kod över
"refresh_page"
från steg 2:
"unit_price_separator": "per",
Efter dina redigeringar borde resultatet visas så här:

- Använd Hitta tangentbordsgenvägen för att hitta den rad som innehåller
"will_be_in_stock_after"
i filen:
"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"
}
- Lägg till följande kod efter
"will_be_in_stock_after"
från steg 5:
"unit_price_label": "Unit price",
Efter dina redigeringar borde resultatet visas så här:

- Klicka på Spara för att bekräfta dina ändringar.
(Valfritt) Lägg till översättningar för andra språk
Gå till sidan Teman i din Shopify-administratör.
Klicka på knappen ... > Redigera standardtemainnehåll.
Klicka på Ändra temaspråk och välj sedan det språk du vill redigera. Detta är endast möjligt för ditt publicerade tema.
Sök efter
Unit Price
i inmatningsfältet.Uppdatera fältet enhetsprisavskiljare under Allmänt / tillgänglighet.
Uppdatera fältet Enhetspris under Produkter / Produkt.
Klicka på Spara.
Visa enhetspriser i dina ordernotifikationer
Som standard visar orderbekräftelsemeddelandet enhetspriser när funktionen är aktiv.
Om du har lagt till enhetspriser för din produkt, men dina enhetspriser inte visas i dina orderbekräftelsemeddelanden, kan du behöva uppdatera mallen manuellt.
Steg:
Från din Shopify-administratör går du till Inställningar > Aviseringar.
I avsnittet Ordrar, klicka på Orderbekräftelse.
Klicka på Redigera kod.
Lägg till följande fragment i mallen i
"order-list__item-price"
-klassen:
{%- if line_item.unit_price_measurement -%}
<div class="order-list__unit-price">
{{ 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 }}
</div>
{%- endif -%}

5. Klicka på Spara.