Visa enhetspriser

Observera

Enhetsprissättning är för närvarande endast tillgängligt för handlare som säljer i EU och i Schweiz. Om du säljer produkter i EU eller i Schweiz, men ditt företag inte är baserat i EU eller i Schweiz, kan du kontakta Shopify-supporten för att aktivera den här funktionen.

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.

Lägg till enhetspriser till din produkt

Dator

1. Gå till Produkter i din Shopify-administratör.

2. Klicka på den produkt som du vill redigera.

3. Valfritt: Om din produkt har varianter klickar du på den variant som du vill redigera i avsnittet Varianter.

4. I avsnittet Prissättning väljer du Visa enhetspris för den här produkten.

5. Ange din produkts totala mått i fältet Totala produktmått och välj sedan måttenhet.

6. 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.

7. Klicka på Spara.

iPhone

1. Från Shopify app, gå till produkter > alla produkter.
2. Klicka på den produkt som du vill redigera.
3. Tryck på ditt produktprisområde.
4. Välj Visa enhetspris.
5. Ange din produkts totala mått i fältet Totala produktmått och välj sedan måttenhet.
6. 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.
7. Tryck på Spara.

Android

1. Från Shopify app, gå till produkter > alla produkter.
2. Klicka på den produkt som du vill redigera.
3. Tryck på ditt produktprisområde.
4. Välj Visa enhetspris.
5. Ange din produkts totala mått i fältet Totala produktmått och välj sedan måttenhet.
6. 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.
7. 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

Varning

Gör en säkerhetskopia av ditt tema innan du börjar redigera koden. Följande instruktioner är avancerade. Om du behöver hjälp med att lägga till funktionen till ditt tema kan du överväga att be om hjälp med anpassningar.

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

1. Klicka på filen product-price.liquid i katalogen Utdrag.

2. 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>

1. 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:

1. 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>

1. 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 }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if available and variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
  </dd>
</div>
{% endif %}

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din kundvagnssida

1. Klicka på filen cart-template.liquid i katalogen Avsnitt.

2. 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 -%}

1. 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 }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if item.unit_price_measurement.reference_value != 1 -%}
      {{- item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

Efter dina redigeringar borde cart-template.liquid-filen visas så här:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din produktseriesida

1. Klicka på filen collection.liquid i katalogen Avsnitt.

2. Använd hitta tangentbordsgenvägen för att lokalisera följande kod genom att söka efter grid-view-item__title:

{% include 'product-price' %}

1. Ersätt koden med följande utdrag:

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

Efter dina redigeringar borde collection.liquid-filen visas så här:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera ditt rutnät för produktkort

1. Klicka på filen product-card-grid.liquid i katalogen Utdrag.

2. 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 %}

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din produktkortslista

1. Klicka på filen product-card-list.liquid i katalogen Utdrag.

2. 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 %}

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din ordersida

1. Klicka på filen customers/order.liquid i katalogen Mallar.

2. 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 -%}

1. 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 }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if line_item.unit_price_measurement.reference_value != 1 -%}
      {{- line_item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ line_item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

Efter dina redigeringar borde customers/order.liquid-filen visas så här:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera dina temastilar

1. Klicka på filen theme.scss.liquid i katalogen Tillgångar.

2. 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%);
}

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din javascript-kod

1. Klicka på filen theme.js i katalogen Tillgångar.

2. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

salePrice: '[data-sale-price]'

1. 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:

1. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

productOnSale: 'price--on-sale',

1. 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:

1. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

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

1. Ersätt koden med följande utdrag:

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

1. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

var salePrice = '';

1. 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);
}

1. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

.replace('[$]', salePrice)

1. 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:

1. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

_updatePrice: function(evt) {

1. 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;
},

1. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

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

1. Lägg till följande fragment under koden från steg 14:

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

1. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

.removeClass(this.classes.productOnSale)

1. Lägg till följande fragment under koden från steg 16:

.removeClass(this.classes.productUnitAvailable)

1. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

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

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera dina engelska översättningar

1. Klicka på filen en.default.json i katalogen Lokaler.

2. 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"

1. 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:

1. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

"include_taxes": "Tax included.",

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din temalayout

1. Klicka på filen theme.liquid i katalogen Layout.

2. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

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

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

(Valfritt) Lägg till översättningar för andra språk

1. Gå till sidan Teman i din Shopify-administratör.

2. Klicka på knappen ... > Redigera standardtemainnehåll.

3. 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.

4. Ange Unit Price i sökfältet

5. Uppdatera fältet enhetsprisavskiljare under Allmänt / tillgänglighet.

6. Uppdatera fältet Enhetspris under Produkter / Produkt.

7. 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

1. Klicka på Lägg till en ny snippet i katalogen Snippets.

2. Ange product-price i fältet namn.

3. 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">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span class="product-unit-price">
      <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </div>
</div>

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din utvalda produktsida

1. Klicka på filen featured-product.liquid i katalogen Avsnitt.

2. 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>

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din produktsida

1. Klicka på filen product-template.liquid i katalogen Avsnitt.

2. 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>

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din ajaxvarukorg

1. Klicka på filen ajax-cart-template.liquid i katalogen Utdrag.

2. 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}}

1. 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">&nbsp;{{'general.accessibility.unit_price_separator' | t}}&nbsp;</span>
        {%- endcapture -%}
        {% raw %}
        <span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
    </span>
{{/if}}

Efter dina redigeringar borde ajax-cart-template.liquid-filen visas så här:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera ditt produktrutnätsartikel

1. Klicka på filen product-grid-template.liquid i katalogen Utdrag.

2. 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.' -%}

1. 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:

1. 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>

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

Efter dina redigeringar borde resultatet visas så här:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din kundvagnssida

1. Klicka på filen cart.liquid i katalogen Mallar.

2. 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.

1. 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">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if item.unit_price_measurement.reference_value != 1 -%}
            {{- item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Efter dina redigeringar borde cart.liquid-filen visas så här:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din ordersida

1. Klicka på filen customers/order.liquid i katalogen Mallar.

2. 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>

1. 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">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if line_item.unit_price_measurement.reference_value != 1 -%}
            {{- line_item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ line_item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Efter dina redigeringar borde customers/order.liquid-filen visas så här:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera dina temastilar – del 1

1. Klicka på filen theme.scss.liquid i katalogen Tillgångar.

2. 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;
}

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera dina temastilar – del 2

1. Klicka på filen timber.scss.liquid i katalogen Tillgångar.

2. 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;
}

1. 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:

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din temakod för JavaScript

1. Klicka på filen theme.js.liquid i katalogen Tillgångar.

2. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

var prodImg;

1. Lägg till följande utdrag under koden från steg 2:

var unitPrice = null;

Efter dina redigeringar borde resultatet visas så här:

1. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

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

1. 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:

1. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

vendor: cartItem.vendor

1. Lägg till följande fragment över koden från steg 6:

unitPrice: unitPrice,

Efter dina redigeringar borde resultatet visas så här:

1. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

productPrice: '#ProductPrice',

1. 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:

1. 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'
);

1. 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:

1. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

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

1. 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:

1. 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();
}

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera dina engelska översättningar

1. Klicka på filen en.default.json i katalogen Lokaler.

2. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

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

1. 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:

1. Använd Hitta tangentbordsgenvägen för att hitta följande kod:

"include_taxes": "Tax included.",

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

(Valfritt) Lägg till översättningar för andra språk

1. Gå till sidan Teman i din Shopify-administratör.

2. Klicka på knappen ... > Redigera standardtemainnehåll

3. 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.

4. Ange Unit Price i sökfältet

5. Uppdatera fältet enhetsprisavskiljare under Allmänt / tillgänglighet.

6. Uppdatera fältet Enhetsprisetikett under Produkt/Allmänt.

7. 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

1. Leta reda på och öppna mappen Utkast.

2. Välj Lägg till ett nytt utdrag.

3. Ange namnet product-unit-price.

4. 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>

1. Klicka på Spara.

2. Hitta och redigera filen product-grid-item.liquid.

3. Byt ut den här raden:

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

Med den här raden:

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

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

2. Leta reda på och redigera filen search-result.liquid

3. 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 -%}

1. 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>

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Uppdatera dina stilar

1. Leta reda på och öppna mappen Tillgångar.

2. Redigera filen theme.scss.liquid.

