Visning af stykpriser

Denne side blev udskrevet kl. Jun 05, 2023. Besøg https://help.shopify.com/da/manual/intro-to-shopify/initial-setup/sell-in-france/price-per-unit for at se den aktuelle version.

Hvis du sælger produkter efter antal eller mål, skal du muligvis vise stykprisen for bestemte produkter. Når du angiver et produkts stykpris, vises den på produktsiderne, kollektionssiderne, siden med indkøbskurv, betalingssiderne og i meddelelserne med ordrebekræftelse.

På denne side

Føj stykpriser til dit produkt
Vis stykpriser i din webshop
Vis stykpriser i dine ordrenotifikationer

Føj stykpriser til dit produkt

Gå til Produkter i din Shopify-administrator.
Klik på navnet på det produkt, du vil ændre.
Klik på den variant, du vil opdatere.
Vælg Vis stykpris for dette produkt under Priser.
Angiv dit produkts antal af enheder i feltet Produktets samlede mål.
Vælg variantens måleenhed med rullemenuen Vis enhed. Din viste enhedstype afhænger af den type produkter, du sælger. Hvis dit produkt f.eks. er to liter sæbe, skal du vælge liter.
Angiv produktets pris pr. enhed i feltet Stykpris.
Valgfrit: Vælg et tal til basisenheden. Du kan f.eks. vælge en basisenhed på 100 g for et produkt, der vejer 1 kg.
Klik på Gem.

I Shopify-appen skal du gå til Produkter > Alle produkter.
Tryk på et produkt på skærmbilledet Alle produkter.
Tryk på den variant, du vil opdatere.
Vælg Vis stykpris for dette produkt under Priser.
Angiv dit produkts antal af enheder i feltet Produktets samlede mål.
Vælg variantens måleenhed med rullemenuen Vis enhed. Din viste enhedstype afhænger af den type produkter, du sælger. Hvis dit produkt f.eks. er to liter sæbe, skal du vælge liter.
Angiv produktets pris pr. enhed i feltet Stykpris.
Valgfri: Vælg en basisenhed. Du kan f.eks. vælge en basisenhed på 100 g for et produkt, der vejer 1 kg.
Tryk på Gem.

I Shopify-appen skal du gå til Produkter > Alle produkter.
Tryk på et produkt på skærmbilledet Alle produkter.
Tryk på den variant, du vil opdatere.
Vælg Vis stykpris for dette produkt under Priser.
Angiv dit produkts antal af enheder i feltet Produktets samlede mål.
Vælg variantens måleenhed med rullemenuen Vis enhed. Din viste enhedstype afhænger af den type produkter, du sælger. Hvis dit produkt f.eks. er to liter sæbe, skal du vælge liter.
Angiv produktets pris pr. enhed i feltet Stykpris.
Valgfri: Vælg en basisenhed. Du kan f.eks. vælge en basisenhed på 100 g for et produkt, der vejer 1 kg.
Tryk på Gem.

Vis stykpriser i din webshop

Trinnene til denne tilpasning varierer afhængigt af dit tema. Klik på knappen for dit tema, inden du følger vejledningen nedenfor:

Advarsel! Sikkerhedskopiér dit tema, før du begynder at redigere koden. Følgende vejledninger er avancerede. Læs afsnittet Få hjælp til tilpasninger, hvis du har brug for hjælp til at føje funktionen til dit tema.

Trin for Debut

Stykpriser er tilgængelige i temaet Debut for version 12.1.0 og derover. Hvis du ikke kan opdatere dit tema til den nyeste version, kan du føje tilpasning af stykpris til tidligere versioner af Debut.

Rediger dit produktpriskodestykke

Klik på filen product-price.liquid i mappen Kodestykker.
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter data-price:

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

Erstat koden med følgende kodestykke:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Den opdaterede version af filen product-price.liquid

Brug find tastaturgenvejen til at finde følgende kode ved at søge 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>

Indsæt følgende kode under afslutningstagget </div>:

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

Klik på Gem for at bekræfte dine ændringer.

Rediger din side med indkøbskurven

Klik på filen cart-template.liquid i mappen Afsnit.
Brug find tastaturgenvejen til at finde følgende kode ved at søge 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 -%}

Erstat koden med følgende kodestykke:

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

Når du har foretaget ændringerne, bør filen cart-template.liquid se ud som følger:

Den opdaterede version af cart-template.liquid-filen

Klik på Gem for at bekræfte dine ændringer.

Rediger din kollektionsside

