Grundpreis anzeigen

Hinweis

Grundpreise stehen derzeit nur Händlern zur Verfügung, die ihre Produkte in der Europäischen Union (EU) und in der Schweiz verkaufen. Wenn du deine Produkte in der EU oder in der Schweiz verkaufst, dein Unternehmen jedoch nicht in der EU oder in der Schweiz ansässig ist, wende dich an den Shopify Support, um diese Funktion zu aktivieren.

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 Grundpreis für ein Produkt eingibst, wird dieser auf den Produktseiten, den Kollektionsseiten, 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 das Produkt, das du bearbeiten möchtest.

3. Optional: Wenn dein Produkt Varianten hat, klicke im Abschnitt Varianten auf die Variante, die du bearbeiten möchtest.

4. Wähle im Abschnitt Preisgestaltung die Option Grundpreis für dieses Produkt anzeigen aus.

5. Gib im Feld Maße gesamtes Produkt die Gesamtmaße des Produkts ein und wähle dann die Maßeinheit aus.

6. Optional: Wenn du die Standard-Basiseinheit ändern möchtest, füge im Feld Basiseinheit deine neue Basiseinheit hinzu und wähle dann eine Maßeinheit aus. Du kannst beispielsweise für ein Produkt mit einem Gewicht von 200 g eine Basiseinheit von 1 kg auswählen.

7. Klicke auf Speichern.

iPhone

1. Gib in der Shopify App auf Produkte > Alle Produkte.
2. Tippe auf das Produkt, das du bearbeiten möchtest.
3. Tippe auf den Bereich mit dem Produktpreis.
4. Wähle Grundpreis anzeigen aus.
5. Gib im Feld Maße gesamtes Produkt die Gesamtmaße des Produkts ein und wähle dann die Maßeinheit aus.
6. Optional: Wenn du die Standard-Basiseinheit ändern möchtest, füge im Feld Basiseinheit deine neue Basiseinheit hinzu und wähle dann eine Maßeinheit aus. Du kannst beispielsweise für ein Produkt mit einem Gewicht von 200 g eine Basiseinheit von 1 kg auswählen.
7. Tippe auf Speichern.

Android

1. Gib in der Shopify App auf Produkte > Alle Produkte.
2. Tippe auf das Produkt, das du bearbeiten möchtest.
3. Tippe auf den Bereich mit dem Produktpreis.
4. Wähle Grundpreis anzeigen aus.
5. Gib im Feld Maße gesamtes Produkt die Gesamtmaße des Produkts ein und wähle dann die Maßeinheit aus.
6. Optional: Wenn du die Standard-Basiseinheit ändern möchtest, füge im Feld Basiseinheit deine neue Basiseinheit hinzu und wähle dann eine Maßeinheit aus. Du kannst beispielsweise für ein Produkt mit einem Gewicht von 200 g eine Basiseinheit von 1 kg auswählen.
7. Tippe auf ✓.

Grundpreise in deinem Onlineshop anzeigen

Die Stückpreisfunktion ist bereits in allen Onlineshop 2.0-Themes verfügbar. Es ist keine Aktion erforderlich, um einen Stückpreis in deinem Onlineshop anzuzeigen.

Wenn du ein Vintage-Theme hast und es nicht auf eine Version aktualisieren kannst, die die Grundpreisfunktion unterstützt, kannst du deinen Theme-Code manuell anpassen, um den Grundpreis anzuzeigen.

Grundpreise in einem Vintage-Theme anzeigen

Achtung

Erstelle eine Sicherung deines Themes, bevor du damit beginnst, den Code zu bearbeiten. Die folgenden Anweisungen wurden erweitert. Wenn du Hilfe dabei benötigst, diese Funktion zu deinem Theme hinzuzufügen, kannst du dir Hilfe bei Anpassungen holen.

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:

Debut

Schritte für Debut

Die Grundpreise 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 Grundpreisanpassung 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 cart-template.liquid-Datei so aussehen:

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

Deine Kollektionsseite 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 collection.liquid-Datei 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 product-card-grid.liquid-Datei 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 product-card-list.liquid-Datei 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 customers/order.liquid-Datei 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 theme.scss.liquid-Datei 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 theme.liquid-Datei 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 ä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 Grundpreisetikett unter Produkte/Produkt.

7. Klicke auf Speichern.

Brooklyn

Schritte für Brooklyn

