Visning af stykpriser

Bemærk

Denne vejledning er kun relevant for shopejere, der sælger i Frankrig. Hvis du sælger dine produkter i Frankrig, men selve din virksomhed ikke er baseret i Frankrig, skal du kontakte Shopify Support for at få denne funktion aktiveret.

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.

Føj stykpriser til dit produkt

Desktop

1. Gå til Produkter i din Shopify-administrator.

2. Klik på det produkt, du vil redigere.

3. Valgfrit: Hvis dit produkt har varianter, skal du klikke på den variant, du vil redigere, i afsnittet Varianter.

4. Vælg Vis stykpris for dette produkt i afsnittet Priser.

5. Angiv dit produkts samlede mål i feltet Samlet produktmål, og vælg derefter måleenheden.

6. Valgfrit: Tilføj dit basismål i feltet Basismål, og vælg derefter måleenheden. Hvis et produkt f.eks. vejer 1 kg, kan du vælge en basisenhed på 100 g.

7. Klik på Gem.

iPhone

1. I Shopify-appen skal du gå til Produkter > Alle produkter.
2. Tryk på det produkt, du vil redigere.
3. Tryk på området med produktpris.
4. Vælg Vis stykpris.
5. Angiv dit produkts samlede mål i feltet Samlet produktmål, og vælg derefter måleenheden.
6. Valgfrit: Tilføj dit basismål i feltet Basismål, og vælg derefter måleenheden. Hvis et produkt f.eks. vejer 1 kg, kan du vælge en basisenhed på 100 g.
7. Tryk på Gem.

Android

1. I Shopify-appen skal du gå til Produkter > Alle produkter.
2. Tryk på det produkt, du vil redigere.
3. Tryk på området med produktpris.
4. Vælg Vis stykpris.
5. Angiv dit produkts samlede mål i feltet Samlet produktmål, og vælg derefter måleenheden.
6. Valgfrit: Tilføj dit basismål i feltet Basismål, og vælg derefter måleenheden. Hvis et produkt f.eks. vejer 1 kg, kan du vælge en basisenhed på 100 g.
7. Tryk på ✓.

Vis stykpriser i din webshop

Stykprisfunktionen er allerede tilgængelig i alle Online Store 2.0-temaer. Du skal ikke gøre noget for at vise stykpriser i din webshop.

Hvis du har et vintagetema og ikke kan opdatere det til en version, der understøtter stykprisfunktionen, kan du tilpasse din temakode manuelt, så den viser stykprisen.

Vis stykpriser for et vintagetema

Advarsel

Sikkerhedskopiér dit tema, før du begynder at redigere koden. Følgende vejledninger er avancerede. Hvis du har brug for hjælp med at føje funktionen til dit tema, kan du overveje at få hjælp med tilpasninger.

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

Debut

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

1. Klik på filen product-price.liquid i mappen Kodestykker.

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

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

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

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

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

Rediger din side med indkøbskurven

1. Klik på filen cart-template.liquid i mappen Afsnit.

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

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

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

Rediger din kollektionsside

1. Klik på filen collection.liquid i mappen Afsnit.

2. Brug find tastaturgenvejen til at finde følgende kode ved at søge efter grid-view-item__title:

{% include 'product-price' %}

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

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

Rediger dit produktkortgitter

1. Klik på filen product-card-grid.liquid i mappen Kodestykker.

2. Brug find tastaturgenvejen til at finde følgende kode ved at søge efter grid-view-item__title:

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

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

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

Rediger din produktkortliste

1. Klik på filen product-card-list.liquid i mappen Kodestykker.

2. Brug tastaturgenvejen Find til at finde følgende kode ved at søge efter {% if product.available %}:

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

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

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

Rediger din ordreside

1. Klik på filen customers/order.liquid i mappen Skabeloner.

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

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

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

Rediger dine temastile

1. Klik på filen theme.scss.liquid i mappen Aktiver.

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

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

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

Rediger din JavaScript-temakode

1. Klik på filen theme.js i mappen Aktiver.

2. Brug tastaturgenvejen Find til at finde følgende kode:

salePrice: '[data-sale-price]'

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