Klik på filen collection.liquid i mappen Afsnit.
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter grid-view-item__title:

{% include 'product-price' %}

Erstat koden med følgende kodestykke:

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

Når du har foretaget ændringerne, bør filen collection.liquid se ud som følger:

Den opdaterede version af filen collection.liquid

Klik på Gem for at bekræfte dine ændringer.

Rediger dit produktkortgitter

Klik på filen product-card-grid.liquid i mappen Kodestykker.
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter grid-view-item__title:

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

Erstat koden med følgende kodestykke:

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

Når du har foretaget ændringerne, bør filen product-card-grid.liquid se ud som følger:

Den opdaterede version af filen product-card-grid.liquid

Klik på Gem for at bekræfte dine ændringer.

Rediger din produktkortliste

Klik på filen product-card-list.liquid i mappen Kodestykker.
Brug tastaturgenvejen Find til at finde følgende kode ved at søge efter {% if product.available %}:

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

Erstat koden med følgende kodestykke:

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

Når du har foretaget ændringerne, bør filen product-card-list.liquid se ud som følger:

Den opdaterede version af filen product-card-list.liquid

Klik på Gem for at bekræfte dine ændringer.

Rediger din ordreside

Klik på filen customers/order.liquid i mappen Skabeloner.
Brug tastaturgenvejen Find til at finde følgende kode ved at søge 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 -%}

Erstat koden med følgende kodestykke:

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

Når du har foretaget ændringerne, bør filen customers/order.liquid se ud som følger:

Den opdaterede version af customers/order.liquid-filen

Klik på Gem for at bekræfte dine ændringer.

Rediger dine temastile

Klik på filen theme.scss.liquid i mappen Aktiver.
Brug find tastaturgenvejen til at finde følgende kode ved at søge 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%);
}

Tilføj følgende kodestykke under koden fra trin 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;
}

Når du har foretaget ændringerne, bør filen theme.scss.liquid se ud som følger:

Den opdaterede version af theme.scss.liquid-filen

Klik på Gem for at bekræfte dine ændringer.

Rediger din JavaScript-temakode

Klik på filen theme.js i mappen Aktiver.
Brug tastaturgenvejen Find til at finde følgende kode:

salePrice: '[data-sale-price]'

Tilføj følgende kodestykke over koden fra trin 2:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Den opdaterede version af theme.js-filen

Brug tastaturgenvejen Find til at finde følgende kode:

productOnSale: 'price--on-sale',

Tilføj følgende kodestykke efter koden fra trin 4:

productUnitAvailable: 'price--unit-available',

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug tastaturgenvejen Find til at finde følgende kode:

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

Erstat koden med følgende kodestykke:

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

Brug tastaturgenvejen Find til at finde følgende kode:

var salePrice = '';

Tilføj følgende kodestykke under koden fra trin 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);
}

Brug tastaturgenvejen Find til at finde følgende kode:

.replace('[$]', salePrice)

Tilføj følgende kodestykke under koden fra trin 10:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug tastaturgenvejen Find til at finde følgende kode:

_updatePrice: function(evt) {

Tilføj følgende kodestykke før koden fra trin 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;
},

Brug tastaturgenvejen Find til at finde følgende kode:

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

Tilføj følgende kodestykke under koden fra trin 14:

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

Brug tastaturgenvejen Find til at finde følgende kode:

.removeClass(this.classes.productOnSale)

Tilføj følgende kodestykke under koden fra trin 16:

.removeClass(this.classes.productUnitAvailable)

Brug tastaturgenvejen Find til at finde følgende kode:

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

Tilføj følgende kodestykke under koden fra trin 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);
}

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger dine engelske oversættelser

Klik på filen en.default.json i mappen Landekoder.
Brug tastaturgenvejen Find til at finde følgende kode:

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

Tilføj følgende kodestykke over koden fra trin 2:

"unit_price_separator": "per",

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Den opdaterede version af en.default.json-filen

Brug tastaturgenvejen Find til at finde følgende kode:

"include_taxes": "Tax included.",

Tilføj følgende kodestykke under koden fra trin 4:

"unit_price_label": "Unit price",

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger dit temas layout

I mappen Layout skal du klikke på filen theme.liquid.
Brug tastaturgenvejen Find til at finde følgende kode:

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

Tilføj følgende kodestykke under koden fra trin 2:

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

Når du har foretaget ændringerne, bør filen theme.liquid se ud som følger:

Den opdaterede version af theme.liquid-filen

Klik på Gem for at bekræfte dine ændringer.

