Vise enhetspriser

Merk

Denne veiledningen er bare relevant for forhandlere som selger i Frankrike. Hvis du selger produkter i Frankrike, men bedriften selv ikke er basert i Frankrike, må du kontakte Shopify-brukerstøtte for å få aktivert denne funksjonen.

Hvis du selger produkter etter antall eller mål, må du kanskje vise prisen per enhet for enkelte produkter. Når du angir en enhetspris for et produkt, vises enhetsprisen på produktsidene, samlingssidene, handlekurvsidene, kassesidene og bestillingsbekreftelsene.

Legg til enhetspris til produktet ditt

Datamaskin

1. Fra Shopify-administratoren går du til Produkter.

2. Klikk på produktet du vil redigere.

3. Valgfritt: Hvis produktet ditt har varianter, klikker du på varianten du vil redigere i seksjonen Varianter.

4. Velg Vis enhetspris for dette produktet i seksjonen Prissetting.

5. Angi produktets totale mål og velg deretter måleenhet i feltet Totale produktmål.

6. Valgfritt: Legg til grunnmålet i feltet Grunnmål, og velg deretter måleenhet. For et produkt som veier 1 kg, velger du for eksempel kanskje grunnenheten 100 g.

7. Klikk på Lagre.

iPhone

1. Fra Shopify-appen går du til Produkter > Alle produkter.
2. Trykk på produktet du vil redigere.
3. Trykk på produktets prisområde.
4. Velg Vis enhetspris.
5. Angi produktets totale mål og velg deretter måleenhet i feltet Totale produktmål.
6. Valgfritt: Legg til grunnmålet i feltet Grunnmål, og velg deretter måleenhet. For et produkt som veier 1 kg, velger du for eksempel kanskje grunnenheten 100 g.
7. Trykk på Lagre.

Android

1. Fra Shopify-appen går du til Produkter > Alle produkter.
2. Trykk på produktet du vil redigere.
3. Trykk på produktets prisområde.
4. Velg Vis enhetspris.
5. Angi produktets totale mål og velg deretter måleenhet i feltet Totale produktmål.
6. Valgfritt: Legg til grunnmålet i feltet Grunnmål, og velg deretter måleenhet. For et produkt som veier 1 kg, velger du for eksempel kanskje grunnenheten 100 g.
7. Trykk ✓.

Vis enhetspriser i nettbutikken

Alle Online Store 2.0-temaer har funksjonen for enhetspriser tilgjengelig allerede. Det kreves ingen handling for å vise enhetspriser i nettbutikken.

Hvis du har et eldre tema og ikke kan oppdatere det til en versjon som støtter funksjonen for enhetspris, kan du tilpasse temakoden manuelt for å vise enhetsprisen.

Vis enhetspriser i et eldre tema

Advarsel

Sikkerhetskopier temaet før du begynner å redigere koden. Følgende instruksjoner er avanserte. Hvis du trenger hjelp med å legge til funksjonen i temaet, kan du vurdere å få hjelp med tilpasninger.

Trinnene for denne tilpasningen varierer avhengig av valgt tema. Klikk på knappen for temaet ditt før du følger anvisningene nedenfor:

Debut

Steg for Debut

Enhetspriser er tilgjengelige i Debut-temaet for versjon 12.1.0 og nyere. Hvis du ikke har muligheten til å oppdatere temaet til den nyeste versjonen, kan du legge til enhetspristilpasning til tidligere versjoner av Debut.

Endre produktpriskodebiten

1. I Kodebiter-katalogen klikker du på product-price.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter data-price:

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

1. Erstatt koden med følgende kodebit:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter 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. Legg til følgende kode under den avsluttende </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. Klikk på Lagre for å bekrefte endringene.

Rediger handlekurvsiden

1. I Deler-katalogen klikker du på cart-template.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter 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. Erstatt koden med følgende kodebit:

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

Etter redigeringene dine skal cart-template.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere samlingssiden

1. I Deler-katalogen klikker du på collection.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter grid-view-item__title:

{% include 'product-price' %}

