Visning af pris pr. styk

Bemærk: Pris pr. stk. er kun tilgængelig for shopejere i Tyskland og Frankrig.

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

Føj pris pr. styk til dit produkt

Vis pris pr. styk 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 Minimal

Enhedspriser 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 enhedsprispriser 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:

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

  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:

Den opdaterede version af filen search-result.liquid

  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:

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

  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:

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

  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:

Den opdaterede version af filen order.liquid

  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:

Den opdaterede version af theme.js-filen

  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:

Den opdaterede version af theme.js-filen

  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:

Den opdaterede version af theme.js-filen

  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:

Den opdaterede version af cart-template.liquid-filen

  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:

Den opdaterede version af featured-product.liquid-filen

  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:

Den opdaterede version af product-template.liquid-filen

  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:

Den opdaterede version af en.default.json-filen

  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:

Den opdaterede version af en.default.json-filen

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

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

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

  2. Klik på Handling > Rediger sprog.

  3. Klik på Skift temasprog, og vælg derefter sproget, du vil redigere (dette er kun muligt for dine udgivne temaer).

Knap til at skifte sprog

  1. Angiv Unit Price i søgefeltet.

  2. Opdater feltet Separator til pris pr. styk under Generelt/Tilgængelighed.

  3. Opdater feltet Label for pris pr. styk under Produkter/Produkt.

Opdaterede felter

Trin for Venture

Der blev føjet enhedspriser 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 enhedspriser 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:

Den opdaterede version af en.default.json-filen

  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:

Den opdaterede version af en.default.json-filen

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

Den opdaterede version af theme.scss.liquid-filen

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

Tilføj et kodestykke for pris pr. styk 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:

Den opdaterede version af product-card.liquid-filen

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

Den opdaterede version af product-card.liquid-filen

  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:

Den opdaterede version af cart-template.liquid-filen

  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:

Den opdaterede version af cart-template.liquid-filen

  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:

Den opdaterede version af featured-product.liquid-filen

  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:

Opdateret version af featured-product.liquid-filen

  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:

Opdateret version af product-template.liquid-filen

  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:

Opdateret version af product-template.liquid-filen

  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:

Opdateret version af customers/order.liquid-filen

  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:

Opdateret version af theme.js-filen

  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:

Opdateret version af theme.js-filen

  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:

Opdateret version af theme.js-filen

  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:

Opdateret version af theme.js-filen

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

Opdateret version af theme.js-filen

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

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

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

  2. Klik på Handling > Rediger sprog.

  3. Klik på Skift temasprog, og vælg derefter sproget, du vil redigere (dette er kun muligt for dine udgivne temaer).

Valg af temasprog

  1. Angiv Unit Price i søgefeltet.

  2. Opdater feltet Separator til pris pr. styk under Generelt/Tilgængelighed.

  3. Opdater feltet Label for pris pr. styk under Produkter/Produkt.

Opdaterede oversættelser af pris pr. stk.

Trin for Supply

Der blev føjet enhedspriser 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 enhedspriser på tidligere versioner af Supply.

Tilføj et kodestykke for pris pr. styk 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:

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

  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 Find til 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:

Den opdaterede version af featured-product.liquid-filen

  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 Find til 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:

Den opdaterede version af product-template.liquid-filen

  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 Find til 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:

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

  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:

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

  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 Find til 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:

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

  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:

Den opdaterede version af cart.liquid-filen

  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:

Den opdaterede version af customers/order.liquid-filen

  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:

Den opdaterede version af theme.liquid-filen

  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:

Den opdaterede version af theme.scss.liquid-filen

  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:

Den opdaterede version af theme.js.liquid-filen

  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:

Den opdaterede version af theme.js.liquid-filen

  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:

Den opdaterede version af theme.js.liquid-filen

  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:

Den opdaterede version af theme.js.liquid-filen

  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:

Den opdaterede version af en.default.json-filen

  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:

Den opdaterede version af en.default.json-filen

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

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

  1. Gå til siden med temaer

  2. Vælg Handling > Rediger sprog

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

Valgfrit trin 3

  1. Søg efter "enhedspris" i inputbjælken

  2. Opdater feltet Separator til pris pr. styk under Generelt/Tilgængelighed

  3. Opdater feltet Label for pris pr styk under Produkter/Produkt

Valgfrit trin 6

Vis pris pr. stk. i dine ordrenotifikationer

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

Fremgangsmåde:

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

  2. Klik på Ordrebekræftelse.

  3. 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 -%}
  1. Klik på Gem.

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

Prøv det gratis