(Valgfri) Tilføj oversættelser for andre sprog

Gå til siden Temaer i Shopify-administrator.
Klik på knappen ... > Rediger standardtemaindhold.
Klik på Skift temasprog, og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.
Angiv Unit Price i søgefeltet.
Opdater feltet Separator til stykpris under Generelt/Tilgængelighed.
Opdater feltet Label for stykpris under Produkter/Produkt.
Klik på Gem.

Trin til Brooklyn

Stykpriser er tilgængelige i temaet Brooklyn til version 13.1.0 og derover. Hvis du ikke kan opdatere dit tema til den nyeste version, kan du føje tilpasning af stykpriser til tidligere versioner af Brooklyn.

Tilføj et kodestykke for produktpris

Klik på Opret et nyt kodestykke i mappen Kodestykker.
Angiv product-price i feltet navn.
Kopiér og indsæt nedenstående 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>

Klik på Gem for at bekræfte dine ændringer.

Rediger din side med udvalgt produkt

Klik på filen featured-product.liquid i mappen Afsnit.
Brug find tastaturgenvejen til at finde følgende kode ved at søge 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>

Erstat koden med følgende kodestykke:

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

Når du har foretaget ændringerne, bør filen featured-product.liquid se ud som følger:

Den opdaterede version af featured-product.liquid-filen

Klik på Gem for at bekræfte dine ændringer.

Rediger din produktside

Klik på filen product-template.liquid i mappen Afsnit.
Brug find tastaturgenvejen til at finde følgende kode ved at søge 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>

Erstat koden med følgende kodestykke:

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

Når du har foretaget ændringerne, bør filen product-template.liquid se ud som følger:

Den opdaterede version af product-template.liquid-filen

Klik på Gem for at bekræfte dine ændringer.

Rediger din Ajax-indkøbskurv

Klik på filen ajax-cart-template.liquid i mappen Kodestykker.
Brug find tastaturgenvejen til at finde følgende kode ved at søge 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}}

Tilføj følgende kode under {{/if}} fra trin 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}}

Når du har foretaget ændringerne, bør filen ajax-cart-template.liquid se ud som følger:

Den opdaterede version af filen ajax-cart-template.liquid

Klik på Gem for at bekræfte dine ændringer.

Rediger produktgitterelementet

Klik på filen product-grid-template.liquid i mappen Kodestykker.
Brug find tastaturgenvejen til at finde følgende kode ved at søge 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.' -%}

Tilføj følgende kodestykke før koden fra trin 2:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Den opdaterede version af filen product-grid-template.liquid

Brug find tastaturgenvejen til at finde følgende kode ved at søge 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>

Tilføj 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 -%}

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger din side med indkøbskurven

Klik på filen cart.liquid i mappen Skabeloner.
Brug find tastaturgenvejen til at finde følgende kode ved at søge 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 -%}

Bemærk: Hvis du har en ældre version af temaet, kan du muligvis ikke finde dette kodestykke. Hvis det er tilfældet, skal du indsætte koden fra trin 3 direkte under elementet <span class="cart__price">.

Tilføj følgende kodestykke under koden fra trin 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 -%}

Når du har foretaget ændringerne, bør filen cart.liquid se ud som følger:

Den opdaterede version af cart.liquid-filen

Klik på Gem for at bekræfte dine ændringer.

Rediger din ordreside

Klik på filen customers/order.liquid i mappen Skabeloner.
Brug find tastaturgenvejen til at finde følgende kode ved at søge 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>

Tilføj følgende kodestykke før </td> fra trin 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 -%}

Når du har foretaget ændringerne, bør filen customers/order.liquid se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger dine temastile – del 1