1. Erstatt koden med følgende kodebit:

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

Etter redigeringene dine skal collection.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere rutenettet for produktkort

1. I Kodebiter-katalogen klikker du på product-card-grid.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter grid-view-item__title:

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

1. Erstatt koden med følgende kodebit:

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

Etter redigeringene dine skal product-card-grid.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere listen for produktkort

1. I Kodebiter-katalogen klikker du på product-card-list.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter {% if product.available %}:

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

1. Erstatt koden med følgende kodebit:

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

Etter redigeringene dine skal product-card-list.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger bestillingssiden

1. I Maler-katalogen klikker du på customers/order.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter 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. Erstatt koden med følgende kodebit:

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

Etter redigeringene dine skal customers/order.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere temastilene

1. I Eiendeler-katalogen klikker du på theme.scss.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter .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. Legg til følgende kodesnutt under koden fra 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;
}

Etter redigeringene dine skal theme.scss.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere JavaScript-temakoden

1. I Eiendeler-katalogen klikker du på theme.js-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode:

salePrice: '[data-sale-price]'

1. Legg til følgende kodesnutt over koden fra steg 2:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne følgende kode:

productOnSale: 'price--on-sale',

1. Legg til følgende kodebit etter koden fra trinn 4:

productUnitAvailable: 'price--unit-available',

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne følgende kode:

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

1. Erstatt koden med følgende kodebit:

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

1. Bruk finn-hurtigtasten til å finne følgende kode:

var salePrice = '';

1. Legg til følgende kodesnutt under koden fra 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. Bruk finn-hurtigtasten til å finne følgende kode:

.replace('[$]', salePrice)

1. Legg til følgende kodebit under koden fra trinn 10:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne følgende kode:

_updatePrice: function(evt) {

1. Legg til følgende kodebit før koden fra trinn 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. Bruk finn-hurtigtasten til å finne følgende kode:

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

1. Legg til følgende kodebit under koden fra trinn 14:

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

1. Bruk finn-hurtigtasten til å finne følgende kode:

.removeClass(this.classes.productOnSale)

1. Legg til følgende kodebit under koden fra trinn 16:

.removeClass(this.classes.productUnitAvailable)

1. Bruk finn-hurtigtasten til å finne følgende kode:

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

1. Legg til følgende kodebit under koden fra trinn 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);
}

Etter redigeringene dine skal resultatet se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger engelske oversettelser

1. I Lokaler-katalogen klikker du på en.default.json-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode:

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

1. Legg til følgende kodesnutt over koden fra steg 2:

"unit_price_separator": "per",

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne følgende kode:

"include_taxes": "Tax included.",

1. Legg til følgende kodesnutt under koden fra steg 4:

"unit_price_label": "Unit price",

Etter redigeringene dine skal resultatet se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere temaoppsett

1. I Oppsett-katalogen klikker du på theme.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode:

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

1. Legg til følgende kodesnutt under koden fra steg 2:

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

Etter redigeringene dine skal theme.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

(Valgfritt) Legg til oversettelser for andre språk

1. Gå til Temaer-siden i Shopify-administratoren.

2. Klikk på knappen … > Rediger innhold i standardtema.

3. Klikk på Endre temaspråk, og velg deretter språket du vil redigere. Dette er bare mulig på det publiserte temaet.

4. Angi Unit Price i søkefeltet.

5. Oppdater feltet Enhetsskiller under Generelt / Tilgjengelighet.

6. Oppdater feltet Enhetsprisetikett under Produkter / Produkt.

7. Klikk på Lagre.

Brooklyn

Trinn for Brooklyn

Enhetspriser er tilgjengelige i Brooklyn-temaet for versjon 13.1.0 og nyere. Hvis du ikke har muligheten til å oppdatere temaet til den nyeste versjonen, kan du legge til enhetspristilpasning til tidligere versjoner av Brooklyn.

Legg til et produktprisutdrag

1. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.

2. Angi product-price i navnefeltet.