3. Använd hitta tangentbordsgenväg för att hitta denna bit av koden:

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

1. Infoga följande kodblock under kodavsnittet du befann dig i föregående steg:

font-family: $headerFontStack;

1. Använd Hitta tangentbordsgenvägen för att hitta följande kodfragment:

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

1. Infoga följande kodblock under kodavsnittet du befann dig i föregående steg:

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

1. 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;
}

1. Infoga följande kodblock under kodavsnittet du befann dig i föregående steg:

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

1. Använd Hitta tangentbordsgenvägen för att hitta följande kodfragment:

.cart__product-title {
  display: inline-block;

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

2. Leta reda på och redigera filen timber.scss.liquid.

3. Använd Hitta tangentbordsgenvägen för att hitta den här koden:

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

1. Infoga följande kodblock under kodavsnittet du befann dig i föregående steg:

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

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Uppdatera dina mallar

1. Leta reda på och öppna mappen mallar.

2. Leta reda på och redigera filen customers/order.liquid.

3. Använd Hitta tangentbordsgenvägen för att hitta koden:

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

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Uppdatera ditt JavaScript

1. Leta reda på och redigera theme.js i Tillgångar.

2. 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:

1. Leta efter den här koden:

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

1. 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:

1. Använd Hitta tangentbordsgenvägen för att hitta den här koden:

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

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Uppdatera din varukorgsmall

1. Leta reda på och öppna mappen Avsnitt.

2. Redigera filen cart-template.liquid.

3. Använd hitta tangentbordsgenväg för att hitta koden <span class="order-discount h5">{{ item.final_price | money }}</span>.

4. Byt rad med den här koden:

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

1. 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 -%}

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Uppdatera din utvalda produkt

1. Leta reda på och öppna mappen Avsnitt.

2. Redigera filen featured-product.liquid.

3. 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>

1. 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 %}

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Uppdatera din produktmall

1. Leta reda på och öppna mappen Avsnitt.

2. Redigera filen product-template.liquid.

3. 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>

1. 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 %}

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Uppdatera platserna

1. Leta reda på och öppna mappen Platser.

2. Öppna och redigera filen en.default.json.

3. 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:

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

(Valfritt) Lägg till översättningar för andra språk

1. Gå till sidan Teman i din Shopify-administratör.

2. Klicka på knappen ... > Redigera standardtemainnehåll.

3. 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.

4. Ange Unit Price i sökfältet

5. Uppdatera fältet enhetsprisavskiljare under Allmänt / tillgänglighet.

6. Uppdatera fältet Enhetspris under Produkter / Produkt.

7. 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

1. Klicka på en.default.json i katalogen platser.

2. 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"

1. 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:

1. 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."

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera temats formatmall

1. Klicka på theme.scss.liquid i registret Tillgångar.

2. Använd hitta tangentbordsgenvägen för att hitta raden .product-single__policies {:

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

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:

1. Klicka på Spara för att bekräfta dina ändringar.

Lägg till ett prisutdrag för produktenhet

1. Klicka på Lägg till en ny snippet i katalogen Snippets.

2. Ange namnet product-unit-price.

3. 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>

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera ditt produktkortsfragment

1. Klicka på product-card.liquid i katalogen Fragment.

2. Använd hitta tangentbordsgenvägen för att hitta raden <a href="{{ product.url | within: collection }}".

3. 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:

1. 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>

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din mall för varukorgssidan

1. Klicka på cart-template.liquid i registret Avsnitt.

2. 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 -%}

1. 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:

1. 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}}

1. 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">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
    {% raw %}
    <span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
  </span>
{{/if}}

Efter dina redigeringar borde resultatet visas så här:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din utvalda mall för produktsida

1. Klicka på featured-product.liquid i registret Avsnitt.

2. Använd hitta tangentbordsgenvägen för att hitta raden {% assign current_variant = product.selected_or_first_available_variant %}.

3. 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:

1. 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 %}

1. Nedanför denna ul tagg ska du leta efter koden {% if section.settings.stock_enable %}.

2. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera produktsidemallen

1. Klicka på product-template.liquid i registret Avsnitt.

2. Använd hitta tangentbordsgenvägen för att hitta raden {% assign current_variant = product.selected_or_first_available_variant %}.

3. 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:

1. 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 %}

1. Nedanför denna ul tagg ska du leta efter koden {% if section.settings.stock_enable %}.

2. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera dina kunders ordermall

1. Klicka på customers/order.liquidi katalogen Mallar.

2. 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>

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera ditt temas JavaScript-fil

1. Klicka på theme.js i registret Tillgångar.

2. Använd hitta tangentbordsgenvägen för att hitta raden // Create item's data object and add to 'items' array.

3. 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:

1. Använd hitta tangentbordsgenvägen för att hitta raden vendor: cartItem.vendor,

2. 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:

1. Använd hitta tangentbordsgenvägen för att hitta raden shopifyPaymentButton: '.shopify-payment-button'.

2. 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:

1. Använd hitta tangentbordsgenvägen för att hitta raden _updateSKU: function(evt) {.

2. 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:

1. 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);
}

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

(Valfritt) Lägg till översättningar för andra språk

1. Gå till sidan Teman i din Shopify-administratör.

2. Klicka på knappen ... > Redigera standardtemainnehåll.

3. 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.

4. Ange Unit Price i sökfältet

5. Uppdatera fältet enhetsprisavskiljare under Allmänt / tillgänglighet.

6. Uppdatera fältet Enhetspris under Produkter / Produkt.

7. 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

1. Leta reda på och öppna mappen Utkast.

2. Välj Lägg till ett nytt utdrag.

3. Ange namnet product-unit-price.

4. 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">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
    <span>
    {%- if available and variant.unit_price_measurement -%}
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
        {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
    {%- endif -%}
    </span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>
{{- unit_price_separator -}}
<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
</div>

Efter dina redigeringar borde product-unit-price.liquid-filen visas så här:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din utvalda produktmall

1. Leta reda på och öppna mappen Avsnitt och välj sedan filen featured-product.liquid.

2. 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>

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din produktmall

1. Leta reda på och öppna mappen Avsnitt och välj sedan filen product-template.liquid.

2. 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>

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera ditt fragment för produktrutnätsartikel

1. Leta reda på och öppna mappen Fragment och välj sedan filen product-grid-item.liquid .

2. 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>

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera ditt fragment för produktlistartikel

1. Leta reda på och öppna mappen Fragment och välj sedan filen product-list-item.liquid .

2. 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>

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera ditt fragment för resultatrutnät

1. Leta reda på och öppna mappen Fragment och välj sedan filen search-result-grid.liquid .

2. 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>

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din varukorgsmall

1. Leta reda på och öppna mappen Mallar och välj sedan filen cart.liquid.

2. 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 -%}

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din ordermall

1. Leta reda på och öppna mappen Mallar och välj sedan filen customers/order.liquid.

2. 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>

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din temalayout

1. Leta reda på och öppna mappen Layout och välj sedan filen theme.liquid.

2. 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 }}
},

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera dina temastilar

1. Leta reda på och öppna mappen Avsnitt och välj sedan filen theme.scss.liquid.

2. 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;
  }
}

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera din temakod för JavaScript

1. Leta reda på och expandera mappen Tillgångar och välj sedan filen theme.js.liquid.

2. 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'
}

1. 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:

1. 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');
    }

1. 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:

1. 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>';

1. 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:

1. 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();
}

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

Redigera ditt temas språkfil

1. Leta reda på och öppna mappen Platseroch välj sedan filen en.default.json.

2. 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"
},

1. 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:

1. 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"
}

1. 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:

1. Klicka på Spara för att bekräfta dina ändringar.

(Valfritt) Lägg till översättningar för andra språk

1. Gå till sidan Teman i din Shopify-administratör.

2. Klicka på knappen ... > Redigera standardtemainnehåll.

3. 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.

4. Sök efter Unit Price i inmatningsfältet.

5. Uppdatera fältet enhetsprisavskiljare under Allmänt / tillgänglighet.

6. Uppdatera fältet Enhetspris under Produkter / Produkt.

7. 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:

1. Från din Shopify-administratör går du till Inställningar > Aviseringar.

2. I avsnittet Ordrar, klicka på Orderbekräftelse.

3. Klicka på Redigera kod.

4. 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.

Tips

Lägg en testorder i din butik för att bekräfta att orderaviseringen visar enhetspriset.