1. Brug tastaturgenvejen Find til at finde følgende kode:

productOnSale: 'price--on-sale',

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

1. Brug tastaturgenvejen Find til at finde følgende kode:

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

1. Erstat koden med følgende kodestykke:

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

1. Brug tastaturgenvejen Find til at finde følgende kode:

var salePrice = '';

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

1. Brug tastaturgenvejen Find til at finde følgende kode:

.replace('[$]', salePrice)

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

1. Brug tastaturgenvejen Find til at finde følgende kode:

_updatePrice: function(evt) {

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

1. Brug tastaturgenvejen Find til at finde følgende kode:

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

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

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

1. Brug tastaturgenvejen Find til at finde følgende kode:

.removeClass(this.classes.productOnSale)

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

.removeClass(this.classes.productUnitAvailable)

1. Brug tastaturgenvejen Find til at finde følgende kode:

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

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

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

Rediger dine engelske oversættelser

1. Klik på filen en.default.json i mappen Landekoder.

2. Brug tastaturgenvejen Find til at finde følgende kode:

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

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

1. Brug tastaturgenvejen Find til at finde følgende kode:

"include_taxes": "Tax included.",

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

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

Rediger dit temas layout

1. I mappen Layout skal du klikke på filen theme.liquid.

2. Brug tastaturgenvejen Find til at finde følgende kode:

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

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

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

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

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

2. Klik på knappen ... > Rediger standardtemaindhold.

3. Klik på Skift temasprog, og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.

4. Angiv Unit Price i søgefeltet.

5. Opdater feltet Separator til stykpris under Generelt/Tilgængelighed.

6. Opdater feltet Label for stykpris under Produkter/Produkt.

7. Klik på Gem.

Brooklyn

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

1. Klik på Opret et nyt kodestykke i mappen Kodestykker.

2. Angiv product-price i feltet navn.

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

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

Rediger din side med udvalgt produkt

1. Klik på filen featured-product.liquid i mappen Afsnit.

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

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

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

Rediger din produktside

1. Klik på filen product-template.liquid i mappen Afsnit.

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

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

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

Rediger din Ajax-indkøbskurv

1. Klik på filen ajax-cart-template.liquid i mappen Kodestykker.

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

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

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

Rediger produktgitterelementet

1. Klik på filen product-grid-template.liquid i mappen Kodestykker.

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

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

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

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

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

Rediger din side med indkøbskurven

1. Klik på filen cart.liquid i mappen Skabeloner.

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

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

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

Rediger din ordreside

1. Klik på filen customers/order.liquid i mappen Skabeloner.

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

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

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

Rediger dine temastile – del 1

1. Klik på filen theme.scss.liquid i mappen Aktiver.

2. Brug find tastaturgenvejen til at finde følgende kode ved at søge efter .ajaxcart__price {:

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

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

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

Rediger dine temastile – del 2

1. Klik på filen timber.scss.liquid i mappen Aktiver.

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

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

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

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

Rediger din temakode for JavaScript

1. Klik på filen theme.js.liquid i mappen Aktiver.

2. Brug find tastaturgenvejen til at finde følgende kode:

var prodImg;

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

1. Brug find tastaturgenvejen til at finde følgende kode:

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

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

1. Brug find tastaturgenvejen til at finde følgende kode:

vendor: cartItem.vendor

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

1. Brug find tastaturgenvejen til at finde følgende kode:

productPrice: '#ProductPrice',

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

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

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

1. Brug find tastaturgenvejen til at finde følgende kode:

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

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

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

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

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

Rediger dine engelske oversættelser

1. Klik på filen en.default.json i mappen Landekoder.

2. Brug find tastaturgenvejen til at finde følgende kode:

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

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

1. Brug find tastaturgenvejen til at finde følgende kode:

"include_taxes": "Tax included.",

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

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

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

1. Gå til siden Temaer i Shopify Admin.

2. Klik på knappen ... > Rediger standardtemaindhold

3. Klik på Skift temasprog, og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.

4. Angiv Unit Price i søgefeltet.

5. Opdater feltet Separator til stykpris under Generelt/Tilgængelighed.

6. Opdater feltet Label for stykpris under Produkter/Generelt.

7. Klik på Gem.

Minimal

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

1. Find og udvid mappen Kodestykker.

2. Vælg Tilføj et nyt kodestykke.

3. Angiv navnet product-unit-price.

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

1. Klik på Gem.

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

3. Erstat denne linje:

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

Med denne linje:

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

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

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

2. Find og rediger filen search-result.liquid

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

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

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

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

Opdater dine typografier

1. Find og udvid mappen Aktiver.

2. Rediger filen theme.scss.liquid.

3. Brug tastaturgenvejen Find til at finde denne kodeblok:

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

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

font-family: $headerFontStack;

1. Brug tastaturgenvejen Find til at finde følgende kodestykke:

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

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

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

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

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

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

1. Brug tastaturgenvejen Find til at finde følgende kodestykke:

.cart__product-title {
  display: inline-block;

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

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

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

3. Brug tastaturgenvejen Find til at finde denne kode:

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

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

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

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

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

Opdater dine skabeloner

1. Find og udvid mappen Skabeloner.

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

3. Brug tastaturgenvejen Find til at finde koden:

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

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

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

Opdater dit JavaScript

1. Find og rediger theme.js i Aktiver.

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

1. Led efter denne kode:

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

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

1. Brug tastaturgenvejen Find til at finde denne kode:

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

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

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

Opdater din indkøbskurvsskabelon

1. Find og udvid mappen Afsnit.

2. Rediger filen cart-template.liquid.

3. Brug genvejstasten Find til at finde koden <span class="order-discount h5">{{ item.final_price | money }}</span>.

4. Erstat linjen med denne kode:

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

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

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

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

Opdater dit udvalgte produkt

1. Find og udvid mappen Afsnit.

2. Rediger filen featured-product.liquid.

3. Brug tastaturgenvejen Find til at finde linjen med itemprop="name", og erstat den med:

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

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

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

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

Opdater din produktskabelon

1. Find og udvid mappen Afsnit.

2. Rediger filen product-template.liquid.

3. Brug tastaturgenvejen Find til at finde linjen med itemprop="name", og erstat den med:

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

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

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

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

Opdater landestandarderne

1. Find og Udvid mappen Landestandarder.

2. Åbn og rediger filen en.default.json.

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

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

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

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

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

2. Klik på knappen ... > Rediger standardtemaindhold.

3. Klik på Skift temasprog, og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.

4. Angiv Unit Price i søgefeltet.

5. Opdater feltet Separator til stykpris under Generelt/Tilgængelighed.

6. Opdater feltet Label for stykpris under Produkter/Produkt.

7. Klik på Gem.

Venture

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

1. I mappen Landestandarder skal du klikke på en.default.json.

2. Brug tastaturgenvejen Find til at finde den linje, der indeholder refresh_page:

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

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

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

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

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

Rediger dit temas typografiark

1. Klik på theme.scss.liquid i mappen Aktiver.

2. Brug tastaturgenvejen Find til at finde linjen .product-single__policies {:

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

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:

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

Tilføj et kodestykke med stykpris for produktet

1. Klik på Opret et nyt kodestykke i mappen Kodestykker.

2. Angiv navnet product-unit-price.

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

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

Rediger kodestykket for dit produktkort

1. Klik på product-card.liquid i mappen Kodestykker.

2. Brug tastaturgenvejen Find til at finde linjen <a href="{{ product.url | within: collection }}".

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

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

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

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

Rediger skabelonen for din side med indkøbskurv

1. Klik på cart-template.liquid i mappen Afsnit.

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

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

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

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

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

Rediger din skabelon for siden med udvalgte produkter

1. Klik på featured-product.liquid i mappen Afsnit.

2. Brug tastaturgenvejen Find til at finde linjen {% assign current_variant = product.selected_or_first_available_variant %}.

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

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

1. Find koden {% if section.settings.stock_enable %} under dette ul-tag.

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

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

Rediger din produktsideskabelon

1. Klik på product-template.liquid i mappen Afsnit.

2. Brug tastaturgenvejen Find til at finde linjen {% assign current_variant = product.selected_or_first_available_variant %}.

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

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

1. Find koden {% if section.settings.stock_enable %} under dette ul-tag.

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

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

Rediger ordreskabelonen for dine kunder

1. Klik på customers/order.liquid i mappen Skabeloner.

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

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

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

Rediger dit temas JavaScript-fil

1. Klik på theme.js i mappen Aktiver.

2. Brug tastaturgenvejen Find til at finde linjen // Create item's data object and add to 'items' array.

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

1. Brug tastaturgenvejen Find til at finde linjen vendor: cartItem.vendor,

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

1. Brug tastaturgenvejen Find til at finde linjen shopifyPaymentButton: '.shopify-payment-button'.

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

1. Brug tastaturgenvejen Find til at finde linjen _updateSKU: function(evt) {.

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

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

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

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

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

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

2. Klik på knappen ... > Rediger standardtemaindhold.

3. Klik på Skift temasprog, og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.

4. Angiv Unit Price i søgefeltet.

5. Opdater feltet Separator til stykpris under Generelt/Tilgængelighed.

6. Opdater feltet Label for stykpris under Produkter/Produkt.

7. Klik på Gem.

Supply

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

1. Find og udvid mappen Kodestykker.

2. Vælg Tilføj et nyt kodestykke.

3. Angiv navnet product-unit-price.

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

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

Rediger din skabelon for udvalgte produkter

1. Find og udvid mappen Afsnit, og vælg derefter featured-product.liquid.

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

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

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

Rediger din produktskabelon

1. Find og udvid mappen Afsnit, og vælg derefter product-template.liquid.

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

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

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

Rediger kodestykket for dit produktgitter

1. Find og udvid mappen Kodestykker, og vælg derefter filen product-grid-item.liquid.

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

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

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

Rediger kodestykket for produktlisteelement

1. Find og udvid mappen Kodestykker, og vælg derefter filen product-list-item.liquid.

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

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

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

Rediger dit kodestykke for søgeresultatgitteret

1. Find og udvid mappen Kodestykker, og vælg derefter filen search-result-grid.liquid.

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

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

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

Rediger din indkøbskurvsskabelon

1. Find og udvid mappen skabeloner, og vælg derefter filen cart.liquid.

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

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

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

Rediger din ordreskabelon

1. Find og udvid mappen skabeloner, og vælg derefter filen customers/order.liquid.

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

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

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

Rediger dit temas layout

1. Find og udvid mappen Layout, og vælg derefter filen theme.liquid.

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

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

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

Rediger dine temastile

1. Find og udvid mappen Afsnit, og vælg derefter theme.scss.liquid.

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

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

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

Rediger din temakode for JavaScript

1. Find og udvid mappen Aktiver, og vælg derefter filen theme.js.liquid.

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

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

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

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

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

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

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

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

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

Rediger dit temas sprogfil

1. Find og udvid mappen Landestandarder, og vælg derefter filen en.default.json.

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

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

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

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

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

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

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

2. Klik på knappen ... > Rediger standardtemaindhold.

3. Klik på Skift temasprog, og vælg derefter det sprog, du vil redigere. Dette er kun muligt på dit udgivne tema.

4. Søg efter Unit Price i inputbjælken.

5. Opdater feltet Separator til stykpris under Generelt/Tilgængelighed.

6. Opdater feltet Label for stykpris under Produkter/Produkt.

7. Klik på Gem.

Vis stykpriser i dine ordrenotifikationer

Som standard viser meddelelsen med ordrebekræftelse stykpriser, når funktionen er aktiv.

Hvis du har føjet stykpriser til dit produkt, men dine stykpriser ikke vises i meddelelserne for dine ordrebekræftelser, skal du muligvis opdatere din skabelon manuelt.

Trin:

1. Gå til Indstillinger > Meddelelser i Shopify-administrator.

2. Klik på Ordrebekræftelse i afsnittet Ordrer.

3. Klik på Rediger kode.

4. Føj følgende kodestykke til skabelonen i klasse "order-list__item-price":

{%- 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. Klik på Gem.

Tip

Afgiv en testordre i din butik for at bekræfte, om ordrenotifikationen viser stykprisen.