3. Kopier og lim inn følgende kode 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. Klikk på Lagre for å bekrefte endringene.

Rediger den utvalgte produktsiden

1. I Deler-katalogen klikker du på featured-product.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter 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. Erstatt koden med følgende kodebit:

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

Etter redigeringene dine skal featured-product.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere produktsiden

1. I Deler-katalogen klikker du på product-template.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter 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. Erstatt koden med følgende kodebit:

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

Etter redigeringene dine skal product-template.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger ajax-handlekurven din

1. I Kodebiter-katalogen klikker du på ajax-cart-template.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter <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. Legg til følgende kode under {{/if}} fra trinn 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}}

Etter redigeringene dine skal ajax-cart-template.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger elementet i produktrutenettet

1. I Kodebiter-katalogen klikker du på product-grid-template.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter 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. Legg til følgende utdrag før koden fra trinn 2:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter {{ 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. Legg til følgende kode 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 -%}

Etter redigeringene dine skal resultatet se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger handlekurvsiden

1. I Maler-katalogen klikker du på cart.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter <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 -%}

Merk

Hvis du har en eldre temaversjon, er det ikke sikkert at du finner denne kodebiten. I så tilfellet må du legge til koden fra trinn 3 rett under <span class="cart__price">-elementet.

1. Legg til følgende kodesnutt under koden fra 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 -%}

Etter redigeringene dine skal cart.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger bestillingssiden

1. I Maler-katalogen klikker du på customers/order.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter {{ 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. Legg til følgende kodebit før </td> fra trinn 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 -%}

Etter redigeringene dine skal customers/order.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere temastilene – del 1

1. I Eiendeler-katalogen klikker du på theme.scss.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter .ajaxcart__price {:

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

1. Legg til følgende kodesnutt under koden fra steg 2:

.cart__unit-price {
    display: block;
}

Etter redigeringene dine skal theme.scss.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere temastilene – del 2

1. I Eiendeler-katalogen klikker du på timber.scss.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter .product-single__policies {:

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

1. Legg til følgende kodesnutt over koden fra steg 2:

.product-single__unit {
  display: none;

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

Etter redigeringene dine skal resultatet se slik ut:

1. Gå helt til slutten av filen og legg til følgende kode:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger JavaScript-temakode

1. I Eiendeler-katalogen klikker du på theme.js.liquid-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode:

var prodImg;

1. Legg til følgende kodesnutt under koden fra steg 2:

var unitPrice = null;

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne følgende kode:

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

1. Legg til følgende kodebit over koden fra trinn 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
  };
}

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne følgende kode:

vendor: cartItem.vendor

1. Legg til følgende kodebit over koden fra trinn 6:

unitPrice: unitPrice,

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne følgende kode:

productPrice: '#ProductPrice',

1. Legg til følgende kodesnutt under koden fra steg 8:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter $(this.selectors.priceContainer, this.$container).removeClass(:

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

1. Erstatt koden med følgende kodebit:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne følgende kode:

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

1. Legg til følgende kodebit over koden fra trinn 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'
  );
}

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter this.destroyImageCarousel();:

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

1. Legg til følgende kodebit over koden fra trinn 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;
},

Etter redigeringene dine skal resultatet se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger engelske oversettelser

1. I Lokaler-katalogen klikker du på en.default.json-filen.

2. Bruk finn-hurtigtasten til å finne følgende kode:

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

1. Legg til følgende kodesnutt over koden fra steg 2:

"unit_price_separator": "per",

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne følgende kode:

"include_taxes": "Tax included.",

1. Legg til følgende kodesnutt under koden fra steg 4:

"unit_price": "Unit price",

Etter redigeringene dine skal resultatet se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

(Valgfritt) Legg til oversettelser for andre språk

1. Gå til Temaer-siden i Shopify-administratoren.

2. Klikk på knappen … > Rediger innhold i standardtema

3. Klikk på Endre temaspråk, og velg deretter språket du vil redigere. Dette er bare mulig på det publiserte temaet.

