Preis pro Einheit anzeigen

Hinweis

Dieser Leitfaden ist nur für Händler relevant, die in Frankreich verkaufen.

Wenn du Produkte in größeren Mengen oder Maßen verkaufst, musst du möglicherweise für bestimmte Produkte den Preis pro Einheit anzeigen. Wenn du einen Preis pro Einheit für ein Produkt eingibst, wird dieser auf den Produktseiten, den Kategorieseiten, der Warenkorbseite, den Checkout-Seiten und in den Nachrichten zur Bestellbestätigung angezeigt.

Einen Grundpreis für Produkte hinzufügen

Desktop

1. Gehe im Shopify-Adminbereich zu Produkte.

2. Klicke auf den Namen des Produkts, das du ändern möchtest.

3. Klicke auf die Variante, die du aktualisieren möchtest.

4. Wähle unter Pricing (Preis) die Option Show unit price for this product (Preis pro Einheit für dieses Produkt anzeigen).

5. Gib im Feld Gesamtmessung des Produkts die Anzahl der Einheiten in deinem Produkt ein.

6. Verwende das Drop-down-Menü Select unit (Maßeinheit wählen), um die Maßeinheit für die Variante auszuwählen. Die Maßeinheit unterscheidet sich je nach angebotenem Produkt. Wenn das Produkt beispielsweise 2 Liter Seife ist, wähle Liter aus.

7. Gib im Feld Unit price (Preis pro Einheit) den Preis pro Einheit des Produkts ein.

8. Optional: Gib einen Wert für die Grundpreiseinheit ein. Du kannst beispielsweise für ein Produkt mit einem Gewicht von 1 kg eine Grundpreiseinheit von 100 g auswählen.

9. Klicke auf Speichern.

iPhone

1. Gehe in der Shopify App auf Produkte > Alle Produkte.

2. Tippe auf dem Bildschirm Produkte auf ein Produkt.

3. Tippe auf die Variante, die du aktualisieren möchtest.

4. Wähle unter Pricing (Preis) die Option Show unit price for this product (Preis pro Einheit für dieses Produkt anzeigen).

5. Gib im Feld Gesamtmessung des Produkts die Anzahl der Einheiten in deinem Produkt ein.

6. Verwende das Drop-down-Menü Select unit (Maßeinheit wählen), um die Maßeinheit für die Variante auszuwählen. Die Maßeinheit unterscheidet sich je nach angebotenem Produkt. Wenn das Produkt beispielsweise 2 Liter Seife ist, wähle Liter aus.

7. Gib im Feld Unit price (Preis pro Einheit) den Preis pro Einheit des Produkts ein.

8. Optional: Wähle eine Basiseinheit aus. Du kannst beispielsweise für ein Produkt mit einem Gewicht von 1 kg eine Basiseinheit von 100 g auswählen.

9. Tippe auf Speichern.

Android

1. Gehe in der Shopify App auf Produkte > Alle Produkte.

2. Tippe auf dem Bildschirm Produkte auf ein Produkt.

3. Tippe auf die Variante, die du aktualisieren möchtest.

4. Wähle unter Pricing (Preis) die Option Show unit price for this product (Preis pro Einheit für dieses Produkt anzeigen).

5. Gib im Feld Gesamtmessung des Produkts die Anzahl der Einheiten in deinem Produkt ein.

6. Verwende das Drop-down-Menü Select unit (Maßeinheit wählen), um die Maßeinheit für die Variante auszuwählen. Die Maßeinheit unterscheidet sich je nach angebotenem Produkt. Wenn das Produkt beispielsweise 2 Liter Seife ist, wähle Liter aus.

7. Gib im Feld Unit price (Preis pro Einheit) den Preis pro Einheit des Produkts ein.

8. Optional: Wähle eine Basiseinheit aus. Du kannst beispielsweise für ein Produkt mit einem Gewicht von 1 kg eine Basiseinheit von 100 g auswählen.

9. Tippe auf Speichern.

Preis pro Einheit in deinem Onlineshop anzeigen

Die Schritte für diese Anpassung variieren je nach deinem Theme. Klicke auf die Schaltfläche für dein Theme, bevor du die nachstehenden Anweisungen befolgst:

Hinweis

Erstelle eine Sicherung deines Themes, bevor du damit beginnst, den Code zu bearbeiten. Die folgenden Anweisungen wurden erweitert. Ziehe den Abschnitt Hilfe bei Anpassungen erhalten zu Rate, wenn du Hilfe beim Hinzufügen der Funktion zu deinem Theme benötigst.

Debut

