Wyświetlanie cen jednostkowych

Uwaga

Przewodnik ten jest przeznaczony tylko dla sprzedawców we Francji. Jeśli sprzedajesz swoje produkty we Francji, ale Twoja firma nie ma siedziby we Francji, skontaktuj się z Pomocą techniczną Shopify, aby aktywować tę funkcję.

Jeśli sprzedajesz produkty według ilości lub wymiarów, dla niektórych produktów konieczne może być wyświetlenie ceny jednostkowej. Po wprowadzeniu ceny jednostkowej produktu cena jednostkowa jest wyświetlana na stronach produktów, stronach kolekcji, stronie koszyka, stronach realizacji zakupu i powiadomieniach o potwierdzeniu zamówienia.

Dodaj ceny jednostkowe do swojego produktu

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji Produkty.

2. Kliknij produkt, który chcesz edytować.

3. Opcjonalnie: Jeśli produkt ma warianty, w sekcji Warianty kliknij wariant, który chcesz edytować.

4. W sekcji Ceny wybierz opcję Pokaż cenę jednostkową tego produktu.

5. W polu Całkowite wymiary produktu wprowadź całkowite wymiary produktu, a następnie wybierz jednostkę miary.

6. Opcjonalnie: W polu Miara podstawowa dodaj miarę podstawową, a następnie wybierz jednostkę miary. Na przykład dla produktu o wadze 1 kg możesz wybrać jednostkę podstawową 100 g.

7. Kliknij opcję Zapisz.

iPhone

1. Z aplikacji Shopify przejdź do Produkty > Wszystkie produkty.
2. Naciśnij produkt, który chcesz edytować.
3. Naciśnij obszar ceny produktu.
4. Wybierz opcję Pokaż cenę jednostkową.
5. W polu Całkowite wymiary produktu wprowadź całkowite wymiary produktu, a następnie wybierz jednostkę miary.
6. Opcjonalnie: W polu Miara podstawowa dodaj miarę podstawową, a następnie wybierz jednostkę miary. Na przykład dla produktu o wadze 1 kg możesz wybrać jednostkę podstawową 100 g.
7. Naciśnij Zapisz.

Android

1. Z aplikacji Shopify przejdź do Produkty > Wszystkie produkty.
2. Naciśnij produkt, który chcesz edytować.
3. Naciśnij obszar ceny produktu.
4. Wybierz opcję Pokaż cenę jednostkową.
5. W polu Całkowite wymiary produktu wprowadź całkowite wymiary produktu, a następnie wybierz jednostkę miary.
6. Opcjonalnie: W polu Miara podstawowa dodaj miarę podstawową, a następnie wybierz jednostkę miary. Na przykład dla produktu o wadze 1 kg możesz wybrać jednostkę podstawową 100 g.
7. Naciśnij ✓.

Wyświetl ceny jednostkowe w Twoim sklepie online

Wszystkie szablony Online Store 2.0 mają już dostępną funkcję ceny jednostkowej. Aby wyświetlić ceny jednostkowe w Twoim sklepie online, nie musisz wykonywać żadnych działań.

Jeśli masz szablon klasyczny i nie możesz zaktualizować go do wersji, która obsługuje funkcję ceny jednostkowej, możesz ręcznie dostosować kod szablonu, aby wyświetlić cenę jednostkową.

Wyświetl ceny jednostkowe w szablonie klasycznym

Uwaga

Utwórz kopię zapasową swojego szablonu przed rozpoczęciem edycji kodu. Poniższe instrukcje są zaawansowane. Jeśli potrzebujesz pomocy przy dodawaniu funkcji do szablonu, możesz zgłosić się o pomoc przy dostosowywaniu.

Kroki dla tego dostosowania różnią się w zależności od szablonu. Kliknij przycisk dla szablonu, zanim wykonasz poniższe instrukcje:

Debut

Kroki dla szablonu Debut

Ceny jednostkowe są dostępne w szablonie Debut dla wersji 12.1.0 i nowszych. Jeśli nie możesz zaktualizować szablonu do najnowszej wersji, możesz dodać dostosowanie ceny jednostkowej do poprzednich wersji szablonu Debut.

Edytuj fragment kodu ceny produktu

1. W katalogu Fragmenty kodu kliknij plik product-price.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując data-price:

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

1. Zamień kod na następujący fragment kodu:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując price__sale:

<div class="price__sale">
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="price-item price-item--sale" data-sale-price>
      {{ money_price }}
    </span>
    <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
  </dd>