4. Angi Unit Price i søkefeltet.

5. Oppdater feltet Enhetsskiller under Generelt / Tilgjengelighet.

6. Oppdater feltet Enehetsprisetikett under Produkter/Generelt.

7. Klikk på Lagre.

Minimal

Steg for Minimal

Enhetspriser er tilgjengelige i Minimal-temaet for versjon 11.2.0 og nyere. Hvis du ikke har muligheten til å oppdatere temaet til den nyeste versjonen, kan du legge til enhetspristilpasning til tidligere versjoner av Minimal.

Oppdatere kodebitene

1. Finn og utvid Utdrag-mappen.

2. Velg Legg til en ny kodebit.

3. Angi navnet product-unit-price.

4. Kopier og lim inn følgende kode 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. Klikk på Lagre.

2. Finn og rediger filen product-grid-item.liquid.

3. Erstatt denne linjen:

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

Med denne linjen:

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

1. Bruk finn-hurtigtasten til å finne {{ price }} og legg til denne koden nedenfor:

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

Etter redigeringene dine skal product-grid-item.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

2. Finn og rediger filen search-result.liquid

3. Bruk finn-hurtigtasten til å finne {% if item.object_type == 'product' %} og legg til følgende kode på linjen under:

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

1. Nå bruker du finn-hurtigtasten til å finne følgende to kodebiter:

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

Og

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

1. Legg til følgende kodeblokk under hver av de to kodebitene som er oppført i forrige trinn:

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

Etter redigeringene dine skal search-result.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Oppdater stilene dine

1. Finn og utvid mappen Ressurser.

2. Rediger filen theme.scss.liquid.

3. Bruk finn-hurtigtasten til å finne denne kodebiten:

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

1. Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:

font-family: $headerFontStack;

1. Bruk finn-hurtigtasten til å finne følgende kodebit:

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

1. Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:

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

1. Bruk finn-hurtigtasten til å finne følgende kodebit:

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

1. Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:

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

1. Bruk finn-hurtigtasten til å finne følgende kodebit:

.cart__product-title {
  display: inline-block;

1. Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:

font-weight: $bodyFontWeightBold;

Etter redigeringene dine skal theme.scss.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

2. Finn og rediger filen timber.scss.liquid.

3. Bruk finn-hurtigtasten til å finne denne koden:

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

1. Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:

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

1. Sett inn denne koden på slutten av filen:

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

Etter redigeringene dine skal timber.scss.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Oppdatere malene dine

1. Finn og utvid Maler-mappen.

2. Finn og rediger filen customers/order.liquid.

3. Bruk finn-hurtigtasten til å finne koden:

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

1. Legg til denne koden under koden fra trinn 3:

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

Etter redigeringene dine skal customers/order.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Oppdatere JavaScript

1. Finn og rediger theme.js i Ressurser.

2. Bruk finn-hurtigtasten til å finne linjen som inneholder .shopify-payment-button og erstatt 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)

Den delen av koden skal se slik ut:

1. Se etter denne koden:

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

1. Legg til denne 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 skal se slik ut:

1. Bruk finn-hurtigtasten til å finne denne koden:

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

1. Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:

},
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 skal se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Oppdatere handlekurvmalen

1. Finn og utvid Deler-mappen.

2. Rediger filen cart-template.liquid.

3. Bruk finn-hurtigtasten til å finne koden <span class="order-discount h5">{{ item.final_price | money }}</span>.

4. Erstatt linjen med denne koden:

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

1. Finn den første forekomsten 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. Legg til denne koden over koden fra trinn 5:

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

Etter redigeringene dine skal cart-template.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Oppdatere det utvalgte produktet ditt

1. Finn og utvid Deler-mappen.

2. Rediger filen featured-product.liquid.

3. Bruk finn-hurtigtasten til å finne linjen med itemprop="name" og erstatte den med:

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

1. Finn koden som inneholder 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. Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:

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

Etter redigeringene dine skal featured-product.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Oppdatere produktmalen

1. Finn og utvid Deler-mappen.

2. Rediger filen product-template.liquid.