Klik på filen theme.scss.liquid i mappen Aktiver.
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter .ajaxcart__price {:

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

Tilføj følgende kodestykke under koden fra trin 2:

.cart__unit-price {
    display: block;
}

Når du har foretaget ændringerne, bør filen theme.scss.liquid se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger dine temastile – del 2

Klik på filen timber.scss.liquid i mappen Aktiver.
Brug find tastaturgenvejen til at finde følgende kode ved at søge efter .product-single__policies {:

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

Tilføj følgende kodestykke over koden fra trin 2:

.product-single__unit {
  display: none;

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Den opdaterede version af filen timber.scss.liquid

Til slutningen af filen skal du tilføje følgende kode:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger din temakode for JavaScript

Klik på filen theme.js.liquid i mappen Aktiver.
Brug find tastaturgenvejen til at finde følgende kode:

var prodImg;

Tilføj følgende kodestykke under koden fra trin 2:

var unitPrice = null;

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Den opdaterede version af theme.js.liquid-filen

Brug find tastaturgenvejen til at finde følgende kode:

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

Tilføj følgende kodestykke over koden fra trin 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
  };
}

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug find tastaturgenvejen til at finde følgende kode:

vendor: cartItem.vendor

Tilføj følgende kodestykke over koden fra trin 6:

unitPrice: unitPrice,

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug find tastaturgenvejen til at finde følgende kode:

productPrice: '#ProductPrice',

Tilføj følgende kodestykke under koden fra trin 8:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug find tastaturgenvejen til at finde følgende kode ved at søge efter $(this.selectors.priceContainer, this.$container).removeClass(:

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

Erstat koden med følgende kodestykke:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug find tastaturgenvejen til at finde følgende kode:

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

Tilføj følgende kodestykke over koden fra trin 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'
  );
}

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug find tastaturgenvejen til at finde følgende kode ved at søge efter this.destroyImageCarousel();:

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

Tilføj følgende kodestykke over koden fra trin 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;
},

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger dine engelske oversættelser

Klik på filen en.default.json i mappen Landekoder.
Brug find tastaturgenvejen til at finde følgende kode:

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

Tilføj følgende kodestykke over koden fra trin 2:

"unit_price_separator": "per",

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug find tastaturgenvejen til at finde følgende kode:

"include_taxes": "Tax included.",

Tilføj følgende kodestykke under koden fra trin 4:

"unit_price": "Unit price",

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

(Valgfri) Tilføj oversættelser for andre sprog

Gå til siden Temaer i Shopify Admin.
Klik på knappen ... > Rediger standardtemaindhold
Klik på Skift temasprog, og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.
Angiv Unit Price i søgefeltet.
Opdater feltet Separator til stykpris under Generelt/Tilgængelighed.
Opdater feltet Label for stykpris under Produkter/Generelt.
Klik på Gem.

Trin for Minimal

Stykpriser er tilgængelige i temaet Minimal for version 11.2.0 og derover. Hvis du ikke kan opdatere dit tema til den nyeste version, kan du tilføje tilpasning af stykprispriser til tidligere versioner af Minimal.

Opdater dine kodestykker

Find og udvid mappen Kodestykker.
Vælg Tilføj et nyt kodestykke.
Angiv navnet product-unit-price.
Kopiér og Indsæt 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>

Klik på Gem.
Find og rediger filen product-grid-item.liquid.
Erstat denne linje:

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

Med denne linje:

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

Brug tastaturgenvejen Find til at finde {{ price }}, og tilføj denne kode 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 -%}

Når du har foretaget ændringerne, bør filen product-grid-item.liquid se ud som følger:

Den opdaterede version af product-grid-item.liquid-filen

Klik på Gem for at bekræfte dine ændringer.
Find og rediger filen search-result.liquid
Brug tastaturgenvejen Find til at finde {% if item.object_type == 'product' %}, og tilføj følgende kode på linjen nedenfor:

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

Brug derefter tastaturgenvejen Find til at finde følgende to kodestykker:

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

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

Tilføj følgende kodeblok under hvert af de to kodestykker, der er vises i det foregående trin:

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

Når du har foretaget ændringerne, bør filen search-result.liquid se ud som følger:

Den opdaterede version af filen search-result.liquid

Klik på Gem for at bekræfte dine ændringer.

Opdater dine typografier

Find og udvid mappen Aktiver.
Rediger filen theme.scss.liquid.
Brug tastaturgenvejen Find til at finde denne kodeblok:

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

Indsæt følgende kodeblok under det kodestykke, du fandt i det foregående trin:

font-family: $headerFontStack;

Brug tastaturgenvejen Find til at finde følgende kodestykke:

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

Indsæt følgende kodeblok under det kodestykke, du fandt i det foregående trin:

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

Brug tastaturgenvejen Find til at finde følgende kodestykke:

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

Indsæt følgende kodeblok under det kodestykke, du fandt i det foregående trin:

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

Brug tastaturgenvejen Find til at finde følgende kodestykke:

.cart__product-title {
  display: inline-block;

Indsæt følgende kodeblok under det kodestykke, du fandt i det foregående trin:

font-weight: $bodyFontWeightBold;

Når du har foretaget ændringerne, bør filen theme.scss.liquid se ud som følger:

Den opdaterede version af filen theme.scss.liquid – del 1

Den opdaterede version af filen theme.scss.liquid – del 2

Den opdaterede version af filen theme.scss.liquid – del 3

Klik på Gem for at bekræfte dine ændringer.
Find og rediger filen timber.scss.liquid.
Brug tastaturgenvejen Find til at finde denne kode:

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

Indsæt følgende kodeblok under det kodestykke, du fandt i det foregående trin:

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

Indsæt denne kode i slutningen af filen:

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

Når du har foretaget ændringerne, bør filen timber.scss.liquid se ud som følger:

Den opdaterede version af filen timber.scss.liquid – del 1

Den opdaterede version af filen timber.scss.liquid – del 2

Klik på Gem for at bekræfte dine ændringer.

Opdater dine skabeloner

Find og udvid mappen Skabeloner.
Find og rediger filen customers/order.liquid.
Brug tastaturgenvejen Find til at finde koden:

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

Indsæt denne kode under koden fra trin 3:

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

Når du har foretaget ændringerne, bør filen customers/order.liquid se ud som følger:

Den opdaterede version af filen order.liquid

Klik på Gem for at bekræfte dine ændringer.

Opdater dit JavaScript

Find og rediger theme.js i Aktiver.
Brug tastaturgenvejen Find til at finde den linje, der indeholder .shopify-payment-button, og erstat 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)

Denne kodeblok bør se sådan ud:

Led efter denne kode:

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

Indsæt denne kode 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 bør se ud som følger:

Brug tastaturgenvejen Find til at finde denne kode:

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

Indsæt følgende kodeblok under det kodestykke, du fandt i det foregående trin:

},
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 bør se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Opdater din indkøbskurvsskabelon

Find og udvid mappen Afsnit.
Rediger filen cart-template.liquid.
Brug genvejstasten Find til at finde koden <span class="order-discount h5">{{ item.final_price | money }}</span>.
Erstat linjen med denne kode:

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

Find den første forekomst af 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 -%}

Indsæt denne kodeblok over koden fra trin 5:

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

Når du har foretaget ændringerne, bør filen cart-template.liquid se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Opdater dit udvalgte produkt

Find og udvid mappen Afsnit.
Rediger filen featured-product.liquid.
Brug tastaturgenvejen Find til at finde linjen med itemprop="name", og erstat den med:

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

Find koden, der indeholder 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 %}

Indsæt følgende kodeblok under det kodestykke, du fandt i det foregående trin:

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

Når du har foretaget ændringerne, bør filen featured-product.liquid se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Opdater din produktskabelon

Find og udvid mappen Afsnit.
Rediger filen product-template.liquid.
Brug tastaturgenvejen Find til at finde linjen med itemprop="name", og erstat den med:

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

Brug tastaturgenvejen Find til at finde 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 %}

Indsæt denne linje nedenunder:

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

Når du har foretaget ændringerne, bør filen product-template.liquid se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Opdater landestandarderne

Find og Udvid mappen Landestandarder.
Åbn og rediger filen en.default.json.
Brug tastaturgenvejen Find til at finde den linje, der indeholder refresh_page, og erstat den med:

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

Resultatet bør se ud som følger:

Find linjen, der indeholder full_details, og erstat den med:

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

Resultatet bør se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

(Valgfri) Tilføj oversættelser for andre sprog

Gå til siden Temaer i Shopify-administrator.
Klik på knappen ... > Rediger standardtemaindhold.
Klik på Skift temasprog, og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.
Angiv Unit Price i søgefeltet.
Opdater feltet Separator til stykpris under Generelt/Tilgængelighed.
Opdater feltet Label for stykpris under Produkter/Produkt.
Klik på Gem.

Trin for Venture

Der blev føjet stykpriser til temaet Venture for version 9.4.0 og derover. Hvis du ikke kan opdatere dit tema til den seneste version, skal du følge disse trin for at anvende tilpasningen af stykpriser i tidligere versioner af Venture.

Rediger dit temas sprogfil

I mappen Landestandarder skal du klikke på en.default.json.
Brug tastaturgenvejen Find til at finde den linje, der indeholder refresh_page:

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

Indsæt følgende kode over linjen, der blev fundet i trin 2:

"unit_price_separator": "per",

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug tastaturgenvejen Find til at finde den linje, der indeholder stock_unavailable:

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

Indsæt følgende kode over linjen fundet i trin 4:

"unit_price_label": "Unit price",

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger dit temas typografiark

