Vise enhetspriser

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

Legg til enhetspris til produktet ditt

Vis enhetspriser i nettbutikken

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

Steg for Minimal

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

Oppdatere kodebitene

  1. Finn og utvid Utdrag-mappen.

  2. Velg Legg til en ny kodebit.

  3. Angi navnet product-unit-price.

  4. Kopier og lim inn følgende kode i product-unit-price.liquid.

{%- unless available -%}
    {%- if variant.title -%}
      {%- assign available = variant.available -%}
    {%- else -%}
      {%- assign available = true -%}
    {%- endif -%}
  {%- endunless -%}
  <span class="product-unit-price{% unless available and variant.unit_price_measurement %} hide{% endunless %}{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}" data-unit-price-container>
    {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if available and variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
    <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
  </span>
  1. Klikk på Lagre.

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

  3. Erstatt denne linjen:

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

Med denne linjen:

{%- assign price = featured.price | money -%}
  1. Bruk finn-hurtigtasten til å finne {{ price }} og legg til denne koden nedenfor:
{%- assign variant = featured.selected_or_first_available_variant -%}
  {%- if variant.available and variant.unit_price_measurement -%}
    {% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
  {%- endif -%}

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

Den oppdaterte versjonen av product-grid-item.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

  2. Finn og rediger filen search-result.liquid

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

{%- assign variant = item.selected_or_first_available_variant -%}
  1. Nå bruker du finn-hurtigtasten til å finne følgende to kodebiter:
<s><small>{{ item.compare_at_price_max | money }}</small></s>

Og

<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  <span itemprop="price">
    {{ item.price | money }}
  </span>
  1. Legg til følgende kodeblokk under hver av de to kodebitene som er oppført i forrige trinn:
{%- if variant.available and variant.unit_price_measurement -%}
    {% include 'product-unit-price', variant: variant %}
  {%- endif -%}

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

Den oppdaterte versjonen av search-result.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Oppdater stilene dine

  1. Finn og utvid mappen Ressurser.

  2. Rediger filen theme.scss.liquid.

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

.grid-link__title,
  .grid-link__meta {
    position: relative;
    margin-bottom: 5px;
  1. Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:
font-family: $headerFontStack;
  1. Bruk finn-hurtigtasten til å finne følgende kodebit:
.grid-link__sale_price {
    opacity: 0.95;
    filter: alpha(opacity=95);
  }
  1. Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:
.grid-link__unit-price {
    font-size: 1em;
  }
  1. Bruk finn-hurtigtasten til å finne følgende kodebit:
.order-discount--list {
    margin: 0.8em 0 0.6em 1.3em;
    list-style: none;
    padding: 0;
  }
  1. Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:
.order-discount--price {
    margin-bottom: 0;
  }
  1. Bruk finn-hurtigtasten til å finne følgende kodebit:
.cart__product-title {
    display: inline-block;
  1. Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:
font-weight: $bodyFontWeightBold;

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

Den oppdaterte versjonen av theme.scss.liquid-filen – del 1
Den oppdaterte versjonen av theme.scss.liquid-filen – del 2
Den oppdaterte versjonen av theme.scss.liquid-filen – del 3

  1. Klikk på Lagre for å bekrefte endringene.

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

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

.quantity-selector {
      display: inline-block;
    }
  }
  1. Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:
.product-single__title {
    font-weight: $bodyFontWeightBold;
  }
  1. Sett inn denne koden på slutten av filen:
.product-unit-price {
    color: rgba($colorTextBody, 0.6);
    display: block;
    font-family: $headerFontStack;
    font-size: em(12px);
  }

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

Den oppdaterte versjonen av timber.scss.liquid-filen – del 1
Den oppdaterte versjonen av timber.scss.liquid-filen – del 2

  1. Klikk på Lagre for å bekrefte endringene.

Oppdatere malene dine

  1. Finn og utvid Maler-mappen.

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

  3. Bruk finn-hurtigtasten til å finne koden:

{%- else -%}
    {{ line_item.original_price | money }}
  {%- endif -%}
  1. Legg til denne koden under koden fra trinn 3:
{%- if line_item.unit_price_measurement -%}
    {% include 'product-unit-price', variant: line_item, available: true %}
  {%- endif -%}

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

Den oppdaterte versjonen av order.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Oppdatere JavaScript

  1. Finn og rediger theme.js i Ressurser.

  2. Bruk finn-hurtigtasten til å finne linjen som inneholder .shopify-payment-button og erstatt den med:

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

Den delen av koden skal se slik ut:

Den oppdaterte versjonen av theme.js-filen

  1. Se etter denne koden:
else {
    this.selectors.$comparePrice.addClass('hide').html('');
    this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
  }
  1. Legg til denne koden under den:
// Unit price
  this.selectors.$unitPriceContainer.addClass('hide');

  if (variant.unit_price) {
    this.selectors.$unitPrice.html(
        Shopify.formatMoney(variant.unit_price, theme.moneyFormat)
    );
    this.selectors.$unitPriceBaseUnit.html(this.getBaseUnit(variant));
    this.selectors.$unitPriceContainer.removeClass('hide');
  }

Resultatet skal se slik ut:

Den oppdaterte versjonen av theme.js-filen

  1. Bruk finn-hurtigtasten til å finne denne koden:
.attr('data-zoom')
    });
  });
  1. Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:
getBaseUnit: function(variant) {
    return variant.unit_price_measurement.reference_value === 1
      ? variant.unit_price_measurement.reference_unit
      : variant.unit_price_measurement.reference_value +
          variant.unit_price_measurement.reference_unit;

Resultatet skal se slik ut:

Den oppdaterte versjonen av theme.js-filen

  1. Klikk på Lagre for å bekrefte endringene.

Oppdatere handlekurvmalen

  1. Finn og utvid Deler-mappen.

  2. Rediger filen cart-template.liquid.

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

  4. Erstatt linjen med denne koden:

<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>
  1. Finn den første forekomsten av koden {%- if item.line_level_discount_allocations != blank -%}:
{%- if item.line_level_discount_allocations != blank -%}
    <ul class="order-discount order-discount--list order-discount--title order-discount--cart medium-down--hide" aria-label="{{ 'customer.order.discount' | t }}">
      {%- for discount_allocation in item.line_level_discount_allocations -%}
        <li class="order-discount__item">
          <span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
        </li>
      {%- endfor -%}
    </ul>
  {%- endif -%}
  1. Legg til denne koden over koden fra trinn 5:
{%- if item.variant.available and item.variant.unit_price_measurement -%}
    {% include 'product-unit-price', variant: item, available: item.variant.available %}
  {%- endif -%}

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

Den oppdaterte versjonen av cart-template.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Oppdatere det utvalgte produktet ditt

  1. Finn og utvid Deler-mappen.

  2. Rediger filen featured-product.liquid.

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

<h1 class="product-single__title" itemprop="name">{{ title }}</h1>
  1. Finn koden som inneholder id="PriceA11y":
{% if compare_at_price > price %}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <s id="ComparePrice" class="product-single__sale-price">
      { compare_at_price | money }}
    </s>
  {% endif %}
  1. Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:
{% include 'product-unit-price', variant: variant, available: true %}

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

Den oppdaterte versjonen av featured-product.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Oppdatere produktmalen

  1. Finn og utvid Deler-mappen.

  2. Rediger filen product-template.liquid.

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

<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
  1. Bruk finn-hurtigtasten til å finne koden:
{% else %}
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
      <s id="ComparePrice" class="product-single__sale-price hide">
        {{ product.compare_at_price_max | money }}
      </s>
  {% endif %}
  1. Legg til denne linjen nedenfor:
{% include 'product-unit-price', variant: variant, available: true %}

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

Den oppdaterte versjonen av product-template.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Oppdatere lokalene

  1. Finn og utvid Lokaler-mappen.

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

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

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

Resultatet skal se slik ut:

Den oppdaterte versjonen av en.default.json-filen

  1. Finn linjen som inneholder full_details og erstatt den med:
"full_details": "Full details",
  "unit_price_label": "Unit price"

Resultatet skal se slik ut:

Den oppdaterte versjonen av en.default.json-filen

  1. Klikk på Lagre for å bekrefte endringene.

(Valgfritt) Legg til oversettelser for andre språk

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

  2. Klikk på Handlinger > Rediger språk.

  3. Klikk på Endre temaspråk og velg språket du vil redigere (dette er bare mulig på det publiserte temaet).

Endre språk-knapp

  1. Angi Unit Price i søkefeltet.

  2. Oppdater feltet Enhetsskiller under Generelt / Tilgjengelighet.

  3. Oppdater feltet Enhetsprisetikett under Produkter / Produkt.