3. Bruk finn-hurtigtasten til å finne linjen med itemprop="name" og erstatt den med:

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

1. Bruk finn-hurtigtasten til å finne 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. Legg til denne linjen nedenfor:

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

Etter redigeringene dine skal product-template.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Oppdatere lokalene

1. Finn og utvid Lokaler-mappen.

2. Åpne og rediger en.default.json-filen.

3. Bruk finn-hurtigtasten til å finne linjen som inneholder refresh_page og erstatt den med:

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

Resultatet skal se slik ut:

1. Finn linjen som inneholder full_details og erstatt den med:

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

Resultatet skal se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

(Valgfritt) Legg til oversettelser for andre språk

1. Gå til Temaer-siden i Shopify-administratoren.

2. Klikk på knappen … > Rediger innhold i standardtema.

3. Klikk på Endre temaspråk, og velg deretter språket du vil redigere. Dette er bare mulig på det publiserte temaet.

4. Angi Unit Price i søkefeltet.

5. Oppdater feltet Enhetsskiller under Generelt / Tilgjengelighet.

6. Oppdater feltet Enhetsprisetikett under Produkter / Produkt.

7. Klikk på Lagre.

Venture

Steg for Venture

Enhetspriser ble lagt til i Venture-temaet for versjon 9.4.0 og nyere. Hvis du ikke har muligheten til å oppdatere temaet til den nyeste versjonen, kan du følge dise trinnene for å tilføre enhetspristilpasningen til tidligere versjoner av Venture.

Rediger temaets språkfil

1. I Lokaler -katalogen klikker du en.default.json.

2. Bruk finn-hurtigtasten til å finne linjen som inneholder refresh_page:

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

1. Legg til følgende kode over linjen du fant i trinn 2:

"unit_price_separator": "per",

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne linjen som inneholder stock_unavailable:

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

1. Legg til følgende kode over linjen du fant i trinn 4:

"unit_price_label": "Unit price",

Etter redigeringene dine skal resultatet se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger temaets stilark

1. I Ressurser-katalogen klikker du på theme.scss.liquid.

2. Bruk finn-hurtigtasten til å finne linjen .product-single__policies {:

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

1. Legg til følgende kode under den avsluttende }-taggen i kodeblokken du fant i trinn 2:

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

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

Etter redigeringene dine skal theme.scss.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Legg til en kodebit for produktenhetspris

1. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.

2. Angi navnet product-unit-price.

3. Legg til følgende kode 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. Klikk på Lagre for å bekrefte endringene.

Rediger kodesnutten for produktkortet

1. I Kodesnutter-katalogen klikker du på product-card.liquid.

2. Bruk finn-hurtigtasten til å finne koden <a href="{{ product.url | within: collection }}".

3. Legg til følgende kode over linjen du fant i trinn 2:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne linjen <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. Legg til følgende kode over den avsluttende </div> -taggen som ble funnet 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 -%}

Etter redigeringene dine skal resultatet se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger sidemalen for handlekurven

1. I Deler-katalogen klikker du på cart-template.liquid.

2. Bruk finn-hurtigtasten til å finne den første forekomsten 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. Legg til følgende kode under endif -taggen som ble funnet i trinn 2:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne den andre forekomsten 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. Legg til følgende kode under den andre avsluttende {{/if}} -taggen som ble funnet 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}}

Etter redigeringene dine skal resultatet se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere den utvalgte produktmalen

1. I Deler-katalogen klikker du på featured-product.liquid.

2. Bruk finn-hurtigtasten til å finne koden {% assign current_variant = product.selected_or_first_available_variant %}.

3. Legg til følgende kode under linjen du fant i trinn 2:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne linjen som inneholder <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. Under denne ul-taggen finner du koden {% if section.settings.stock_enable %}.

2. Legg til følgende kode over if-blokken som ble funnet i trinn 6:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger produktsidemalen

1. I Deler-katalogen klikker du på product-template.liquid.

2. Bruk finn-hurtigtasten til å finne koden {% assign current_variant = product.selected_or_first_available_variant %}.