Klik på theme.scss.liquid i mappen Aktiver.
Brug tastaturgenvejen Find til at finde linjen .product-single__policies {:

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

Indsæt følgende kode under afslutningstagget } for kodeblokken, der blev fundet i trin 2:

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

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

Når du har foretaget ændringerne, bør filen theme.scss.liquid se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Tilføj et kodestykke med stykpris for produktet

Klik på Opret et nyt kodestykke i mappen Kodestykker.
Angiv navnet product-unit-price.
Føj følgende kode til 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>

Klik på Gem for at bekræfte dine ændringer.

Rediger kodestykket for dit produktkort

Klik på product-card.liquid i mappen Kodestykker.
Brug tastaturgenvejen Find til at finde linjen <a href="{{ product.url | within: collection }}".
Indsæt følgende kode over linjen, der blev fundet i trin 2:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Den opdaterede version af product-card.liquid-filen

Brug tastaturgenvejen Find til at finde 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>

Tilføj følgende kode over afslutningstagget </div>, der blev fundet i trin 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 -%}

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger skabelonen for din side med indkøbskurv

Klik på cart-template.liquid i mappen Afsnit.
Brug tastaturgenvejen Find til at finde den første forekomst af <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 -%}

Tilføj følgende kode under endif-tagget, der blev fundet i trin 2:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug tastaturgenvejen Find til at finde den anden forekomst af <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}}

Tilføj følgende kode under det andet afslutningstag {{/if}}, der blev fundet i trin 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}}

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger din skabelon for siden med udvalgte produkter

Klik på featured-product.liquid i mappen Afsnit.
Brug tastaturgenvejen Find til at finde linjen {% assign current_variant = product.selected_or_first_available_variant %}.
Tilføj følgende kode under linjen, der blev fundet i trin 2:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug tastaturgenvejen Find til at finde den linje, der indeholder <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 %}

Find koden {% if section.settings.stock_enable %} under dette ul-tag.
Tilføj følgende kode over if-blokken, der blev fundet i trin 6:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Opdateret version af featured-product.liquid-filen

Klik på Gem for at bekræfte dine ændringer.

Rediger din produktsideskabelon

Klik på product-template.liquid i mappen Afsnit.
Brug tastaturgenvejen Find til at finde linjen {% assign current_variant = product.selected_or_first_available_variant %}.
Tilføj følgende kode under linjen, der blev fundet i trin 2:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Opdateret version af product-template.liquid-filen

Brug tastaturgenvejen Find til at finde den linje, der indeholder <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 %}

Find koden {% if section.settings.stock_enable %} under dette ul-tag.
Tilføj følgende kode over if-blokken, der blev fundet i trin 5:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger ordreskabelonen for dine kunder

Klik på customers/order.liquid i mappen Skabeloner.
Brug tastaturgenvejen Find til at finde linjen <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>

Erstat koden, der blev fundet i trin 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>

Når du har foretaget ændringerne, bør filen customers/order.liquid se ud som følger:

Opdateret version af customers/order.liquid-filen

Klik på Gem for at bekræfte dine ændringer.

Rediger dit temas JavaScript-fil

Klik på theme.js i mappen Aktiver.
Brug tastaturgenvejen Find til at finde linjen // Create item's data object and add to 'items' array.
Indsæt følgende kode over linjen, der blev fundet i trin 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
  };
}

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug tastaturgenvejen Find til at finde linjen vendor: cartItem.vendor,
Tilføj følgende kode under linjen, der blev fundet i trin 4:

unitPrice: unitPrice,

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug tastaturgenvejen Find til at finde linjen shopifyPaymentButton: '.shopify-payment-button'.
Erstat linjen, der blev fundet i trin 6, med følgende kode:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug tastaturgenvejen Find til at finde linjen _updateSKU: function(evt) {.
Tilføj følgende kode over linjen, der blev fundet i trin 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;
},

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug tastaturgenvejen Find til at finde 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);
}

Tilføj følgende kode under afslutningstagget }, der blev fundet i trin 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'
  );
}

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

(Valgfri) Tilføj oversættelser for andre sprog

Gå til siden Temaer i Shopify-administrator.
Klik på knappen ... > Rediger standardtemaindhold.
Klik på Skift temasprog, og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.
Angiv Unit Price i søgefeltet.
Opdater feltet Separator til stykpris under Generelt/Tilgængelighed.
Opdater feltet Label for stykpris under Produkter/Produkt.
Klik på Gem.

Trin for Supply