Oppdaterte felter

Steg for Venture

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

Rediger temaets språkfil

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

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

"refresh_page": "choosing a selection results in a full page refresh"
  1. Legg til følgende kode over linjen du fant i trinn 2:
"unit_price_separator": "per",

Etter redigeringene dine skal resultatet se slik ut:

Den oppdaterte versjonen av en.default.json-filen

  1. Bruk finn-hurtigtasten til å finne linjen som inneholder stock_unavailable:
"stock_unavailable": "The item could not be added to your cart because there are not enough in stock."
  1. Legg til følgende kode over linjen du fant i trinn 4:
"unit_price_label": "Unit price",

Etter redigeringene dine skal resultatet se slik ut:

Den oppdaterte versjonen av en.default.json-filen

  1. Klikk på Lagre for å bekrefte endringene.

Rediger temaets stilark

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

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

.product-single__policies {
      font-size: em($font-size-base - 1);
    }
  1. Legg til følgende kode under den avsluttende }-taggen i kodeblokken du fant i trinn 2:
.product-unit-price {
      font-size: em(12);
      color: $color-body-text;
    }

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

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

Den oppdaterte versjonen av theme.scss.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Legg til en kodebit for produktenhetspris

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

  2. Angi navnet product-unit-price.

  3. Legg til følgende kode i product-unit-price.liquid:

<span class="product-unit-price{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}{% unless product_variant.unit_price_measurement %} hide{% endunless %}" data-unit-price-container>
    {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if product_variant.unit_price_measurement.reference_value != 1 -%}
          {{- product_variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ product_variant.unit_price_measurement.reference_unit }}
      </span>
    {%- endcapture -%}
    <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
    <span data-unit-price>{{ product_variant.unit_price | money }}</span>
    {{- unit_price_separator -}}{{- unit_price_base_unit -}}
  </span>
  1. Klikk på Lagre for å bekrefte endringene.

Rediger kodesnutten for produktkortet

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

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

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

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

Etter redigeringene dine skal resultatet se slik ut:

Den oppdaterte versjonen av product-card.liquid-filen

  1. Bruk finn-hurtigtasten til å finne linjen <div class="product-card__price">:
<div class="product-card__price">
    {% if product.compare_at_price > product.price %}
      {% comment %}
        Product is on sale
      {% endcomment %}
      {% if product.price_varies %}
        {% assign sale_price = product.price | money_without_trailing_zeros %}
        {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
      {% else %}
        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
        <s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>
        <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
        {{ product.price | money_without_trailing_zeros }}
      {% endif %}
    {% else %}
      {% comment %}
        Not on sale, but could still have varying prices
      {% endcomment %}
      {% if product.price_varies %}
        {% assign price = product.price | money_without_trailing_zeros %}
        {{ 'products.product.from_text_html' | t: price: price }}
      {% else %}
        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
        {{ product.price | money_without_trailing_zeros }}
      {% endif %}
    {% endif %}
  </div>
  1. Legg til følgende kode over den avsluttende </div> -taggen som ble funnet i steg 5:
{%- unless product.price_varies -%}
    {%- if current_variant.unit_price_measurement -%}
      {% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
    {%- endif -%}
  {%- endunless -%}

Etter redigeringene dine skal resultatet se slik ut:

Den oppdaterte versjonen av product-card.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Rediger sidemalen for handlekurven

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

  2. Bruk Finn-tastatursnarveien for å finne den første forekomsten av <td class="cart__cell--total">:

<td class="cart__cell--total">
    {%- if item.original_line_price != item.final_line_price -%}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <del class="cart__item-total">{{ item.original_line_price | money }}</del>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      <span class="cart__item-total">{{ item.final_line_price | money }}</span>
    {%- else -%}
      <span class="cart__item-total">{{ item.original_line_price | money }}</span>
    {%- endif -%}
  1. Legg til følgende kode under endif -taggen som ble funnet i trinn 2:
{%- if item.unit_price_measurement -%}
    {% include 'product-unit-price', product_variant: item %}
  {%- endif -%}

Etter redigeringene dine skal resultatet se slik ut:

Den oppdaterte versjonen av cart-template.liquid-filen

  1. Bruk Finn-tastatursnarveien for å finne den andre forekomsten av <td class="cart__cell--total">:
<td class="cart__cell--total">
    {{#if discountsApplied}}
        <span class="visually-hidden">{% endraw %}{{ 'products.product.regular_price' | t }}{% raw %}</span>
      <del class="cart__item-total">{{{originalLinePrice}}}</del>
      <span class="visually-hidden">{% endraw %}{{ 'products.product.sale_price' | t }}{% raw %}</span>
      <span class="cart__item-total">{{{linePrice}}}</span>
    {{else}}
      <span class="cart__item-total">{{{originalLinePrice}}}</span>
    {{/if}}
    {{#if discountsApplied}}
      <ul class="order-discount order-discount--cart order-discount--list order-discount--title" aria-label="{% endraw %}{{ 'customer.order.discount' | t }}{% raw %}">
        {{#each discounts}}
          <li class="order-discount__item">
            {% endraw %}{%- include 'icon-saletag' -%}{% raw %}{{ this.discount_application.title }} (-{{{ this.formattedAmount }}})
          </li>
        {{/each}}
      </ul>
    {{/if}}
  1. Legg til følgende kode under den andre avsluttende {{/if}} -taggen som ble funnet i steg 4:
{{#if unitPrice}}
    <span class="visually-hidden">{% endraw %}{{ 'products.product.unit_price_label' | t }}{% raw %}</span>
    <span class="product-unit-price">
      {% endraw %}
        {%- capture unit_price_separator -%}
          <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
      {% raw %}
      <span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
    </span>
  {{/if}}

Etter redigeringene dine skal resultatet se slik ut:

Den oppdaterte versjonen av cart-template.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Redigere den utvalgte produktmalen

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

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

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

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

Etter redigeringene dine skal resultatet se slik ut:

Den oppdaterte versjonen av featured-product.liquid-filen

  1. Bruk finn-hurtigtasten til å finne linjen som inneholder <ul class="product-single__meta-list:
<ul class="product-single__meta-list list--no-bullets list--inline">
    <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
    <div class="product-tag">
      {{ 'products.product.on_sale' | t }}
    </div>
    </li>
    <li>
      {% unless product.compare_at_price_max > product.price %}
        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      {% endunless %}
      <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
        {{ current_variant.price | money }}
      </span>
    </li>
    {% if product.compare_at_price_max > product.price %}
      <li>
        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
        <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
          {{ current_variant.compare_at_price | money }}
        </s>
      </li>
    {% endif %}
    {% if section.settings.stock_enable %}
  1. Under denne ul-taggen finner du koden {% if section.settings.stock_enable %}.

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

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

Etter redigeringene dine skal resultatet se slik ut:

Den oppdaterte versjonen av featured-product.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Rediger produktsidemalen

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

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

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

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

Etter redigeringene dine skal resultatet se slik ut:

Oppdatert versjon av produkt-template.liquid-filen

  1. Bruk finn-hurtigtasten til å finne linjen som inneholder <ul class="product-single__meta-list:
<ul class="product-single__meta-list list--no-bullets list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
    <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
      <div class="product-tag">
        {{ 'products.product.on_sale' | t }}
      </div>
    </li>
    <li>
      {% unless product.compare_at_price_max > product.price %}
        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      {% endunless %}
      <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
        {{ current_variant.price | money }}
      </span>
    </li>
    {% if product.compare_at_price_max > product.price %}
      <li>
        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
        <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
          {{ current_variant.compare_at_price | money }}
        </s>
      </li>
    {% endif %}
    {% if section.settings.stock_enable %}
  1. Under denne ul-taggen finner du koden {% if section.settings.stock_enable %}.

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

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

Etter redigeringene dine skal resultatet se slik ut:

Oppdatert versjon av produkt-template.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Rediger bestillingsmalen for kundene dine

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

  2. Bruk finn-hurtigtasten til å finne koden <td class="text-right" data-label="{{ 'customer.order.price' | t }}">.

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
    {%- if line_item.original_price != line_item.final_price -%}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
        <del>{{ line_item.original_price | money }}</del>
        <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
        <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
      {{ line_item.original_price | money }}
    {%- endif -%}
  </td>
  1. Erstatt koden som ble funnet i steg 2 med følgende kode:
<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
    <div>
      {%- if line_item.original_price != line_item.final_price -%}
        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
        <del>{{ line_item.original_price | money }}</del>
        <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
        <span class="order-discount">{{ line_item.final_price | money }}</span>
      {%- else -%}
        {{ line_item.original_price | money }}
      {%- endif -%}
    </div>
    {%- if line_item.unit_price_measurement -%}
      {% include 'product-unit-price', product_variant: line_item %}
    {%- endif -%}
  </td>

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

Oppdatert versjon av customers/order.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Rediger temaets JavaScript-fil

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

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

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

var unitPrice = null;
if (cartItem.unit_price_measurement) {
  unitPrice = {
    addRefererenceValue:
      cartItem.unit_price_measurement.reference_value !== 1,
    price: theme.Currency.formatMoney(
      cartItem.unit_price,
      theme.moneyFormat
    ),
    reference_value: cartItem.unit_price_measurement.reference_value,
    reference_unit: cartItem.unit_price_measurement.reference_unit
  };
}

Etter redigeringene dine skal resultatet se slik ut:

Oppdatert versjon av theme.js-filen

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

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

unitPrice: unitPrice,

Etter redigeringene dine skal resultatet se slik ut:

Oppdatert versjon av theme.js-filen

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

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

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

Etter redigeringene dine skal resultatet se slik ut:

Oppdatert versjon av theme.js-filen

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

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

_getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
      variant.unit_price_measurement.reference_unit;
},

Etter redigeringene dine skal resultatet se slik ut:

Oppdatert versjon av theme.js-filen

  1. Bruk finn-hurtigtasten til å finne linjen this._updateIncomingInfo(variant);:
} else {
  // Variant is sold out, disable the submit button
  cache.$addToCart.prop('disabled', true).addClass('btn--sold-out');
  cache.$addToCartText.html(theme.strings.soldOut);
  $(this.selectors.shopifyPaymentButton, this.$container).hide();
  // Update when stock will be available
  this._updateIncomingInfo(variant);
}
  1. Legg til følgende kode under den avsluttende }-taggen som ble funnet i steg 10:
$(this.selectors.unitPriceContainer, this.$container).addClass('hide');

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(
    this.selectors.unitPriceBaseUnit,
    this.$container
  );

  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  $unitPriceBaseUnit.html(this._getBaseUnit(variant));

  $(this.selectors.unitPriceContainer, this.$container).removeClass(
    'hide'
  );
}

Etter redigeringene dine skal resultatet se slik ut:

Oppdatert versjon av theme.js-filen

  1. Klikk på Lagre for å bekrefte endringene.

(Valgfritt) Legg til oversettelser for andre språk

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

  2. Klikk på Handlinger > Rediger språk.

  3. Klikk på Endre temaspråk og velg språket du vil redigere (dette er bare mulig på det publiserte temaet).

Valg av temaspråk

  1. Angi Unit Price i søkefeltet.

  2. Oppdater feltet Enhetsskiller under Generelt / Tilgjengelighet.

  3. Oppdater feltet Enhetsprisetikett under Produkter / Produkt.

Oppdaterte enhetspris-oversettelser

Steg for Supply

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

Legg til en kodebit for produktenhetspris

  1. Finn og utvid Utdrag-mappen.

  2. Velg Legg til en ny kodebit.

  3. Angi navnet product-unit-price.

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

{%- unless available -%}
  {%- if variant.title -%}
      {%- assign available = variant.available -%}
  {%- else -%}
      {%- assign available = true -%}
  {%- endif -%}
  {%- endunless -%}
  <div class="product-price-unit {% if available and variant.unit_price_measurement %} product-price-unit--available{% endif %}" data-unit-price-container>
  <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
  {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
  {%- endcapture -%}
  {%- capture unit_price_base_unit -%}
      <span>
      {%- if available and variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
          {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
      {%- endif -%}
      </span>
  {%- endcapture -%}
  <span data-unit-price>{{ variant.unit_price | money }}</span>
  {{- unit_price_separator -}}
  <span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
  </div>

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

Den oppdaterte versjonen av product-unit-price.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Redigere den utvalgte produktmalen

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

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

<li>
    <span id="productPrice-{{ section.id }}" class="h1">
      {% include 'price' with price %}
    </span>
  </li>
  1. Legg til følgende kode under den avsluttende </span>-koden i kodebiten fra trinn 2:
{% include 'product-unit-price' variant: variant %}

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

Den oppdaterte versjonen av featured-product.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Redigere produktmalen

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

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

<li>
    <span id="productPrice-{{ section.id }}" class="h1">
      {% include 'price' with variant.price %}
    </span>
  </li>
  1. Legg til følgende kode under den avsluttende </span>-koden fra trinn 2:
{% include 'product-unit-price', variant: variant %}

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

Den oppdaterte versjonen av product-template.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Redigere elementkodebiten for produktrutenettet

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

  2. Bruk finn-hurtigtasten til å finne linjen {% if on_sale and section.settings.product_show_saved_amount %} i filen:

{% if on_sale and section.settings.product_show_saved_amount %}
        <span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
          {% assign compare_price = product.compare_at_price %}
          {% assign product_price = product.price %}
          {% include 'price-sale' %}
        </span>
      {% endif %}
    </div>
  1. Erstatt koden med følgende kodebit:
{%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
      {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
    {%- endif -%}
  </div>
    {% if on_sale and section.settings.product_show_saved_amount %}
      <div class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
        {% assign compare_price = product.compare_at_price %}
        {% assign product_price = product.price %}
        {% include 'price-sale' %}
      </div>
    {% endif %}

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

Den oppdaterte versjonen av product-grid-item.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Rediger elementkodebiten for produktlisten

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

  2. Bruk finn-hurtigtasten til å finne linjen <div class="product-item--price text-center"> i filen:

<div class="product-item--price text-center">
    <p class="h1 medium-down--left">
      {% if on_sale %}
        <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
      {% else %}
        <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
      {% endif %}
      {% include 'price' with product.price %}
      {% if on_sale and section.settings.product_show_compare_at_price %}
        <small>
          <s>
            <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
            {% include 'price' with product.compare_at_price %}
          </s>
        </small>
      {% endif %}
    </p>
    {% if on_sale and section.settings.product_show_saved_amount %}
      <span class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
        {% assign compare_price = product.compare_at_price %}
        {% assign product_price = product.price %}
        {% include 'price-sale' %}
      </span>
  1. Erstatt koden med følgende kodebit:
<div class="text-center">
    <div class="product-item--price">
      <p class="h1 medium-down--left">
        {% if on_sale %}
          <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
        {% else %}
          <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
        {% endif %}
        {% include 'price' with product.price %}
        {% if on_sale and section.settings.product_show_compare_at_price %}
          <small>
            <s>
              <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
              {% include 'price' with product.compare_at_price %}
            </s>
          </small>
        {% endif %}
      </p>
      {%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
        {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
      {%- endif -%}
    </div>
    {% if on_sale and section.settings.product_show_saved_amount %}
      <div class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
        {% assign compare_price = product.compare_at_price %}
        {% assign product_price = product.price %}
        {% include 'price-sale' %}
      </div>

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

Den oppdaterte versjonen av product-list-item.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Rediger kodebiten for søkeresultatrutenettet

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

  2. Bruk finn-hurtigtasten til å finne linjen {% if on_sale and section.settings.product_show_saved_amount %} i filen:

{% if on_sale and section.settings.product_show_saved_amount %}
        <span class="sale-tag medium--right">
          {% assign compare_price = item.compare_at_price %}
          {% assign product_price = item.price %}
          {% include 'price-sale' %}
        </span>
      {% endif %}
    </div>
  1. Erstatt koden med følgende kodebit:
{%- if item.first_available_variant.available and item.first_available_variant.unit_price_measurement -%}
        {% include 'product-unit-price', variant: item.first_available_variant %}
      {%- endif -%}
    </div>
    {% if on_sale and section.settings.product_show_saved_amount %}
      <div class="sale-tag medium--right">
        {% assign compare_price = item.compare_at_price %}
        {% assign product_price = item.price %}
        {% include 'price-sale' %}
      </div>
    {% endif %}

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

Den oppdaterte versjonen av search-result-grid.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Redigere handlekurvmalen

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

  2. Bruk finn-hurtigtasten til å finne linjen <del class="cart-original-price order-discount--cart-price"> i filen:

<del class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</del>
    <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    <span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
  {%- else -%}
    <span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
  {%- endif -%}
  1. Erstatt koden med følgende kodebit:
<small><s class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</s></small>
    <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    <span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
  {%- else -%}
    <span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
  {%- endif -%}
  {%- if item.variant.available and item.variant.unit_price_measurement -%}
    {% include 'product-unit-price' variant: item, available: item.variant.available %}
  {%- endif -%}

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

Den oppdaterte versjonen av cart.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Rediger bestillingsmalen

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

  2. Bruk finn-hurtigtasten til å finne linjen <td class="text-right" data-label="customer.order.price"> i filen:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
    {%- if line_item.original_price != line_item.final_price -%}
      <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
      <del>{{ line_item.original_price | money }}</del>
      <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
      {{ line_item.original_price | money }}
    {%- endif -%}
  </td>
  1. Legg til følgende kode over den avsluttende </td>-koden fra trinn 2:
{%- if line_item.unit_price_measurement -%}
    {% include 'product-unit-price', variant: line_item, available: true %}
  {%- endif -%}

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

Den oppdaterte versjonen av customers/order.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Redigere temaoppsett

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

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

product:{
      unavailable: {{ 'products.product.unavailable' | t | json }},
      will_be_in_stock_after:{{ 'products.product.will_be_in_stock_after' | t: date: '[date]' | json }},
      only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
    },
  1. Legg til følgende kode over only_left:{{ 'products.product.only_left' | t: count: '1' | json }} fra trinn 2:
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
    unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},

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

Den oppdaterte versjonen av theme.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Redigere temastilene

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

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

.product-item--price {
    @include clearfix;
    .h1 {
      margin-bottom: $gutter/2;
    }
    span {
      line-height: 22px;
    }
    small {
      white-space: nowrap;
    }
  }
  1. Erstatt koden med følgende kodebit:
.product-item--price {
    @include clearfix;
    margin-bottom: $gutter/2;

    .h1 {
      margin-bottom: 0;
    }

    span {
      line-height: 22px;
    }

    small {
      white-space: nowrap;
    }
  }

  .product-price-unit {
    display: none;
    font-size: em(12px);
    margin-right: 10px;

    .cart-pricing &,
    .order-table & {
      margin-right: 0;
    }

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

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

Den oppdaterte versjonen av theme.scss.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Rediger JavaScript-temakode

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

  2. Bruk finn-hurtigtasten til å finne linjen originalSelectorId: 'productSelect-' + sectionId, i filen:

selectors: {
      originalSelectorId: 'productSelect-' + sectionId,
      $addToCart: $('#addToCart-' + sectionId),
      $SKU: $('.variant-sku', this.$container),
      $productPrice: $('#productPrice-' + sectionId),
      $comparePrice: $('#comparePrice-' + sectionId),
      $addToCartText: $('#addToCartText-' + sectionId),
      $quantityElements: $('#quantity-selector-' + sectionId),
      $variantQuantity: $('#variantQuantity-' + sectionId),
      $variantQuantityMessage: $('#variantQuantity-' + sectionId + '__message'),
      $variantIncoming: $('#variantIncoming-' + sectionId),
      $variantIncomingMessage: $('#variantIncoming-' + sectionId + '__message'),
      $productImageContainer: $('#productPhotoContainer-' + sectionId),
      $productImageWrapper: $('[id^="productPhotoWrapper-' + sectionId + '"]'),
      $productImage: $('[id^="productPhotoImg-' + sectionId + '"]'),
      $productFullDetails: $('.full-details', this.$container),
      $thumbImages: $('#productThumbs-' + sectionId).find('a.product-photo-thumb'),
      $shopifyPaymentButton: '.shopify-payment-button'
    }
  1. Legg til følgende kode over originalSelectorId: 'productSelect-' + sectionId, fra trinn 2:
unitPriceContainer: '[data-unit-price-container]',
    unitPrice: '[data-unit-price]',
    unitPriceBaseUnit: '[data-unit-price-base-unit]',

Etter redigeringene dine skal resultatet se slik ut:

Den oppdaterte versjonen av theme.js.liquid-filen

  1. Bruk finn-hurtigtasten til å finne linjen productVariantCallback: function(variant) { i filen:
productVariantCallback: function(variant) {
  var self = this;
  if (variant) {
    // Update variant image, if one is set
    if (variant.featured_image) {
      var newImg = variant.featured_image;
      var $newImage = this.settings.selectors.$productImageWrapper.filter('[data-image-id="' + newImg.id + '"]');
      var $otherImages = this.settings.selectors.$productImageWrapper.not('[data-image-id="' + newImg.id + '"]');

      $newImage.removeClass('hide');
      $otherImages.addClass('hide');
    }
  1. Legg til følgende kode under if (variant) { fra trinn 2:
// Update unit price, if one is set
var $unitPriceContainer = $(this.settings.selectors.unitPriceContainer, this.$container);

$unitPriceContainer.removeClass('product-price-unit--available');

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.settings.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(this.settings.selectors.unitPriceBaseUnit, this.$container);

  $unitPrice.text(Shopify.formatMoney(variant.unit_price, moneyFormat));
  $unitPriceBaseUnit.text(this.getBaseUnit(variant));
  $unitPriceContainer.addClass('product-price-unit--available');
}

Etter redigeringene dine skal resultatet se slik ut:

Den oppdaterte versjonen av theme.js.liquid-filen

  1. Bruk finn-hurtigtasten til å finne linjen customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; i filen:
customPriceFormat = ' <span aria-hidden="true">' + customPrice + '</span>';
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.regular_price</span> ' + a11yComparePrice + '</span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.sale_price</span> ' + a11yPrice + '</span>';
  1. Erstatt linjen customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; med følgende kodebit:
customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';

Etter redigeringene dine skal resultatet se slik ut:

Den oppdaterte versjonen av theme.js.liquid-filen

  1. Bruk finn-hurtigtasten til å finne linjen $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide(); i filen:
} else {
  // The variant doesn't exist, disable submit button.
  // This may be an error or notice that a specific variant is not available.
  this.settings.selectors.$addToCart.addClass('disabled').prop('disabled', true);
  this.settings.selectors.$addToCartText.html(theme.strings.product.unavailable);
  this.settings.selectors.$variantQuantity.removeClass('is-visible');
  this.settings.selectors.$quantityElements.hide();
  $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
}
  1. Legg til følgende kode under kodebiten fra steg 11:
},

getBaseUnit: function (variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;

Etter redigeringene dine skal resultatet se slik ut:

Den oppdaterte versjonen av theme.js.liquid-filen

  1. Klikk på Lagre for å bekrefte endringene.

Rediger temaets språkfil

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

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

"accessibility": {
  "refresh_page": "choosing a selection results in a full page refresh"
},
  1. Legg til følgende kode over "refresh_page" fra trinn 2:
"unit_price_separator": "per",

Etter redigeringene dine skal resultatet se slik ut:

Den oppdaterte versjonen av en.default.json-filen

  1. Bruk finn-hurtigtasten for å finne linjen som inneholder "will_be_in_stock_after"-koden i filen:
"product": {
  "sold_out": "Sold Out",
  "will_not_ship_until": "Will not ship until ",
  "quantity": "Quantity",
  "add_to_cart": "Add to Cart",
  "unavailable": "Unavailable",
  "will_be_in_stock_after": "Will be in stock after ",
  "only_left": {
    "one": "Only  left!",
    "other": "Only  left!"
  },
  "full_details": "Full details"
}
  1. Legg til følgende kode etter "will_be_in_stock_after" fra steg 5:
"unit_price_label": "Unit price",

Etter redigeringene dine skal resultatet se slik ut:

Den oppdaterte versjonen av en.default.json-filen

  1. Klikk på Lagre for å bekrefte endringene.

(Valgfritt) Legg til oversettelser for andre språk

  1. Gå til temasiden

  2. Velg Handling > Rediger språk

  3. Klikk Endre temaspråk og velg språket du vil redigere (dette er kun mulig på det publiserte temaet).

Valgfritt trinn 3

  1. Søk etter «Enhetspris» i inndatafeltet

  2. Oppdater feltet for Enhetsprisskilletegn under Generelt/Tilgjengelighet

  3. Oppdater feltet Salgsprisetikett under Produkter/Produkt

Valgfritt trinn 6

Vis enhetspriser i bestillingsvarsler

Hvis du har lagt til enhetspriser til produktet, men enhetsprisene ikke vises i bekreftelsesvarsler for bestillinger, må du kanskje oppdatere bestillingsvarsel-malen.

Trinn:

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

  2. Klikk på Bestillingsbekreftelse.

  3. Legg til følgende kodebit i malen:

{%- 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. Klikk på Lagre.

Er du klar til å begynne å selge med Shopify?

Prøv det gratis