Die Grundpreise 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 Grundpreisanpassung 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 featured-product.liquid-Datei 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 product-template.liquid-Datei so aussehen:

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

Deinen AJAX-Warenkorb bearbeiten

1. Klicke im Verzeichnis Snippets auf 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 ajax-cart-template.liquid-Datei so aussehen:

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

Deinen Produktrasterartikel bearbeiten

1. Klicke im Verzeichnis Snippets auf 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

1. Füge unter dem Code aus Schritt 2 das folgende Snippet 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 cart.liquid-Datei 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 customers/order.liquid-Datei 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 unter dem Code aus Schritt 2 das folgende Snippet hinzu:

.cart__unit-price {
    display: block;
}

Nach der Bearbeitung sollte die theme.scss.liquid-Datei 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 unter dem Code aus Schritt 2 das folgende Snippet 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. Klicke im Verzeichnis Gebietsschemas auf 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 die Seite Themes in deinem Shopify-Adminbereich 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 Grundpreisetikett unter Produkte/Allgemein.

7. Klicke auf Speichern.

Minimal

Schritte für Minimal

Die Grundpreise 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 Grundpreisanpassung 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 product-grid-item.liquid-Datei 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 search-result.liquid-Datei 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 theme.scss.liquid-Datei 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 timber.scss.liquid-Datei 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 customers/order.liquid-Datei 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 cart-template.liquid-Datei 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 featured-product.liquid-Datei 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 product-template.liquid-Datei 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 die Seite Themes in deinem Shopify-Adminbereich 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 Grundpreisetikett unter Produkte/Produkt.

7. Klicke auf Speichern.

Venture

Schritte für Venture

Die Grundpreise 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 Grundpreisanpassung 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 im Verzeichnis 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 theme.scss.liquid-Datei so aussehen:

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

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

Deine Vorlage für die 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.

Bearbeite die Vorlage deiner vorgestellten Produktseite

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 customers/order.liquid-Datei so aussehen:

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

Bearbeitee die JavaScript-Datei deines Themes

1. Klicke im Verzeichnis 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 die Seite Themes in deinem Shopify-Adminbereich 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 Grundpreisetikett unter Produkte/Produkt.

7. Klicke auf Speichern.

Supply

Schritte für Supply

Stückpreise wurden ab Version 8.3.0 zum Theme "Supply" hinzugefügt. Wenn du dein Theme nicht auf die neueste Version aktualisieren kannst, führst du die folgenden Schritte aus, um die Stückpreisanpassung auf frühere Versionen von Supply anzuwenden.

Grundpreis-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 product-unit-price.liquid-Datei 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 featured-product.liquid-Datei 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 product-template.liquid-Datei 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 product-grid-item.liquid-Datei 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 product-list-item.liquid-Datei 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 search-result-grid.liquid-Datei 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 cart.liquid-Datei 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 customers/order.liquid-Datei 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 theme.liquid-Datei 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 theme.scss.liquid-Datei 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');
}</code></pre></figure><ol>
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:


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

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:


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

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:


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

Sprachdatei deines Themes bearbeiten

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

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

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

"unit_price_separator": "per",
Nach der Bearbeitung sollte das Ergebnis so aussehen:


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

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:


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

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

Rufe die Seite Themes in deinem Shopify-Adminbereich auf.

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

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.

Suche in der Eingabeleiste nach Unit Price .

Aktualisiere das Feld Grundpreis-Separator unter Allgemein/Barrierefreiheit.

Aktualisiere das Feld Grundpreisetikett unter Produkte/Produkt.

Klicke auf Speichern.

Grundpreise in deinen Bestellbenachrichtigungen anzeigen

Standardmäßig wird in der Bestellbestätigungsbenachrichtigung ein Grundpreis angezeigt, wenn die Funktion aktiviert ist.

Wenn du deinem Produkt Stückpreise hinzugefügt hast, diese jedoch nicht in deinen Bestellbestätigungen angezeigt werden, musst du möglicherweise deine Vorlage manuell aktualisieren.

Schritte:

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

2. Klicke im Abschnitt Bestellungen auf Bestellbestätigung.

3. Klicke auf Code bearbeiten.

4. Füge das folgende Snippet zur Vorlage innerhalb der Klasse "order-list__item-price" hinzu:

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

Tipp

Gib in deinem Shop eine Testbestellung auf, um zu überprüfen, ob in der Bestellbenachrichtigung der Stückpreis angezeigt wird.