3. Legg til følgende kode under linjen du fant i trinn 2:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne linjen som inneholder <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. Under denne ul-taggen finner du koden {% if section.settings.stock_enable %}.

2. Legg til følgende kode over if-blokken som ble funnet i steg 5:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger bestillingsmalen for kundene dine

1. I Maler -katalogen klikker du på customers/order.liquid.

2. Bruk finn-hurtigtasten til å finne koden <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. Erstatt koden som ble funnet i steg 2 med følgende kode:

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

Etter redigeringene dine skal customers/order.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger temaets JavaScript-fil

1. I Ressurser-katalogen klikker du på theme.js.

2. Bruk finn-hurtigtasten til å finne linjen // Create item's data object and add to 'items' array:

3. Legg til følgende kode over linjen du fant i trinn 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
  };
}

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne koden vendor: cartItem.vendor,

2. Legg til følgende kode under linjen du fant i trinn 4:

unitPrice: unitPrice,

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne linjen shopifyPaymentButton: '.shopify-payment-button':

2. Erstatt linjen som ble funnet i steg 6 med følgende kode:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne linjen _updateSKU: function(evt) {:

2. Legg til følgende kode over linjen du fant i trinn 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;
},

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne linjen 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. Legg til følgende kode under den avsluttende }-taggen som ble funnet 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'
  );
}

Etter redigeringene dine skal resultatet se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

(Valgfritt) Legg til oversettelser for andre språk

1. Gå til Temaer-siden i Shopify-administratoren.

2. Klikk på knappen … > Rediger innhold i standardtema.

3. Klikk på Endre temaspråk, og velg deretter språket du vil redigere. Dette er bare mulig på det publiserte temaet.

4. Angi Unit Price i søkefeltet.

5. Oppdater feltet Enhetsskiller under Generelt / Tilgjengelighet.

6. Oppdater feltet Enhetsprisetikett under Produkter / Produkt.

7. Klikk på Lagre.

Supply

Steg for Supply

Enhetspriser ble lagt til i Supply-temaet for versjon 8.3.0 og nyere. Hvis du ikke har muligheten til å oppdatere temaet til den nyeste versjonen, kan du følge dise trinnene for å tilføre enhetspristilpasningen til tidligere versjoner av Supply.

Legg til en kodebit for produktenhetspris

1. Finn og utvid Utdrag-mappen.

2. Velg Legg til en ny kodebit.

3. Angi navnet product-unit-price.

4. Kopier og lim inn følgende kode i filen og velg Lagre.

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

Etter redigeringene dine skal product-unit-price.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere den utvalgte produktmalen

1. Finn og utvid Deler-mappen og velg featured-product.liquid-filen.

2. Bruk finn-hurtigtasten til å finne linjen {% include 'price' with price %} i filen:

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

1. Legg til følgende kode under den avsluttende </span>-koden i kodebiten fra trinn 2:

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

Etter redigeringene dine skal featured-product.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere produktmalen

1. Finn og utvid Deler-mappen og velg product-template.liquid-filen.

2. Bruk finn-hurtigtasten til å finne linjen {% include 'price' with variant.price %} i filen:

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

1. Legg til følgende kode under den avsluttende </span>-koden fra trinn 2:

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

Etter redigeringene dine skal product-template.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere elementkodebiten for produktrutenettet

1. Finn og utvid Kodebiter-mappen og velg product-grid-item.liquid-filen.