Schritte für Debut

Die Einzelpreise sind im Debut-Theme für die Versionen 12.1.0 und höher verfügbar. Wenn du dein Theme nicht auf die neueste Version aktualisieren kannst, kannst du in früheren Versionen von Debut eine Einzelpreisanpassung hinzufügen.

Dein Produktpreis-Snippet bearbeiten

1. Klicke im Verzeichnis Snippets auf die Datei product-price.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach data-price suchst:

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

1. Ersetze den Code durch das folgende Snippet:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach price__sale suchst:

<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. Füge den folgenden Code unter dem schließenden Tag </div> hinzu:

{% 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. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Warenkorbseite bearbeiten

1. Klicke im Verzeichnis Abschnitte auf die Datei cart-template.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach cart__price-wrapper suchst:

{%- 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. Ersetze den Code durch das folgende Snippet:

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

Nach der Bearbeitung sollte die Datei cart-template.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Kategorieseite bearbeiten

1. Klicke im Verzeichnis Abschnitte auf die Datei collection.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach grid-view-item__title suchst:

{% include 'product-price' %}

1. Ersetze den Code durch das folgende Snippet:

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

Nach der Bearbeitung sollte die Datei collection.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Dein Produktkartenraster bearbeiten

1. Klicke im Verzeichnis Snippets auf die Datei product-card-grid.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach grid-view-item__title suchst:

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

1. Ersetze den Code durch das folgende Snippet:

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

Nach der Bearbeitung sollte die Datei product-card-grid.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Produktkartenliste bearbeiten

1. Klicke im Verzeichnis Snippets auf die Datei product-card-list.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach {% if product.available %} suchst:

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

1. Ersetze den Code durch das folgende Snippet:

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

Nach der Bearbeitung sollte die Datei product-card-list.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Bestellseite bearbeiten

1. Klicke im Verzeichnis Vorlagen auf die Datei customers/order.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach data-label="{{ 'customer.order.price' | t }}" suchst:

{%- 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. Ersetze den Code durch das folgende Snippet:

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

Nach der Bearbeitung sollte die Datei customers/order.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Theme-Stile bearbeiten

1. Klicke im Verzeichnis Assets auf die Datei theme.scss.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach .price__vendor { suchst:

.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. Füge unter dem Code aus Schritt 2 das folgende Snippet hinzu:

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

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

Nach der Bearbeitung sollte die Datei theme.scss.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deinen JavaScript-Theme-Code bearbeiten

1. Klicke im Verzeichnis Assets auf die Datei theme.js.

2. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

salePrice: '[data-sale-price]'

1. Füge über dem Code aus Schritt 2 das folgende Snippet hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

productOnSale: 'price--on-sale',

1. Füge unter dem Code aus Schritt 4 das folgende Snippet hinzu:

productUnitAvailable: 'price--unit-available',

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

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

1. Ersetze den Code durch das folgende Snippet:

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

1. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

var salePrice = '';

1. Füge unter dem Code aus Schritt 8 das folgende Snippet hinzu:

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. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

.replace('[$]', salePrice)

1. Füge unter dem Code aus Schritt 10 das folgende Snippet hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

_updatePrice: function(evt) {

1. Füge vor dem Code aus Schritt 12 das folgende Snippet hinzu:

_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. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

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

1. Füge unter dem Code aus Schritt 14 das folgende Snippet hinzu:

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

1. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

.removeClass(this.classes.productOnSale)

1. Füge unter dem Code aus Schritt 16 das folgende Snippet hinzu:

.removeClass(this.classes.productUnitAvailable)

1. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

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

1. Füge unter dem Code aus Schritt 18 das folgende Snippet hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine englischen Übersetzungen bearbeiten

1. Klicke im Verzeichnis Gebietsschemas auf die Datei en.default.json.

2. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

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

1. Füge über dem Code aus Schritt 2 das folgende Snippet hinzu:

"unit_price_separator": "per",

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

"include_taxes": "Tax included.",

1. Füge unter dem Code aus Schritt 4 das folgende Snippet hinzu:

"unit_price_label": "Unit price",

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Dein Theme-Layout bearbeiten

1. Klicke im Verzeichnis Layout auf die Datei theme.liquid.

2. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

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

1. Füge unter dem Code aus Schritt 2 das folgende Snippet hinzu:

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

Nach der Bearbeitung sollte die Datei theme.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

(Optional) Übersetzungen für andere Sprachen hinzufügen

1. Rufe in deinem Shopify-Adminbereich die Seite Themes auf.

2. Klicke auf die Schaltfläche ... > Standard-Theme-Texte bearbeiten.

3. Klicke auf Theme-Sprache ändern und wähle dann die Sprache aus, die du bearbeiten möchtest. Dies ist nur für dein veröffentlichtes Theme möglich.

4. Gib Unit Price in das Feld "Suche" ein.

5. Aktualisiere das Feld Einzelpreis-Separator unter Allgemein/Barrierefreiheit.

6. Aktualisiere das Feld Grundpreisetikett unter Produkte/Produkt.

7. Klicke auf Speichern.

Brooklyn

Schritte für Brooklyn

Die Einzelpreise sind im Brooklyn-Theme für die Versionen 13.1.0 und höher verfügbar. Wenn du dein Theme nicht auf die neueste Version aktualisieren kannst, kannst du in früheren Versionen von Brooklyn eine Einzelpreisanpassung hinzufügen.

Hinzufügen eines Produktpreis-Snippets

1. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.

2. Gib product-price in das Feld "Name" ein.

3. Kopiere den folgenden Code und füge ihn in die Datei ein.

<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. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Seite "Vorgestelltes Produkt" bearbeiten

1. Klicke im Verzeichnis Abschnitte auf die Datei featured-product.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach itemprop="offers" suchst:

<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. Ersetze den Code durch das folgende Snippet:

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

Nach der Bearbeitung sollte die Datei featured-product.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Produktseite bearbeiten

1. Klicke im Verzeichnis Abschnitte auf die Datei product-template.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach itemprop="offers" suchst:

<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. Ersetze den Code durch das folgende Snippet:

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

Nach der Bearbeitung sollte die Datei product-template.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deinen AJAX-Warenkorb bearbeiten

1. Öffne im Verzeichnis Snippets die Datei ajax-cart-template.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach <span class="ajaxcart__price">{{{price}}}</span> suchst:

{{#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. Füge den folgenden Code unter {{/if}} aus Schritt 2 hinzu:

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

Nach der Bearbeitung sollte die Datei ajax-cart-template.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deinen Produktrasterartikel bearbeiten

1. Öffne im Verzeichnis Snippets die Datei product-grid-template.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach capture img_id_class suchst:

{% 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. Füge das folgende Snippet vor dem Code aus Schritt 2 hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach {{ product.price | money_without_trailing_zeros }} suchst:

<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. Füge den folgenden Code unter </span> hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Warenkorbseite bearbeiten

1. Klicke im Verzeichnis Vorlagen auf die Datei cart.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach <span class="cart__price"> suchst:

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

Hinweis

Wenn du eine ältere Theme-Version hast, kannst du dieses Snippet möglicherweise nicht finden. Füge in diesem Fall den Code aus Schritt 3 direkt unter dem Element <span class="cart__price"> hinzu.

1. Füge das folgende Snippet unter dem Code aus Schritt 2 hinzu:

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

Nach der Bearbeitung sollte die Datei cart.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Bestellseite bearbeiten

1. Klicke im Verzeichnis Vorlagen auf die Datei customers/order.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach {{ line_item.original_price | money }} suchst:

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

1. Füge vor </td> aus Schritt 2 folgendes Snippet hinzu:

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

Nach der Bearbeitung sollte die Datei customers/order.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Theme-Stile bearbeiten – Teil 1

1. Klicke im Verzeichnis Assets auf die Datei theme.scss.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach .ajaxcart__price { suchst:

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

1. Füge das folgende Snippet unter dem Code aus Schritt 2 hinzu:

.cart__unit-price {
    display: block;
}

Nach der Bearbeitung sollte die Datei theme.scss.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Theme-Stile bearbeiten – Teil 2

1. Klicke im Verzeichnis Assets auf die Datei timber.scss.liquid.

2. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach .product-single__policies { suchst:

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

1. Füge über dem Code aus Schritt 2 das folgende Snippet hinzu:

.product-single__unit {
  display: none;

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Gehe zum Ende der Datei und füge den folgenden Code hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deinen JavaScript-Theme-Code bearbeiten

1. Klicke im Verzeichnis Assets auf die Datei theme.js.liquid.

2. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

var prodImg;

1. Füge das folgende Snippet unter dem Code aus Schritt 2 hinzu:

var unitPrice = null;

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

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

1. Füge über dem Code aus Schritt 4 das folgende Snippet hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

vendor: cartItem.vendor

1. Füge über dem Code aus Schritt 6 das folgende Snippet hinzu:

unitPrice: unitPrice,

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

productPrice: '#ProductPrice',

1. Füge unter dem Code aus Schritt 8 das folgende Snippet hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach $(this.selectors.priceContainer, this.$container).removeClass( suchst:

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

1. Ersetze den Code durch das folgende Snippet:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

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

1. Füge über dem Code aus Schritt 12 das folgende Snippet hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um den folgenden Code zu finden, indem du nach this.destroyImageCarousel(); suchst:

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

1. Füge über dem Code aus Schritt 14 das folgende Snippet hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine englischen Übersetzungen bearbeiten

1. Öffne im Verzeichnis Gebietsschemas die Datei en.default.json.

2. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

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

1. Füge über dem Code aus Schritt 2 das folgende Snippet hinzu:

"unit_price_separator": "per",

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um folgenden Code zu finden:

"include_taxes": "Tax included.",

1. Füge unter dem Code aus Schritt 4 das folgende Snippet hinzu:

"unit_price": "Unit price",

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

(Optional) Übersetzungen für andere Sprachen hinzufügen

1. Rufe in deinem Shopify-Adminbereich die Seite Themes auf.

2. Klicke auf die Schaltfläche ... > Standard-Theme-Texte bearbeiten.

3. Klicke auf Theme-Sprache ändern und wähle dann die Sprache aus, die du bearbeiten möchtest. Dies ist nur für dein veröffentlichtes Theme möglich.

4. Gib Unit Price in das Feld "Suche" ein.

5. Aktualisiere das Feld Grundpreis-Separator unter Allgemein/Barrierefreiheit.

6. Aktualisiere das Feld Einzelpreisetikett unter Produkte/Allgemein.

7. Klicke auf Speichern.

Minimal

Schritte für Minimal

Die Einzelpreise sind im Minimal-Theme für die Versionen 11.2.0 und höher verfügbar. Wenn du dein Theme nicht auf die neueste Version aktualisieren kannst, kannst du in früheren Versionen von Minimal eine Einzelpreisanpassung hinzufügen.

Deine Snippets aktualisieren

1. Suche und erweitere den Ordner Snippets.

2. Wähle Neues Snippet hinzufügen aus.

3. Gib den Namen product-unit-price ein.

4. Kopiere den folgenden Code und füge ihn in product-unit-price.liquid ein.

.

{%- 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. Klicke auf Speichern.

2. Suche und bearbeite die Datei product-grid-item.liquid.

3. Ersetze diese Zeile:

.

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

.

Mit der folgenden Zeile:

.

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

.

1. Verwende die Tastenkombination für die Suche, um {{ price }} zu finden, und füge diesen Code unten hinzu:

.

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

.

Nach der Bearbeitung sollte die Datei product-grid-item.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

2. Suche und bearbeite die Datei search-result.liquid

3. Verwende die Tastenkombination für die Suche, um {% if item.object_type == 'product' %} zu finden, und füge den folgenden Code in der Zeile darunter hinzu:

.

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

.

1. Verwende die Tastenkombination für die Suche, um die folgenden beiden Code-Snippets zu finden:

.

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

.

Und

.

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

.

1. Füge den folgenden Code-Block unter jedem der beiden im vorherigen Schritt aufgeführten Code-Snippets hinzu:

.

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

.

Nach der Bearbeitung sollte die Datei search-result.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Stile aktualisieren

1. Suche und erweitere den Ordner Assets.

2. Bearbeite die Datei theme.scss.liquid.

3. Verwende die Tastenkombination für die Suche, um diesen Code-Abschnitt zu finden:

.

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

.

1. Füge den folgenden Code-Block unter dem Code-Snippet ein, das du im vorherigen Schritt gesucht hast:

.

font-family: $headerFontStack;

.

1. Verwende die Tastenkombination für die Suche, um das folgende Code-Snippets zu finden:

.

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

.

1. Füge den folgenden Code-Block unter dem Code-Snippet ein, das du im vorherigen Schritt gesucht hast:

.

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

.

1. Verwende die Tastenkombination für die Suche, um das folgende Code-Snippets zu finden:

.

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

.

1. Füge den folgenden Code-Block unter dem Code-Snippet ein, das du im vorherigen Schritt gesucht hast:

.

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

.

1. Verwende die Tastenkombination für die Suche, um das folgende Code-Snippets zu finden:

.

.cart__product-title {
  display: inline-block;

.

1. Füge den folgenden Code-Block unter dem Code-Snippet ein, das du im vorherigen Schritt gesucht hast:

.

font-weight: $bodyFontWeightBold;

.

Nach der Bearbeitung sollte die Datei theme.scss.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

2. Suche und bearbeite die Datei timber.scss.liquid.

3. Verwende die Tastenkombination für die Suche, um diesen Code zu finden:

.

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

.

1. Füge den folgenden Code-Block unter dem Code-Snippet ein, das du im vorherigen Schritt gesucht hast:

.

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

.

1. Füge diesen Code am Ende der Datei ein:

.

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

.

Nach der Bearbeitung sollte die Datei timber.scss.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Vorlagen aktualisieren

1. Suche und erweitere den Ordner Vorlagen.

2. Suche und bearbeite die Datei customers/order.liquid.

3. Verwende die Tastenkombination für die Suche, um den Code zu finden:

.

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

.

1. Füge unter dem Code aus Schritt 3 diesen Code hinzu:

.

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

.

Nach der Bearbeitung sollte die Datei customers/order.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Dein JavaScript aktualisieren

1. Suchen und bearbeite theme.js in Assets.

2. Verwende die Tastenkombination für die Suche, um die Zeile zu finden, die .shopify-payment-button enthält, und ersetze diese durch:

.

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

.

Dieser Abschnitt des Codes sollte folgendermaßen aussehen:

1. Suche nach diesem Code:

.

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

.

1. Füge diesen Code darunter hinzu:

.

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

.

Das Ergebnis sollte so aussehen:

1. Verwende die Tastenkombination für die Suche, um diesen Code zu finden:

.

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

.

1. Füge den folgenden Code-Block unter dem Code-Snippet ein, das du im vorherigen Schritt gesucht hast:

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

Das Ergebnis sollte so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Warenkorbvorlage aktualisieren

1. Suche und erweitere den Ordner Abschnitte.

2. Bearbeite die Datei cart-template.liquid.

3. Verwende die Tastenkombination für die Suche, um den Code <span class="order-discount h5">{{ item.final_price | money }}</span> zu finden.

4. Ersetze die Zeile durch diesen Code:

.

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

.

1. Suche nach dem ersten Vorkommen des Codes {%- 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. Füge über dem Code aus Schritt 5 diesen Code-Abschnitt hinzu:

.

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

.

Nach der Bearbeitung sollte die Datei cart-template.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Dein vorgestelltes Produkt aktualisieren

1. Suche und erweitere den Ordner Abschnitte.

2. Bearbeite die Datei featured-product.liquid.

3. Verwende die Tastenkombination für die Suche, um die Zeile mit itemprop="name" zu finden, und ersetze diese durch:

.

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

.

1. Suche den Code, der id="PriceA11y" enthält:

.

{% 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. Füge den folgenden Code-Block unter dem Code-Snippet ein, das du im vorherigen Schritt gesucht hast:

.

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

.

Nach der Bearbeitung sollte die Datei featured-product.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Produktvorlage aktualisieren

1. Suche und erweitere den Ordner Abschnitte.

2. Bearbeite die Datei product-template.liquid.

3. Verwende die Tastenkombination für die Suche, um die Zeile mit itemprop="name" zu finden, und ersetze diese durch:

.

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

.

1. Verwende die Tastenkombination für die Suche, um den Code zu finden:

.

{% 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. Füge diese Zeile darunter hinzu:

.

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

.

Nach der Bearbeitung sollte die Datei product-template.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Gebietsschemas aktualisieren

1. Suche und erweitere den Ordner Gebietsschemas.

2. Öffne und bearbeite die Datei en.default.json.

3. Verwende die Tastenkombination für die Suche, um die Zeile zu finden, die refresh_page enthält, und ersetze diese durch:

.

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

.

Das Ergebnis sollte so aussehen:

1. Suche die Zeile, die full_details enthält, und ersetze diese durch:

.

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

.

Das Ergebnis sollte so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

(Optional) Übersetzungen für andere Sprachen hinzufügen

1. Rufe in deinem Shopify-Adminbereich die Seite Themes auf.

2. Klicke auf die Schaltfläche ... > Standard-Theme-Texte bearbeiten.

3. Klicke auf Theme-Sprache ändernund wähle dann die Sprache aus, die du bearbeiten möchtest. Dies ist nur für dein veröffentlichtes Theme möglich.

4. Gib Unit Price in das Feld "Suche" ein.

5. Aktualisiere das Feld Einzelpreis-Separator unter Allgemein/Barrierefreiheit.

6. Aktualisiere das Feld Einzelpreisetikett unter Produkte/Produkt.

7. Klicke auf Speichern.

Venture

Schritte für Venture

Die Einzelpreise wurden im Venture-Theme für die Versionen 9.4.0 und höher hinzugefügt. Wenn du dein Theme nicht auf die neueste Version aktualisieren kannst, befolge diese Schritte, um die Einzelpreisanpassung auf frühere Versionen von Venture anzuwenden.

Sprachdatei deines Themes bearbeiten

1. Klicke im Verzeichnis Gebietsschemas auf en.default.json.

2. Verwende die Tastenkombination für die Suche, um die Zeile mit refresh_page zu finden:

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

1. Füge den folgenden Code über der in Schritt 2 ermittelten Zeile hinzu:

"unit_price_separator": "per",

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um die Zeile mit stock_unavailable zu finden:

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

1. Füge den folgenden Code über der in Schritt 4 ermittelten Zeile hinzu:

"unit_price_label": "Unit price",

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Stylesheet deines Themes bearbeiten

1. Klicke in der Übersicht Assets auf theme.scss.liquid.

2. Verwende die Tastenkombination für die Suche, um die Zeile .product-single__policies { zu finden:

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

1. Füge den folgenden Code unter dem schließenden Tag } des Code-Blocks aus Schritt 2 hinzu:

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

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

Nach der Bearbeitung sollte die Datei theme.scss.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Einzelpreis-Snippet für ein Produkt hinzufügen

1. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.

2. Gib den Namen product-unit-price ein.

3. Füge den folgenden Code in product-unit-price.liquid ein:

<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. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Produktkarten-Snippet bearbeiten

1. Klicke im Verzeichnis Snippets auf product-card.liquid.

2. Verwende die Tastenkombination für die Suche, um die Zeile <a href="{{ product.url | within: collection }}" zu finden.

3. Füge den folgenden Code über der in Schritt 2 ermittelten Zeile hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um die Zeile <div class="product-card__price"> zu finden:

<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. Füge den folgenden Code über dem schließenden Tag </div> aus Schritt 5 hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Vorlage für deine Warenkorbseite bearbeiten

1. Klicke in der Übersicht Abschnitte auf cart-template.liquid.

2. Verwende die Tastenkombination für die Suche, um die erste Instanz von <td class="cart__cell--total"> zu finden:

<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. Füge den folgenden Code unter dem in Schritt 2 ermittelten Tag endif hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um die zweite Instanz von <td class="cart__cell--total"> zu finden:

<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. Füge den folgenden Code unter dem zweiten schließenden Tag {{/if}} aus Schritt 4 hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Seitenvorlage für dein vorgestelltes Produkt bearbeiten

1. Klicke in der Übersicht Abschnitte auf featured-product.liquid.

2. Verwende die Tastenkombination für die Suche, um die Zeile {% assign current_variant = product.selected_or_first_available_variant %} zu finden.

3. Füge den folgenden Code unter der in Schritt 2 ermittelten Zeile hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um die Zeile mit <ul class="product-single__meta-list zu finden:

<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. Suche unter diesem Tag ul nach dem Code {% if section.settings.stock_enable %}.

2. Füge den folgenden Code über dem in Schritt 6 ermittelten Block if hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Die Vorlage deiner Produktseite bearbeiten

1. Klicke in der Übersicht Abschnitte auf product-template.liquid.

2. Verwende die Tastenkombination für die Suche, um die Zeile {% assign current_variant = product.selected_or_first_available_variant %} zu finden.

3. Füge den folgenden Code unter der in Schritt 2 ermittelten Zeile hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um die Zeile mit <ul class="product-single__meta-list zu finden:

<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. Suche unter diesem Tag ul nach dem Code {% if section.settings.stock_enable %}.

2. Füge den folgenden Code über dem in Schritt 5 ermittelten Block if hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Bestellvorlagen deiner Kunden bearbeiten

1. Klicke im Verzeichnis Vorlagen auf customers/order.liquid.

2. Verwende die Tastenkombination für die Suche, um die Zeile <td class="text-right" data-label="{{ 'customer.order.price' | t }}"> zu finden:

<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. Ersetze den in Schritt 2 gefundenen Code durch den folgenden Code:

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

Nach der Bearbeitung sollte die Datei customers/order.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Bearbeite die JavaScript-Datei deines Themes

1. Klicke in der Übersicht Assets auf theme.js.

2. Verwende die Tastenkombination für die Suche, um die Zeile // Create item's data object and add to 'items' array zu finden.

3. Füge den folgenden Code über der in Schritt 2 ermittelten Zeile hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um diese Zeile zu finden: vendor: cartItem.vendor,

2. Füge den folgenden Code unter der in Schritt 4 ermittelten Zeile hinzu:

unitPrice: unitPrice,

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um die Zeile shopifyPaymentButton: '.shopify-payment-button' zu finden.

2. Ersetze die in Schritt 6 gefundene Zeile durch den folgenden Code:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um die Zeile _updateSKU: function(evt) { zu finden.

2. Füge den folgenden Code über der in Schritt 8 ermittelten Zeile hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um die Zeile this._updateIncomingInfo(variant); zu finden:

} 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. Füge den folgenden Code unter dem schließenden Tag } aus Schritt 10 hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

(Optional) Übersetzungen für andere Sprachen hinzufügen

1. Rufe in deinem Shopify-Adminbereich die Seite Themes auf.

2. Klicke auf die Schaltfläche ... > Standard-Theme-Texte bearbeiten.

3. Klicke auf Theme-Sprache ändern und wähle die Sprache aus, die du bearbeiten möchtest. Das ist nur für dein veröffentlichtes Theme möglich.

4. Gib Unit Price in das Feld "Suche" ein.

5. Aktualisiere das Feld Grundpreis-Separator unter Allgemein/Barrierefreiheit.

6. Aktualisiere das Feld Einzelpreisetikett unter Produkte/Produkt.

7. Klicke auf Speichern.

Supply

Schritte für Supply

Die Einzelpreise wurden dem Supply-Theme für die Versionen 8.3.0 und höher hinzugefügt. Wenn du dein Theme nicht auf die neueste Version aktualisieren kannst, führst du die folgenden Schritte aus, um die Einzelpreisanpassung auf frühere Versionen von Supply anzuwenden.

Einzelpreis-Snippet für ein Produkt hinzufügen

1. Suche und erweitere den Ordner Snippets.

2. Wähle Neues Snippet hinzufügen aus.

3. Gib den Namen product-unit-price ein.

4. Kopiere den folgenden Code, füge ihn in die Datei ein und wähle Speichern.

.

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

.

Nach der Bearbeitung sollte die Datei product-unit-price.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Vorlage für dein vorgestelltes Produkt bearbeiten

1. Suchen und erweiter den Ordner Abschnitte und wähle dann die Datei featured-product.liquid aus.

2. Verwende die Tastenkombination für die Suche, um die Zeile {% include 'price' with price %} in der Datei zu finden:

.

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

.

1. Füge den folgenden Code unter dem schließenden Tag </span> des Snippets aus Schritt 2 hinzu:

.

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

.

Nach der Bearbeitung sollte die Datei featured-product.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Produktvorlage bearbeiten

1. Suchen und erweiter den Ordner Abschnitte und wähle dann die Datei product-template.liquid aus.

2. Verwende die Tastenkombination für die Suche, um die Zeile {% include 'price' with variant.price %} in der Datei zu finden:

.

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

.

1. Füge den folgenden Code unter dem schließenden Tag </span> aus Schritt 2 hinzu:

.

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

.

Nach der Bearbeitung sollte die Datei product-template.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Dein Produktrasterartikel-Snippet bearbeiten

1. Suchen und erweiter den Ordner Snippets und wähle die Datei product-grid-item.liquid aus.

2. Verwende die Tastenkombination für die Suche, um die Zeile {% if on_sale and section.settings.product_show_saved_amount %} in der Datei zu finden:

.

{% 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. Ersetze den Code durch das folgende Snippet:

.

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

.

Nach der Bearbeitung sollte die Datei product-grid-item.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Dein Produktlistenartikel-Snippet bearbeiten

1. Suchen und erweiter den Ordner Snippets und wähle die Datei product-list-item.liquid aus.

2. Verwende die Tastenkombination für die Suche, um die Zeile <div class="product-item--price text-center"> in der Datei zu finden:

.

<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. Ersetze den Code durch das folgende Snippet:

.

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

.

Nach der Bearbeitung sollte die Datei product-list-item.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Dein Suchergebnisraster-Snippet bearbeiten

1. Suchen und erweiter den Ordner Snippets und wähle die Datei search-result-grid.liquid aus.

2. Verwende die Tastenkombination für die Suche, um die Zeile {% if on_sale and section.settings.product_show_saved_amount %} in der Datei zu finden:

.

{% 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. Ersetze den Code durch das folgende Snippet:

.

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

.

Nach der Bearbeitung sollte die Datei search-result-grid.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Warenkorbvorlage bearbeiten

1. Suchen und erweiter den Ordner Vorlagen und wähle dann die Datei cart.liquid aus.

2. Verwende die Tastenkombination für die Suche, um die Zeile <del class="cart-original-price order-discount--cart-price"> in der Datei zu finden:

.

<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. Ersetze den Code durch das folgende Snippet:

.

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

.

Nach der Bearbeitung sollte die Datei cart.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Bestellvorlage bearbeiten

1. Suchen und erweiter den Ordner Vorlagen und wähle dann die Datei customers/order.liquid aus.

2. Verwende die Tastenkombination für die Suche, um die Zeile <td class="text-right" data-label="customer.order.price"> in der Datei zu finden:

.

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

.

1. Füge den folgenden Code über dem schließenden Tag </td> aus Schritt 2 hinzu:

.

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

.

Nach der Bearbeitung sollte die Datei customers/order.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Dein Theme-Layout bearbeiten

1. Suche und erweitere den Ordner Layout. Wähle dann die Datei theme.liquid aus.

2. Verwende die Tastenkombination für die Suche, um die Zeile mit only_left: in der Datei zu finden:

.

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. Füge den folgenden Code über only_left:{{ 'products.product.only_left' | t: count: '1' | json }} aus Schritt 2 hinzu:

.

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

.

Nach der Bearbeitung sollte die Datei theme.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deine Theme-Stile bearbeiten

1. Suchen und erweiter den Ordner Abschnitte und wähle dann die Datei theme.scss.liquid aus.

2. Verwende die Tastenkombination für die Suche, um die Zeile .product-item--price { in der Datei zu finden:

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

1. Ersetze den Code durch das folgende Snippet:

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

Nach der Bearbeitung sollte die Datei theme.scss.liquid so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Deinen JavaScript-Theme-Code bearbeiten

1. Suche und erweitere den Ordner Assets und wähle die Datei theme.js.liquid aus.

2. Verwende die Tastenkombination für die Suche, um die Zeile originalSelectorId: 'productSelect-' + sectionId, in der Datei zu finden:

.

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. Füge den folgenden Code über originalSelectorId: 'productSelect-' + sectionId, aus Schritt 2 hinzu:

.

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

.

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um die Zeile productVariantCallback: function(variant) { in der Datei zu finden:

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. Füge den folgenden Code unter if (variant) { aus Schritt 2 hinzu:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um die Zeile customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; in der Datei zu finden:

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. Ersetze die Zeile customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; durch das folgende Snippet:

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

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um die Zeile $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide(); in der Datei zu finden:

} 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. Füge unter dem Snippet aus Schritt 11 den folgenden Code hinzu:

},

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;

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

Sprachdatei deines Themes bearbeiten

1. Suche den Ordner Gebietsschemas, erweitere ihn und wählee die Datei en.default.json aus.

2. Verwende die Tastenkombination für die Suche, um die Zeile mit "refresh_page" in der Datei zu finden:

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

1. Füge den folgenden Code über "refresh_page" aus Schritt 2 hinzu:

"unit_price_separator": "per",

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Verwende die Tastenkombination für die Suche, um die Zeile mit "will_be_in_stock_after" in der Datei zu finden:

"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. Füge nach "will_be_in_stock_after" aus Schritt 5 folgenden Code hinzu:

"unit_price_label": "Unit price",

Nach der Bearbeitung sollte das Ergebnis so aussehen:

1. Klicke auf Speichern, um deine Änderungen zu übernehmen.

(Optional) Übersetzungen für andere Sprachen hinzufügen

1. Rufe die Seite Themes in deinem Shopify-Adminbereich auf.

2. Klicke auf die Schaltfläche ... > Standard-Theme-Texte bearbeiten.

3. Klicke auf Theme-Sprache ändernund wähle die Sprache aus, die du bearbeiten möchtest. Dies ist nur für dein veröffentlichtes Theme möglich.

4. Suche in der Eingabeleiste nach Unit Price .

5. Aktualisiere das Feld Grundpreis-Separator unter Allgemein/Barrierefreiheit.

6. Aktualisiere das Feld Grundpreisetikett unter Produkte/Produkt.

7. Klicke auf Speichern.

Preis pro Einheit in deinen Bestellbenachrichtigungen anzeigen

Wenn du deinem Produkt einen Preis pro Einheit hinzugefügt hast, dieser jedoch nicht in deinem Bestellbenachrichtigungen angezeigt wird, musst du möglicherweise deine Vorlage für Bestellbenachrichtigungen aktualisieren.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Einstellungen > Benachrichtigungen.

2. Klicke auf Bestellbestätigung.

3. Füge der Vorlage das folgende Snippet hinzu:

{%- 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. Klicke auf Speichern.