Der blev føjet stykpriser til temaet Supply for version 8.3.0 og derover. Hvis du ikke kan opdatere dit tema til den nyeste version, skal du følge disse trin for at anvende tilpasningen af stykpriser på tidligere versioner af Supply.

Tilføj et kodestykke med stykpris for produktet

Find og udvid mappen Kodestykker.
Vælg Tilføj et nyt kodestykke.
Angiv navnet product-unit-price.
Kopiér og indsæt følgende kode i filen, og vælg Gem.

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

Når du har foretaget ændringerne, bør filen product-unit-price.liquid se ud som følger:

Den opdaterede version af filen product-unit-price.liquid

Klik på Gem for at bekræfte dine ændringer.

Rediger din skabelon for udvalgte produkter

Find og udvid mappen Afsnit, og vælg derefter featured-product.liquid.
Brug tastaturgenvejen Findtil at finde linjen {% include 'price' with price %} i filen:

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

Indsæt følgende kode under kodestykkets afsluttende </span> fra trin 2:

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

Når du har foretaget ændringerne, bør filen featured-product.liquid se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger din produktskabelon

Find og udvid mappen Afsnit, og vælg derefter product-template.liquid.
Brug tastaturgenvejen Findtil at finde linjen {% include 'price' with variant.price %} i filen:

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

Tilføj følgende kode under afslutningstagget </span> fra trin 2:

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

Når du har foretaget ændringerne, bør filen product-template.liquid se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger kodestykket for dit produktgitter

Find og udvid mappen Kodestykker, og vælg derefter filen product-grid-item.liquid.
Brug tastaturgenvejen Findtil at finde 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>

Erstat koden med følgende kodestykke:

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

Når du har foretaget ændringerne, bør filen product-grid-item.liquid se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger kodestykket for produktlisteelement

Find og udvid mappen Kodestykker, og vælg derefter filen product-list-item.liquid.
Brug tastaturgenvejen Find til at finde den linje, <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>

Erstat koden med følgende kodestykke:

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

Når du har foretaget ændringerne, bør filen product-list-item.liquid se ud som følger:

Den opdaterede version af filen product-list-item.liquid

Klik på Gem for at bekræfte dine ændringer.

Rediger dit kodestykke for søgeresultatgitteret

Find og udvid mappen Kodestykker, og vælg derefter filen search-result-grid.liquid.
Brug tastaturgenvejen Findtil at finde 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>

Erstat koden med følgende kodestykke:

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

Når du har foretaget ændringerne, bør filen search-result-grid.liquid se ud som følger:

Den opdaterede version af filen search-result-grid.liquid

Klik på Gem for at bekræfte dine ændringer.

Rediger din indkøbskurvsskabelon

Find og udvid mappen skabeloner, og vælg derefter filen cart.liquid.
Brug tastaturgenvejen Find til at finde den linje, <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 -%}

Erstat koden med følgende kodestykke:

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

Når du har foretaget ændringerne, bør filen cart.liquid se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger din ordreskabelon

Find og udvid mappen skabeloner, og vælg derefter filen customers/order.liquid.
Brug tastaturgenvejen Find til at finde den linje, <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>

Føj følgende kode over afslutningstagget </td> fra trin 2:

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

Når du har foretaget ændringerne, bør filen customers/order.liquid se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger dit temas layout

Find og udvid mappen Layout, og vælg derefter filen theme.liquid.
Brug tastaturgenvejen Find til at finde den linje, der indeholder 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 }}
},

Tilføj følgende kode over only_left:{{ 'products.product.only_left' | t: count: '1' | json }} fra trin 2:

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

Når du har foretaget ændringerne, bør filen theme.liquid se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger dine temastile

Find og udvid mappen Afsnit, og vælg derefter theme.scss.liquid.
Brug tastaturgenvejen Find til at finde den linje, .product-item--price { i filen:

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

Erstat koden med følgende kodestykke:

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

Når du har foretaget ændringerne, bør filen theme.scss.liquid se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger din temakode for JavaScript

Find og udvid mappen Aktiver, og vælg derefter filen theme.js.liquid.
Brug tastaturgenvejen Find til at finde den linje, 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'
}

Indsæt følgende kode over originalSelectorId: 'productSelect-' + sectionId, fra trin 2:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug tastaturgenvejen Find til at finde den linje, 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');
    }

Indsæt følgende kode under if (variant) { fra trin 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');
}

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug tastaturgenvejen Find til at finde den linje, 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>';

Erstat linjen customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; med følgende kodestykke:

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

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug tastaturgenvejen Find til at finde den linje, $(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();
}