</div>

1. Dodaj następujący kod pod tagiem zamykającym </div>:

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

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj stronę koszyka

1. W katalogu Sekcje kliknij plik cart-template.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując cart__price-wrapper:

{%- if item.original_price != item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ item.original_price | money }}
{%- endif -%}

1. Zamień kod na następujący fragment kodu:

<dl>
  {%- if item.original_price != item.final_price -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    <s>{{ item.original_price | money }}</s>
  </dd>
  <dt>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="order-discount">{{ item.final_price | money }}</span>
  </dd>
  {%- else -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    {{ item.original_price | money }}
  </dd>
  {%- endif -%}
  {%- if item.unit_price_measurement -%}
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd>
    <span class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if item.unit_price_measurement.reference_value != 1 -%}
      {{- item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

Po wprowadzeniu zmian plik cart-template.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj stronę kolekcji

1. W katalogu Sekcje kliknij plik collection.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując grid-view-item__title:

{% include 'product-price' %}

1. Zamień kod na następujący fragment kodu:

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

Po wprowadzeniu zmian plik collection.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj siatkę karty produktu

1. W katalogu Fragmenty kodu kliknij plik product-card-grid.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując grid-view-item__title:

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

1. Zamień kod na następujący fragment kodu:

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

Po wprowadzeniu zmian plik product-card-grid.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj listę kart produktów

1. W katalogu Fragmenty kodu kliknij plik product-card-list.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując {% if product.available %}:

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

1. Zamień kod na następujący fragment kodu:

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

Po wprowadzeniu zmian plik product-card-list.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj stronę zamówienia

1. W katalogu Szablony kliknij plik customers/order.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując data-label="{{ 'customer.order.price' | t }}":

{%- if line_item.original_price != line_item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ line_item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ line_item.original_price | money }}
{%- endif -%}

1. Zamień kod na następujący fragment kodu:

<dl>
  {%- if line_item.original_price != line_item.final_price -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    <s>{{ line_item.original_price | money }}</s>
  </dd>
  <dt>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="order-discount">{{ line_item.final_price | money }}</span>
  </dd>
  {%- else -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    {{ line_item.original_price | money }}
  </dd>
  {%- endif -%}
  {%- if line_item.unit_price_measurement -%}
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd>
    <span class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if line_item.unit_price_measurement.reference_value != 1 -%}
      {{- line_item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ line_item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

Po wprowadzeniu zmian plik customers/order.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj style szablonów

1. W katalogu Zasoby kliknij plik theme.scss.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując .price__vendor {:

.price__vendor {
  color: $color-body-text;
  font-size: 0.9em;
  font-weight: $font-weight-body;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 5px 0 10px;
  width: 100%;
  @include flex-basis(100%);
}

1. Dodaj następujący fragment kodu pod kodem z kroku 2:

.price__unit {
  @include flex-basis(100%);
  display: none;

  .price--unit-available & {
    display: block;
  }
}
.price-unit-price {
  color: $color-body-text;
  font-size: 0.8em;
}

Po wprowadzeniu zmian plik theme.scss.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj kod szablonu JavaScript

1. W katalogu Zasoby kliknij plik theme.js.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

salePrice: '[data-sale-price]'

1. Dodaj następujący fragment kodu do kodu z kroku 2:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

productOnSale: 'price--on-sale',

1. Dodaj następujący fragment kodu po kodzie z kroku 4:

productUnitAvailable: 'price--unit-available',

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

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

1. Zamień kod na następujący fragment kodu:

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

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

var salePrice = '';

1. Dodaj następujący fragment kodu pod kodem z kroku 8:

var unitLabel = '';
var unitPrice = '';
if (variant.unit_price_measurement) {
  unitLabel = theme.strings.unitPrice;
  unitPrice =
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat) +
    ' ' +
    theme.strings.unitPriceSeparator +
    ' ' +
    this._getBaseUnit(variant);
}

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

.replace('[$]', salePrice)

1. Dodaj następujący fragment kodu pod kodem z kroku 10:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

_updatePrice: function(evt) {

1. Dodaj następujący fragment kodu przed kodem z kroku 12:

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

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

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

1. Dodaj następujący fragment kodu pod kodem z kroku 14:

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

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

.removeClass(this.classes.productOnSale)

1. Dodaj następujący fragment kodu pod kodem z kroku 16:

.removeClass(this.classes.productUnitAvailable)

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

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

1. Dodaj następujący fragment kodu pod kodem z kroku 18:

// Unit price
if (variant.unit_price_measurement) {
  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  $unitPriceBaseUnit.html(this._getBaseUnit(variant));
  $priceContainer.addClass(this.classes.productUnitAvailable);
}

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj swoje angielskie tłumaczenia

1. W katalogu Ustawienia regionalne kliknij plik en.default.json.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

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

1. Dodaj następujący fragment kodu do kodu z kroku 2:

"unit_price_separator": "per",

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

"include_taxes": "Tax included.",

1. Dodaj następujący fragment kodu pod kodem z kroku 4:

"unit_price_label": "Unit price",

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj układ szablonu

1. W katalogu Układ kliknij plik theme.liquid .

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

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

1. Dodaj następujący fragment kodu pod kodem z kroku 2:

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

Po wprowadzeniu zmian plik theme.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

(Opcjonalnie) Dodaj tłumaczenia dla innych języków

1. Przejdź do strony Szablony w swoim panelu administracyjnym Shopify.

2. Kliknij przycisk ... > Edytuj zawartość domyślnego szablonu.

3. Kliknij opcję Zmień język szablonu, a następnie wybierz język, który chcesz edytować. Jest to możliwe tylko w opublikowanym szablonie.

4. Wpisz Unit Price w polu wyszukiwania.

5. Zaktualizuj pole Separator ceny jednostkowej w sekcji Ogólne / Dostępność.

6. Zaktualizuj pole Etykieta ceny jednostkowej sekcji Produkty / Produkt.

7. Kliknij opcję Zapisz.

Brooklyn

Kroki dla szablonu Brooklyn

Ceny jednostkowe są dostępne w szablonie Brooklyn dla wersji 13.1.0 i wyższych. Jeśli nie możesz zaktualizować szablonu do najnowszej wersji, możesz dodać dostosowanie cen jednostkowych do poprzednich wersji szablonu Brooklyn.

Dodaj fragment kodu ceny produktu

1. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu.

2. Wprowadź product-price w polu Nazwa.

3. Skopiuj i wklej następujący kod do pliku.

<div class="price-container{% if variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
  {%- if variant.compare_at_price > variant.price -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper" aria-hidden="false">
      <span id="ComparePrice" class="product-single__price--compare-at">
        {{ variant.compare_at_price | money }}
      </span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
  {%- else -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper hide" aria-hidden="true">
      <span id="ComparePrice" class="product-single__price--compare-at"></span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
  {%- endif -%}
  <span id="ProductPrice"
    class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
    itemprop="price"
    content="{{ variant.price | divided_by: 100.00 }}">
    {{ variant.price | money }}
  </span>
  <div class="product-single__unit">
    {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span class="product-unit-price">
      <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </div>
</div>

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj stronę polecanego produktu

1. W katalogu Sekcje kliknij plik featured-product.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując itemprop="offers":

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if compare_at_price > price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if compare_at_price > price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ price | money }}
    </span>
</div>

1. Zamień kod na następujący fragment kodu:

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

Po wprowadzeniu zmian plik featured-product.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj stronę produktu

1. W katalogu Sekcje kliknij plik product-template.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując itemprop="offers":

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if current_variant.compare_at_price > current_variant.price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ current_variant.compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ current_variant.price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ current_variant.price | money }}
    </span>
</div>

1. Zamień kod na następujący fragment kodu:

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

Po wprowadzeniu zmian plik product-template.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj swój koszyk ajax

1. W katalogu Fragmenty kodu kliknij plik ajax-cart-template.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując <span class="ajaxcart__price">{{{price}}}</span>:

{{#if discountsApplied}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.regular_price' | t }}{% raw %}</span>
    <del class="ajaxcart__price">{{{price}}}</del>
    <span class="visually-hidden">{% endraw %}{{ 'products.general.sale_price' | t }}{% raw %}</span>
    <span class="ajaxcart__price">{{{discountedPrice}}}</span>
    {{else}}
    <span class="ajaxcart__price">{{{price}}}</span>
{{/if}}

1. Dodaj następujący kod w obszarze {{/if}} z kroku 2:

{{#if unitPrice}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.unit_price' | t }}{% raw %}</span>
    <span class="cart__unit-price">
        {% endraw %}
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{'general.accessibility.unit_price_separator' | t}}&nbsp;</span>
        {%- endcapture -%}
        {% raw %}
        <span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
    </span>
{{/if}}

Po wprowadzeniu zmian plik ajax-cart-template.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj pozycję siatki produktu

1. W katalogu Fragmenty kodu kliknij plik product-grid-template.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując capture img_id_class:

{% capture img_id_class %}ProductImage-{{ product.featured_image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_image.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

1. Dodaj następujący fragment kodu przed kodem z kroku 2:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując {{ product.price | money_without_trailing_zeros }}:

<span class="grid-product__price">
    {% if on_sale %}
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    {% endif %}
    {% if product.price_varies %}
        {{ product.price_min | money_without_trailing_zeros }}
        <span class="icon-fallback-text">
        <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
        <span class="fallback-text">+</span>
        </span>
    {% else %}
        {{ product.price | money_without_trailing_zeros }}
    {% endif %}
</span>

1. Dodaj następujący kod w </span>:

{%- if product.price_varies == false and variant.unit_price_measurement -%}
    {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
        <span>
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
        </span>
    {%- endcapture -%}
    <span class="product-unit-price">
        <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
        <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj stronę koszyka

1. W katalogu Szablony kliknij plik cart.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując <span class="cart__price">:

{%- if item.original_line_price != item.final_line_price -%}
  <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
  <del class="cart__price">{{ item.original_line_price | money }}</del>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount cart__price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart__price">{{ item.original_line_price | money }}</span>
{%- endif -%}

Uwaga

Jeśli masz starszą wersję szablonu, znalezienie tego fragmentu może nie być możliwe. W takim przypadku dodaj kod z kroku 3 bezpośrednio w elemencie <span class="cart__price">.

1. Dodaj następujący fragment kodu pod kodem z kroku 2:

{%- if item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="cart__unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if item.unit_price_measurement.reference_value != 1 -%}
            {{- item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Po wprowadzeniu zmian plik cart.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj stronę zamówienia

1. W katalogu Szablony kliknij plik customers/order.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując {{ line_item.original_price | money }}:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
    {%- if line_item.original_price != line_item.final_price -%}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        <del>{{ line_item.original_price | money }}</del>
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
        {{ line_item.original_price | money }}
    {%- endif -%}
</td>

1. Dodaj następujący fragment kodu przed </td> z kroku 2:

{%- if line_item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="product-unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if line_item.unit_price_measurement.reference_value != 1 -%}
            {{- line_item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ line_item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Po wprowadzeniu zmian plik customers/order.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj style szablonu - część 1

1. W katalogu Zasoby kliknij plik theme.scss.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując .ajaxcart__price {:

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

1. Dodaj następujący fragment kodu pod kodem z kroku 2:

.cart__unit-price {
    display: block;
}

Po wprowadzeniu zmian plik theme.scss.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj style szablonu - część 2

1. W katalogu Zasoby kliknij plik timber.scss.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując .product-single__policies {:

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

1. Dodaj następujący fragment kodu do kodu z kroku 2:

.product-single__unit {
  display: none;

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Przejdź na sam koniec pliku i dodaj następujący kod:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj kod szablonu JavaScript

1. W katalogu Zasoby kliknij plik theme.js.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

var prodImg;

1. Dodaj następujący fragment kodu pod kodem z kroku 2:

var unitPrice = null;

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

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

1. Dodaj następujący fragment nad kodem z kroku 4:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

vendor: cartItem.vendor

1. Dodaj następujący fragment nad kodem z kroku 6:

unitPrice: unitPrice,

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

productPrice: '#ProductPrice',

1. Dodaj następujący fragment kodu pod kodem z kroku 8:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując $(this.selectors.priceContainer, this.$container).removeClass(:

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

1. Zamień kod na następujący fragment kodu:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

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

1. Dodaj następujący fragment nad kodem z kroku 12:

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

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

  $(this.selectors.priceContainer, this.$container).addClass(
    'price-container--unit-available'
  );
}

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć poniższy kod, wyszukując this.destroyImageCarousel();:

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

1. Dodaj następujący fragment nad kodem z kroku 14:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj swoje angielskie tłumaczenia

1. W katalogu Ustawienia regionalne kliknij plik en.default.json.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

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

1. Dodaj następujący fragment kodu do kodu z kroku 2:

"unit_price_separator": "per",

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący kod:

"include_taxes": "Tax included.",

1. Dodaj następujący fragment kodu pod kodem z kroku 4:

"unit_price": "Unit price",

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

(Opcjonalnie) Dodaj tłumaczenia dla innych języków

1. Przejdź do strony Szablony w swoim panelu administracyjnym Shopify.

2. Kliknij przycisk ... > Edytuj zawartość domyślnego szablonu

3. Kliknij Zmień język szablonu, a następnie wybierz język, który chcesz edytować. Jest to możliwe tylko w opublikowanym szablonie.

4. Wpisz Unit Price w polu wyszukiwania.

5. Zaktualizuj pole Separator ceny jednostkowej w sekcji Ogólne / Dostępność.

6. Zaktualizuj pole Etykieta ceny jednostkowej w obszarze Produkty / Ogólne.

7. Kliknij opcję Zapisz.

Minimal

Kroki dla szablonu Minimal

Ceny jednostkowe są dostępne w szablonie Minimal dla wersji 11.2.0 i nowszych. Jeśli nie możesz zaktualizować szablonu do najnowszej wersji, możesz dodać dostosowanie ceny jednostkowej do poprzednich wersji Minimal.

Zaktualizuj swoje fragmenty kodu

1. Znajdź i rozwiń folder Fragmenty kodu.

2. Wybierz Dodaj nowy fragment kodu.

3. Wpisz nazwę product-unit-price.

4. Skopiuj i wklej następujący kod do 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. Kliknij opcję Zapisz.

2. Znajdź i edytuj plik product-grid-item.liquid.

3. Zastąp tę linię:

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

Z tą linią:

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

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć {{ price }} i dodać następujący kod:

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

Po wprowadzeniu zmian plik product-grid-item.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

2. Zlokalizuj i edytuj plik search-result.liquid

3. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć {% if item.object_type == 'product' %} i dodać następujący kod w poniższej linii:

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

1. Teraz użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujące dwa fragmenty kodu:

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

I

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

1. Dodaj następujący blok kodu w każdym z dwóch fragmentów kodu wymienionych w poprzednim kroku:

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

Po wprowadzeniu zmian plik search-result.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Zaktualizuj swoje style

1. Zlokalizuj i rozwiń folder Zasoby.

2. Edytuj plik theme.scss.liquid.

3. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć ten fragment kodu:

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

1. Wstaw następujący blok kodu pod fragmentem kodu znalezionym przez Ciebie w poprzednim kroku:

font-family: $headerFontStack;

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący fragment kodu:

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

1. Wstaw następujący blok kodu pod fragmentem kodu znalezionym przez Ciebie w poprzednim kroku:

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

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący fragment kodu:

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

1. Wstaw następujący blok kodu pod fragmentem kodu znalezionym przez Ciebie w poprzednim kroku:

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

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następujący fragment kodu:

.cart__product-title {
  display: inline-block;

1. Wstaw następujący blok kodu pod fragmentem kodu znalezionym przez Ciebie w poprzednim kroku:

font-weight: $bodyFontWeightBold;

Po wprowadzeniu zmian plik theme.scss.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

2. Zlokalizuj i edytuj timber.scss.liquidplik.

3. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć ten kod:

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

1. Wstaw następujący blok kodu pod fragmentem kodu znalezionym przez Ciebie w poprzednim kroku:

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

1. Wstaw ten kod na końcu pliku:

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

Po wprowadzeniu zmian plik timber.scss.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Zaktualizuj swoje szablony

1. Zlokalizuj i rozwiń folder Szablony.

2. Zlokalizuj i edytuj customers/order.liquidplik.

3. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć ten kod:

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

1. Dodaj ten kod poniżej kodu z kroku 3:

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

Po wprowadzeniu zmian plik customers/order.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Zaktualizuj swój JavaScript

1. Znajdź i edytuj theme.js w zasobach.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następującą linię .shopify-payment-button i zamienić ją na:

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

Ten fragment kodu powinien wyglądać następująco:

1. Poszukaj tego kodu:

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

1. Dodaj ten kod poniżej:

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

Wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć ten kod:

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

1. Wstaw następujący blok kodu pod fragmentem kodu znalezionym przez Ciebie w poprzednim kroku:

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

Wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Zaktualizuj szablon koszyka

1. Zlokalizuj i rozwiń folder Sekcje.

2. Edytuj plik cart-template.liquid.

3. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć ten kod <span class="order-discount h5">{{ item.final_price | money }}</span>.

4. Zamień linię z tym kodem:

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

1. Znajdź pierwsze wystąpienie kodu {%- 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. Dodaj ten fragment kodu powyżej kodu z kroku 5:

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

Po wprowadzeniu zmian plik cart-template.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Zaktualizuj polecany produkt

1. Zlokalizuj i rozwiń folder Sekcje.

2. Edytuj plik featured-product.liquid.

3. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię z itemprop="name" i zamienić ją na:

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

1. Zlokalizuj kod zawierający 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. Wstaw następujący blok kodu pod fragmentem kodu znalezionym przez Ciebie w poprzednim kroku:

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

Po wprowadzeniu zmian plik featured-product.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Zaktualizuj szablon produktu

1. Zlokalizuj i rozwiń folder Sekcje.

2. Edytuj plik product-template.liquid.

3. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię z itemprop="name" i zamienić ją na:

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

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć ten kod:

{% 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. Dodaj tę linię poniżej:

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

Po wprowadzeniu zmian plik product-template.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Zaktualizuj ustawienia regionalne

1. Zlokalizuj i rozwiń folder Ustawienia regionalne.

2. Otwórz i edytuj plik en.default.json.

3. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć następującą linię refresh_page i zamienić ją na:

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

Wynik powinien wyglądać następująco:

1. Zlokalizuj linię zawierającą full_details i zamień ją na:

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

Wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

(Opcjonalnie) Dodaj tłumaczenia dla innych języków

1. Przejdź do strony Szablony w swoim panelu administracyjnym Shopify.

2. Kliknij przycisk ... > Edytuj zawartość domyślnego szablonu.

3. Kliknij opcję Zmień język szablonu, a następnie wybierz język, który chcesz edytować. Jest to możliwe tylko w opublikowanym szablonie.

4. Wpisz Unit Price w polu wyszukiwania.

5. Zaktualizuj pole Separator ceny jednostkowej w sekcji Ogólne / Dostępność.

6. Zaktualizuj pole Etykieta ceny jednostkowej sekcji Produkty / Produkt.

7. Kliknij opcję Zapisz.

Venture

Kroki dla szablonu Venture

Ceny jednostkowe zostały dodane do szablonu Venture dla wersji 9.4.0 i nowszych. Jeśli nie możesz zaktualizować szablonu do najnowszej wersji, wykonaj następujące kroki, aby zastosować dostosowanie cen jednostkowych do poprzednich wersji Venture.

Edytuj plik języka szablonu

1. W katalogu ustawień regionalnych kliknij en.default.json.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię zawierającą refresh_page:

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

1. Dodaj następujący kod powyżej linii znalezionej w kroku 2:

"unit_price_separator": "per",

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię zawierającą stock_unavailable:

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

1. Dodaj następujący kod powyżej linii znalezionej w kroku 4:

"unit_price_label": "Unit price",

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj arkusz stylów szablonu

1. W katalogu Zasoby kliknij theme.scss.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię .product-single__policies {:

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

1. Dodaj następujący kod poniżej tagu zamykającego } bloku kodu znalezionego w kroku 2:

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

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

Po wprowadzeniu zmian plik theme.scss.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Dodaj fragment ceny jednostkowej produktu

1. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu.

2. Wpisz nazwę product-unit-price.

3. Dodaj następujący kod do 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. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj fragment kodu karty produktu

1. W katalogu Fragmenty kliknij product-card.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię <a href="{{ product.url | within: collection }}".

3. Dodaj następujący kod powyżej linii znalezionej w kroku 2:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię <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. Dodaj następujący kod powyżej tagu zamykającego </div> znalezionego w kroku 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 -%}

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj szablon strony koszyka

1. W katalogu Sekcje kliknij cart-template.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć pierwsze wystąpienie <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. Dodaj następujący kod poniżej tagu endif znalezionego w kroku 2:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć drugie wystąpienie <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. Dodaj następujący kod poniżej drugiego tagu zamknięcia {{/if}} znalezionego w kroku 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}}

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj szablon polecanej strony produktu

1. W katalogu Sekcje kliknij featured-product.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię {% assign current_variant = product.selected_or_first_available_variant %}.

3. Dodaj następujący kod poniżej linii znalezionej w kroku 2:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię zawierającą <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. Poniżej tego tagu ul znajdź kod {% if section.settings.stock_enable %}.

2. Dodaj następujący kod powyżej bloku if znalezionego w kroku 6:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj szablon strony produktu

1. W katalogu Sekcje kliknij product-template.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię {% assign current_variant = product.selected_or_first_available_variant %}.

3. Dodaj następujący kod poniżej linii znalezionej w kroku 2:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię zawierającą <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. Poniżej tego tagu ul znajdź kod {% if section.settings.stock_enable %}.

2. Dodaj następujący kod powyżej bloku if znalezionego w kroku 5:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj szablon zamówienia klientów

1. W katalogu Szablony kliknij customers/order.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię <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. Zastąp kod znaleziony w kroku 2 następującym kodem:

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

Po wprowadzeniu zmian plik customers/order.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj plik JavaScript swojego szablonu

1. W katalogu Zasoby kliknij theme.js.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię // Create item's data object and add to 'items' array.

3. Dodaj następujący kod powyżej linii znalezionej w kroku 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
  };
}

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię vendor: cartItem.vendor,

2. Dodaj następujący kod poniżej linii znalezionej w kroku 4:

unitPrice: unitPrice,

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię shopifyPaymentButton: '.shopify-payment-button'.

2. Zastąp linię znalezioną w kroku 6 następującym kodem:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię _updateSKU: function(evt) {.

2. Dodaj następujący kod powyżej linii znalezionej w kroku 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;
},

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię 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. Dodaj następujący kod poniżej tagu zamykającego } znalezionego w kroku 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'
  );
}

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

(Opcjonalnie) Dodaj tłumaczenia dla innych języków

1. Przejdź do strony Szablony w swoim panelu administracyjnym Shopify.

2. Kliknij przycisk ... > Edytuj zawartość domyślnego szablonu.

3. Kliknij opcję Zmień język szablonu, a następnie wybierz język, który chcesz edytować. Jest to możliwe tylko w opublikowanym szablonie.

4. Wpisz Unit Price w polu wyszukiwania.

5. Zaktualizuj pole Separator ceny jednostkowej w sekcji Ogólne / Dostępność.

6. Zaktualizuj pole Etykieta ceny jednostkowej sekcji Produkty / Produkt.

7. Kliknij opcję Zapisz.

Supply

Kroki dla szablonu Supply

Ceny jednostkowe zostały dodane do szablonu Supply dla wersji 8.3.0 i nowszych. Jeśli nie możesz zaktualizować szablonu do najnowszej wersji, wykonaj następujące kroki, aby zastosować dostosowanie ceny jednostkowej do poprzednich wersji Supply.

Dodaj fragment ceny jednostkowej produktu

1. Znajdź i rozwiń folder Fragmenty kodu.

2. Wybierz Dodaj nowy fragment kodu.

3. Wpisz nazwę product-unit-price.

4. Skopiuj i wklej następujący kod do pliku i wybierz Zapisz.

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

Po wprowadzeniu zmian plik product-unit-price.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj szablon polecanego produktu

1. Zlokalizuj i rozwiń folder Sekcje, a następnie wybierz plik featured-product.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię {% include 'price' with price %} w pliku.

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

1. Dodaj następujący kod pod </span> zamykającym fragmentu kodu z kroku 2:

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

Po wprowadzeniu zmian plik featured-product.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj szablon produktu

1. Zlokalizuj i rozwiń folder Sekcje, a następnie wybierz plik product-template.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię {% include 'price' with variant.price %} w pliku.

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

1. Dodaj następujący kod pod </span> zamykającym z kroku 2:

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

Po wprowadzeniu zmian plik product-template.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj fragment kodu pozycji siatki produktu

1. Zlokalizuj i rozwiń folder Fragmenty, a następnie wybierz plik product-grid-item.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię {% if on_sale and section.settings.product_show_saved_amount %} w pliku.

{% 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. Zamień kod na następujący fragment kodu:

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

Po wprowadzeniu zmian plik product-grid-item.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj fragment kodu pozycji listy produktów

1. Zlokalizuj i rozwiń folder Fragmenty, a następnie wybierz plik product-list-item.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię <div class="product-item--price text-center"> w pliku:

<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. Zamień kod na następujący fragment kodu:

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

Po wprowadzeniu zmian plik product-list-item.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj fragment kodu siatki wyników wyszukiwania

1. Zlokalizuj i rozwiń folder Fragmenty, a następnie wybierz plik search-result-grid.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię {% if on_sale and section.settings.product_show_saved_amount %} w pliku.

{% 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. Zamień kod na następujący fragment kodu:

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

Po wprowadzeniu zmian plik search-result-grid.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj szablon koszyka

1. Zlokalizuj i rozwiń folder Szablony, a następnie wybierz plik cart.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię <del class="cart-original-price order-discount--cart-price"> w pliku:

<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. Zamień kod na następujący fragment kodu:

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

Po wprowadzeniu zmian plik cart.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj szablon zamówienia

1. Zlokalizuj i rozwiń folder Szablony, a następnie wybierz plik customers/order.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię <td class="text-right" data-label="customer.order.price"> w pliku:

<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. Dodaj następujący kod powyżej </td> zamykającym z kroku 2:

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

Po wprowadzeniu zmian plik customers/order.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj układ szablonu

1. Zlokalizuj i rozwiń folder Układ, a następnie wybierz plik theme.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię zawierającą only_left: w pliku:

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. Dodaj następujący kod powyżej only_left:{{ 'products.product.only_left' | t: count: '1' | json }} z kroku 2:

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

Po wprowadzeniu zmian plik theme.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj style szablonów

1. Zlokalizuj i rozwiń folder Sekcje, a następnie wybierz plik theme.scss.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię .product-item--price { w pliku:

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

1. Zamień kod na następujący fragment kodu:

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

Po wprowadzeniu zmian plik theme.scss.liquid powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj kod szablonu JavaScript

1. Zlokalizuj i rozwiń folder Zasoby, a następnie wybierz plik theme.js.liquid.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię originalSelectorId: 'productSelect-' + sectionId, w pliku:

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. Dodaj następujący kod powyżej originalSelectorId: 'productSelect-' + sectionId, z kroku 2:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię productVariantCallback: function(variant) { w pliku:

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. Dodaj następujący kod pod if (variant) { z kroku 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');
}

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; w pliku:

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. Zamień linię customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; na następujący fragment kodu:

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

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide(); w pliku:

} 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. Dodaj następujący kod pod fragmentem kodu z kroku 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;

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

Edytuj plik językowy szablonu

1. Zlokalizuj i rozwiń folder Ustawienia regionalne, a następnie wybierz plik en.default.json.

2. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię zawierającą "refresh_page" w pliku:

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

1. Dodaj następujący kod powyżej "refresh_page" z kroku 2:

"unit_price_separator": "per",

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Użyj skrótu klawiaturowego wyszukiwania, aby znaleźć linię zawierającą "will_be_in_stock_after" w pliku:

"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. Dodaj następujący kod po "will_be_in_stock_after" z kroku 5:

"unit_price_label": "Unit price",

Po wprowadzeniu zmian wynik powinien wyglądać następująco:

1. Kliknij Zapisz, aby potwierdzić zmiany.

(Opcjonalnie) Dodaj tłumaczenia dla innych języków

1. Przejdź do strony Szablony w swoim panelu administracyjnym Shopify.

2. Kliknij przycisk ... > Edytuj zawartość domyślnego szablonu.

3. Kliknij opcję Zmień język szablonu, a następnie wybierz język, który chcesz edytować. Jest to możliwe tylko w opublikowanym szablonie.

4. Wyszukaj Unit Price na pasku wprowadzania.

5. Zaktualizuj pole Separator ceny jednostkowej w sekcji Ogólne / Dostępność.

6. Zaktualizuj pole Etykieta ceny jednostkowej sekcji Produkty / Produkt.

7. Kliknij opcję Zapisz.

Wyświetl ceny jednostkowe w powiadomieniach o zamówieniu

Domyślnie w powiadomieniu o potwierdzeniu zamówienia wyświetlane są ceny jednostkowe, gdy funkcja ta jest aktywna.

Jeśli dodałeś(-aś) ceny jednostkowe do swojego produktu, ale nie pojawiają się one w powiadomieniach o potwierdzeniu zamówienia, konieczne może być ręczne zaktualizowanie szablonu.

Kroki:

1. Z panelu administracyjnego Shopify przejdź do opcji Ustawienia > Powiadomienia.

2. W sekcji Zamówienia kliknij Potwierdzenie zamówienia.

3. Kliknij opcję Edytuj kod.

4. Dodaj następujący fragment do szablonu w klasie: "order-list__item-price"

{%- if line_item.unit_price_measurement -%}
  <div class="order-list__unit-price">
     {{ line_item.unit_price | money }}/
     {%- if line_item.unit_price_measurement.reference_value != 1 -%}
       {{- line_item.unit_price_measurement.reference_value -}}
     {%- endif -%}
     {{ line_item.unit_price_measurement.reference_unit }}
  </div>
{%- endif -%}

 5. Kliknij opcję Zapisz.

Wskazówka

Złóż zamówienie testowe w swoim sklepie, aby sprawdzić, czy w powiadomieniu o zamówieniu wyświetlana jest cena jednostkowa.