2. Bruk finn-hurtigtasten til å finne linjen {% 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. Erstatt koden med følgende kodebit:

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

Etter redigeringene dine skal product-grid-item.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger elementkodebiten for produktlisten

1. Finn og utvid Kodebiter-mappen og velg product-list-item.liquid-filen.

2. Bruk finn-hurtigtasten til å finne linjen <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. Erstatt koden med følgende kodebit:

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

Etter redigeringene dine skal product-list-item.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger kodebiten for søkeresultatrutenettet

1. Finn og utvid Kodebiter-mappen og velg search-result-grid.liquid-filen.

2. Bruk finn-hurtigtasten til å finne linjen {% 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. Erstatt koden med følgende kodebit:

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

Etter redigeringene dine skal search-result-grid.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere handlekurvmalen

1. Finn og utvid Maler-mappen og velg cart.liquid-filen.

2. Bruk finn-hurtigtasten til å finne linjen <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. Erstatt koden med følgende kodebit:

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

Etter redigeringene dine skal cart.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger bestillingsmalen

1. Finn og utvid Maler-mappen og velg customers/order.liquid-filen.

2. Bruk finn-hurtigtasten til å finne linjen <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. Legg til følgende kode over den avsluttende </td>-koden fra trinn 2:

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

Etter redigeringene dine skal customers/order.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere temaoppsett

1. Finn og utvid Oppsett-mappen og velg theme.liquid-filen.

2. Bruk finn-hurtigtasten for å finne linjen som inneholder only_left:-koden 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. Legg til følgende kode over only_left:{{ 'products.product.only_left' | t: count: '1' | json }} fra trinn 2:

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

Etter redigeringene dine skal theme.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Redigere temastilene

1. Finn og utvid Deler-mappen og velg theme.scss.liquid-filen.

2. Bruk finn-hurtigtasten til å finne linjen .product-item--price { i filen:

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

1. Erstatt koden med følgende kodebit:

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

Etter redigeringene dine skal theme.scss.liquid-filen se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger JavaScript-temakode

1. Finn og utvid Ressurser-mappen og velg theme.js.liquid-filen.

2. Bruk finn-hurtigtasten til å finne linjen 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. Legg til følgende kode over originalSelectorId: 'productSelect-' + sectionId, fra trinn 2:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne linjen 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. Legg til følgende kode under if (variant) { fra trinn 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');
}

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne linjen 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. Erstatt linjen customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; med følgende kodebit:

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

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten til å finne linjen $(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. Legg til følgende kode under kodebiten fra 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;

Etter redigeringene dine skal resultatet se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

Rediger temaets språkfil

1. Finn og utvid Lokaler-mappen og velg en.default.json -filen.

2. Bruk finn-hurtigtasten for å finne linjen som inneholder "refresh_page"-koden i filen:

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

1. Legg til følgende kode over "refresh_page" fra trinn 2:

"unit_price_separator": "per",

Etter redigeringene dine skal resultatet se slik ut:

1. Bruk finn-hurtigtasten for å finne linjen som inneholder "will_be_in_stock_after"-koden 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. Legg til følgende kode etter "will_be_in_stock_after" fra steg 5:

"unit_price_label": "Unit price",

Etter redigeringene dine skal resultatet se slik ut:

1. Klikk på Lagre for å bekrefte endringene.

(Valgfritt) Legg til oversettelser for andre språk

1. Gå til Temaer-siden i Shopify-administratoren.

2. Klikk på knappen … > Rediger innhold i standardtema.

3. Klikk på Endre temaspråk, og velg deretter språket du vil redigere. Dette er bare mulig på det publiserte temaet.

4. Søk etter Unit Price i tekstfeltet.

5. Oppdater feltet Enhetsskiller under Generelt / Tilgjengelighet.

6. Oppdater feltet Enhetsprisetikett under Produkter / Produkt.

7. Klikk på Lagre.

Vis enhetspriser i bestillingsvarsler

Som standard viser varselet for bestillingsbekreftelse enhetspriser når funksjonen er aktiv.

Hvis du har lagt til enhetspriser for produktet, men enhetsprisene ikke vises i varsler for bestillingsbekreftelse, kan det hende du må oppdatere malen manuelt.

Trinn:

1. Fra Shopify-administrator går du til Innstillinger > Varsler.

2. Klikk på Bestillingsbekreftelse i Bestillinger-seksjonen.

3. Klikk på Rediger kode.

4. Legg til følgende kodebit i malen 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. Klikk på Lagre.

Tips

Legg inn en testbestilling i butikken for å kontrollere at bestillingsvarselet viser enhetsprisen.