Indsæt følgende kode under kodestykket fra trin 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;

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

Rediger dit temas sprogfil

Find og udvid mappen Landestandarder, og vælg derefter filen en.default.json.
Brug tastaturgenvejen Find til at finde den linje, der indeholder "refresh_page", i filen:

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

Indsæt følgende kode over "refresh_page" fra trin 2:

"unit_price_separator": "per",

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Brug tastaturgenvejen Find til at finde den linje, der indeholder "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"
}

Indsæt følgende kode efter "will_be_in_stock_after" fra trin 5:

"unit_price_label": "Unit price",

Når du har foretaget ændringerne, bør resultatet se ud som følger:

Klik på Gem for at bekræfte dine ændringer.

(Valgfri) Tilføj oversættelser for andre sprog

Gå til siden Temaer i Shopify-administrator.
Klik på knappen ... > Rediger standardtemaindhold.
Klik på Skift temasprog, og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.
Søg efter Unit Price i inputbjælken.
Opdater feltet Separator til stykpris under Generelt/Tilgængelighed.
Opdater feltet Label for stykpris under Produkter/Produkt.
Klik på Gem.

Vis stykpriser i dine ordrenotifikationer

Du skal muligvis opdatere din skabelon til ordremeddelelser, hvis du har føjet stykpriser til dit produkt, men dine stykpriser ikke vises i dine meddelelser med ordrebekræftelse.

Fremgangsmåde:

Gå til Indstillinger > Meddelelser i din Shopify-administrator.
Klik på Ordrebekræftelse.
Føj følgende kodestykke til skabelonen:

{%- if line_item.unit_price_measurement -%}
  {{ line_item.unit_price | money }}
  {%- if line_item.unit_price_measurement.reference_value != 1 -%}
    {{- line_item.unit_price_measurement.reference_value -}}
  {%- endif -%}
  {{ line_item.unit_price_measurement.reference_unit }}
{%- endif -%}

Klik på Gem.

Visning af stykpriser

På denne side

Føj stykpriser til dit produkt

Vis stykpriser i din webshop

Trin for Debut

Rediger dit produktpriskodestykke

Rediger din side med indkøbskurven

Rediger din kollektionsside

Rediger dit produktkortgitter

Rediger din produktkortliste

Rediger din ordreside

Rediger dine temastile

Rediger din JavaScript-temakode

Rediger dine engelske oversættelser

Rediger dit temas layout

(Valgfri) Tilføj oversættelser for andre sprog

Trin til Brooklyn

Tilføj et kodestykke for produktpris

Rediger din side med udvalgt produkt

Rediger din produktside

Rediger din Ajax-indkøbskurv

Rediger produktgitterelementet

Rediger din side med indkøbskurven

Rediger din ordreside

Rediger dine temastile – del 1

Rediger dine temastile – del 2

Rediger din temakode for JavaScript

Rediger dine engelske oversættelser

(Valgfri) Tilføj oversættelser for andre sprog

Trin for Minimal

Opdater dine kodestykker

Opdater dine typografier

Opdater dine skabeloner

Opdater dit JavaScript

Opdater din indkøbskurvsskabelon

Opdater dit udvalgte produkt

Opdater din produktskabelon

Opdater landestandarderne

(Valgfri) Tilføj oversættelser for andre sprog

Trin for Venture

Rediger dit temas sprogfil

Rediger dit temas typografiark

Tilføj et kodestykke med stykpris for produktet

Rediger kodestykket for dit produktkort

Rediger skabelonen for din side med indkøbskurv

Rediger din skabelon for siden med udvalgte produkter

Rediger din produktsideskabelon

Rediger ordreskabelonen for dine kunder

Rediger dit temas JavaScript-fil

(Valgfri) Tilføj oversættelser for andre sprog

Trin for Supply

Tilføj et kodestykke med stykpris for produktet

Rediger din skabelon for udvalgte produkter

Rediger din produktskabelon

Rediger kodestykket for dit produktgitter

Rediger kodestykket for produktlisteelement

Rediger dit kodestykke for søgeresultatgitteret

Rediger din indkøbskurvsskabelon

Rediger din ordreskabelon

Rediger dit temas layout

Rediger dine temastile

Rediger din temakode for JavaScript

Rediger dit temas sprogfil

(Valgfri) Tilføj oversættelser for andre sprog

Vis stykpriser i dine ordrenotifikationer

Fremgangsmåde:

Er du klar til at begynde at sælge med Shopify?