Preis pro Einheit anzeigen

Hinweis: Der Preis pro Einheit steht nur Händlern in Deutschland und Frankreich zur Verfügung.

Wenn Sie Produkte in größeren Mengen oder Maßen verkaufen, müssen Sie möglicherweise für bestimmte Produkte den Preis pro Einheit anzeigen. Wenn Sie einen Preis pro Einheit für ein Produkt eingeben, 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

Preis pro Einheit in Ihrem Onlineshop anzeigen

Die Schritte für diese Anpassung variieren je nach Ihrem Theme. Klicken Sie auf die Schaltfläche für Ihr Theme, bevor Sie die nachstehenden Anweisungen befolgen:

Schritte für Minimal

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

Ihre Snippets aktualisieren

  1. Suchen und erweitern Sie den Ordner Snippets.

  2. Wählen Sie Neues Snippet hinzufügen aus.

  3. Geben Sie den Namen product-unit-price ein.

  4. Kopieren Sie den folgenden Code und fügen Sie 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. Klicken Sie auf Speichern.

  2. Suchen und bearbeiten Sie die Datei product-grid-item.liquid.

  3. Ersetzen Sie diese Zeile:

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

Mit der folgenden Zeile:

{%- assign price = featured.price | money -%}
  1. Verwenden Sie die Tastenkombination für die Suche, um {{ price }} zu finden, und fügen Sie 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:

Die aktualisierte Version der Datei product-grid-item.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

  2. Suchen und bearbeiten Sie die Datei search-result.liquid

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

{%- assign variant = item.selected_or_first_available_variant -%}
  1. Verwenden Sie 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ügen Sie 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:

Die aktualisierte Version der Datei search-result.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihre Stile aktualisieren

  1. Suchen und erweitern Sie den Ordner Assets.

  2. Bearbeiten Sie die Datei theme.scss.liquid.

  3. Verwenden Sie 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ügen Sie den folgenden Code-Block unter dem Code-Snippet ein, das Sie im vorherigen Schritt gesucht haben:
font-family: $headerFontStack;
  1. Verwenden Sie 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ügen Sie den folgenden Code-Block unter dem Code-Snippet ein, das Sie im vorherigen Schritt gesucht haben:
.grid-link__unit-price {
    font-size: 1em;
  }
  1. Verwenden Sie 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ügen Sie den folgenden Code-Block unter dem Code-Snippet ein, das Sie im vorherigen Schritt gesucht haben:
.order-discount--price {
    margin-bottom: 0;
  }
  1. Verwenden Sie die Tastenkombination für die Suche, um das folgende Code-Snippets zu finden:
.cart__product-title {
    display: inline-block;
  1. Fügen Sie den folgenden Code-Block unter dem Code-Snippet ein, das Sie im vorherigen Schritt gesucht haben:
font-weight: $bodyFontWeightBold;

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

Die aktualisierte Version der Datei theme.scss.liquid – Teil 1
Die aktualisierte Version der Datei theme.scss.liquid – Teil 2
Die aktualisierte Version der Datei theme.scss.liquid – Teil 3

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

  2. Suchen und bearbeiten Sie die Datei timber.scss.liquid.

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

.quantity-selector {
      display: inline-block;
    }
  }
  1. Fügen Sie den folgenden Code-Block unter dem Code-Snippet ein, das Sie im vorherigen Schritt gesucht haben:
.product-single__title {
    font-weight: $bodyFontWeightBold;
  }
  1. Fügen Sie 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:

Die aktualisierte Version der Datei timber.scss.liquid – Teil 1
Die aktualisierte Version der Datei timber.scss.liquid – Teil 2

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihre Vorlagen aktualisieren

  1. Suchen und erweitern Sie den Ordner Vorlagen.

  2. Suchen und bearbeiten Sie die Datei customers/order.liquid.

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

{%- else -%}
    {{ line_item.original_price | money }}
  {%- endif -%}
  1. Fügen Sie 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:

Die aktualisierte Version der Datei order.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihr JavaScript aktualisieren

  1. Suchen und bearbeiten Sie theme.js in Assets.

  2. Verwenden Sie die Tastenkombination für die Suche, um die Zeile zu finden, die .shopify-payment-button enthält, und ersetzen Sie 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:

Die aktualisierte Version der Datei theme.js

  1. Suchen Sie nach diesem Code:
else {
    this.selectors.$comparePrice.addClass('hide').html('');
    this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
  }
  1. Fügen Sie 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:

Die aktualisierte Version der Datei theme.js

  1. Verwenden Sie die Tastenkombination für die Suche, um diesen Code zu finden:
.attr('data-zoom')
    });
  });
  1. Fügen Sie den folgenden Code-Block unter dem Code-Snippet ein, das Sie im vorherigen Schritt gesucht haben:
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:

Die aktualisierte Version der Datei theme.js

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihre Warenkorbvorlage aktualisieren

  1. Suchen und erweitern Sie den Ordner Abschnitte.

  2. Bearbeiten Sie die Datei cart-template.liquid.

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

  4. Ersetzen Sie die Zeile durch diesen Code:

<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>
  1. Suchen Sie 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ügen Sie ü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:

Die aktualisierte Version der Datei cart-template.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihr vorgestelltes Produkt aktualisieren

  1. Suchen und erweitern Sie den Ordner Abschnitte.

  2. Bearbeiten Sie die Datei featured-product.liquid.

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

<h1 class="product-single__title" itemprop="name">{{ title }}</h1>
  1. Suchen Sie 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ügen Sie den folgenden Code-Block unter dem Code-Snippet ein, das Sie im vorherigen Schritt gesucht haben:
{% include 'product-unit-price', variant: variant, available: true %}

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

Die aktualisierte Version der Datei featured-product.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihre Produktvorlage aktualisieren

  1. Suchen und erweitern Sie den Ordner Abschnitte.

  2. Bearbeiten Sie die Datei product-template.liquid.

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

<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
  1. Verwenden Sie 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ügen Sie diese Zeile darunter hinzu:
{% include 'product-unit-price', variant: variant, available: true %}

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

Die aktualisierte Version der Datei product-template.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Gebietsschemas aktualisieren

  1. Suchen und erweitern Sie den Ordner Gebietsschemas.

  2. Öffnen und bearbeiten Sie die Datei en.default.json.

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

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

Das Ergebnis sollte so aussehen:

Die aktualisierte Version der Datei en.default.json

  1. Suchen Sie die Zeile, die full_details enthält, und ersetzen Sie diese durch:
"full_details": "Full details",
  "unit_price_label": "Unit price"

Das Ergebnis sollte so aussehen:

Die aktualisierte Version der Datei en.default.json

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

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

  1. Rufen Sie in Ihrem Shopify-Adminbereich die Seite Themes auf.

  2. Klicken Sie auf Aktion > Sprachen bearbeiten.

  3. Klicken Sie auf Theme-Sprache ändern und wählen Sie die Sprache aus, die Sie ändern möchten (dies ist nur für Ihr veröffentlichtes Theme möglich).

Schaltfläche

  1. Geben Sie Unit Price in das Feld "Suche" ein.

  2. Aktualisieren Sie das Feld Einzelpreis-Separator unter Allgemein/Barrierefreiheit.

  3. Aktualisieren Sie das Feld Einzelpreisetikett unter Produkte/Produkt.

Aktualisierte Felder

Schritte für Venture

Die Einzelpreise wurden im Venture-Theme für die Versionen 9.4.0 und höher hinzugefügt. Wenn Sie Ihr Theme nicht auf die neueste Version aktualisieren können, befolgen Sie diese Schritte, um die Einzelpreisanpassung auf frühere Versionen von Venture anzuwenden.

Sprachdatei Ihres Themes bearbeiten

  1. Klicken Sie im Verzeichnis Gebietsschemas auf en.default.json.

  2. Verwenden Sie 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ügen Sie den folgenden Code über der in Schritt 2 ermittelten Zeile hinzu:
"unit_price_separator": "per",

Nach der Bearbeitung sollte das Ergebnis so aussehen:

Die aktualisierte Version der Datei en.default.json

  1. Verwenden Sie 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ügen Sie den folgenden Code über der in Schritt 4 ermittelten Zeile hinzu:
"unit_price_label": "Unit price",

Nach der Bearbeitung sollte das Ergebnis so aussehen:

Die aktualisierte Version der Datei en.default.json

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Stylesheet Ihres Themes bearbeiten

  1. Klicken Sie in der Übersicht Assets auf theme.scss.liquid.

  2. Verwenden Sie 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ügen Sie 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:

Die aktualisierte Version der Datei theme.scss.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Einzelpreis-Snippet für ein Produkt hinzufügen

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

  2. Geben Sie den Namen product-unit-price ein.

  3. Fügen Sie 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. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Produktkarten-Snippet bearbeiten

  1. Klicken Sie im Verzeichnis Snippets auf product-card.liquid.

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

  3. Fügen Sie 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:

Die aktualisierte Version der Datei product-card.liquid

  1. Verwenden Sie 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ügen Sie 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:

Die aktualisierte Version der Datei product-card.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Vorlage für Ihre Warenkorbseite bearbeiten

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

  2. Verwenden Sie 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ügen Sie 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:

Die aktualisierte Version der Datei cart-template.liquid

  1. Verwenden Sie 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ügen Sie 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:

Die aktualisierte Version der Datei cart-template.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Seitenvorlage für Ihr vorgestelltes Produkt bearbeiten

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

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

  3. Fügen Sie 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:

Die aktualisierte Version der Datei featured-product.liquid

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

  2. Fügen Sie 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:

Aktualisierte Version der Datei featured-product.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Die Vorlage Ihrer Produktseite bearbeiten

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

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

  3. Fügen Sie 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:

Aktualisierte Version der Datei product-template.liquid

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

  2. Fügen Sie 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:

Aktualisierte Version der Datei product-template.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Bestellvorlagen Ihrer Kunden bearbeiten

  1. Klicken Sie im Verzeichnis Vorlagen auf customers/order.liquid.

  2. Verwenden Sie 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. Ersetzen Sie 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:

Aktualisierte Version der Datei customers/order.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Bearbeiten Sie die JavaScript-Datei Ihres Themes

  1. Klicken Sie in der Übersicht Assets auf theme.js.

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

  3. Fügen Sie 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:

Aktualisierte Version der Datei theme.js

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

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

unitPrice: unitPrice,

Nach der Bearbeitung sollte das Ergebnis so aussehen:

Aktualisierte Version der Datei theme. js

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

  2. Ersetzen Sie 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:

Aktualisierte Version der Datei theme. js

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

  2. Fügen Sie 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:

Aktualisierte Version der Datei theme. js

  1. Verwenden Sie 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ügen Sie 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:

Aktualisierte Version der Datei theme. js

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

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

  1. Rufen Sie in Ihrem Shopify-Adminbereich die Seite Themes auf.

  2. Klicken Sie auf Aktion > Sprachen bearbeiten.

  3. Klicken Sie auf Theme-Sprache ändern und wählen Sie die Sprache aus, die Sie ändern möchten (dies ist nur für Ihr veröffentlichtes Theme möglich).

Sprachauswahl für Themes

  1. Geben Sie Unit Price in das Feld "Suche" ein.

  2. Aktualisieren Sie das Feld Einzelpreis-Separator unter Allgemein/Barrierefreiheit.

  3. Aktualisieren Sie das Feld Einzelpreisetikett unter Produkte/Produkt.

Aktualisierte Übersetzungen für Grundpreise

Schritte für Supply

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

Einzelpreis-Snippet für ein Produkt hinzufügen

  1. Suchen und erweitern Sie den Ordner Snippets.

  2. Wählen Sie Neues Snippet hinzufügen aus.

  3. Geben Sie den Namen product-unit-price ein.

  4. Kopieren Sie den folgenden Code, fügen Sie ihn in die Datei ein und wählen Sie 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:

Die aktualisierte Version der Datei product-unit-price.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Vorlage für Ihr vorgestelltes Produkt bearbeiten

  1. Suchen und erweitern Sie den Ordner Abschnitte und wählen Sie dann die Datei featured-product.liquid aus.

  2. Verwenden Sie 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ügen Sie 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:

Die aktualisierte Version der Datei featured-product.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihre Produktvorlage bearbeiten

  1. Suchen und erweitern Sie den Ordner Abschnitte und wählen Sie dann die Datei product-template.liquid aus.

  2. Verwenden Sie 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ügen Sie 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:

Die aktualisierte Version der Datei product-template.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihr Produktrasterartikel-Snippet bearbeiten

  1. Suchen und erweitern Sie den Ordner Snippets und wählen Sie die Datei product-grid-item.liquid aus.

  2. Verwenden Sie 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. Ersetzen Sie 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:

Die aktualisierte Version der Datei product-grid-item.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihr Produktlistenartikel-Snippet bearbeiten

  1. Suchen und erweitern Sie den Ordner Snippets und wählen Sie die Datei product-list-item.liquid aus.

  2. Verwenden Sie 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. Ersetzen Sie 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:

Die aktualisierte Version der Datei product-list-item.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihr Suchergebnisraster-Snippet bearbeiten

  1. Suchen und erweitern Sie den Ordner Snippets und wählen Sie die Datei search-result-grid.liquid aus.

  2. Verwenden Sie 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. Ersetzen Sie 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:

Die aktualisierte Version der Datei search-result-grid.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihre Warenkorbvorlage bearbeiten

  1. Suchen und erweitern Sie den Ordner Vorlagen und wählen Sie dann die Datei cart.liquid aus.

  2. Verwenden Sie 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. Ersetzen Sie 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:

Die aktualisierte Version der Datei cart.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihre Bestellvorlage bearbeiten

  1. Suchen und erweitern Sie den Ordner Vorlagen und wählen Sie dann die Datei customers/order.liquid aus.

  2. Verwenden Sie 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ügen Sie 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:

Die aktualisierte Version der Datei customers/order.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihr Theme-Layout bearbeiten

  1. Suchen und erweitern Sie den Ordner Layout. Wählen Sie dann die Datei theme.liquid aus.

  2. Verwenden Sie 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ügen Sie 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:

Die aktualisierte Version der Datei theme.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihre Theme-Stile bearbeiten

  1. Suchen und erweitern Sie den Ordner Abschnitte und wählen Sie dann die Datei theme.scss.liquid aus.

  2. Verwenden Sie 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. Ersetzen Sie 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:

Die aktualisierte Version der Datei theme.scss.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Ihren JavaScript-Theme-Code bearbeiten

  1. Suchen und erweitern Sie den Ordner Assets und wählen Sie die Datei theme.js.liquid aus.

  2. Verwenden Sie 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ügen Sie 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:

Die aktualisierte Version der Datei theme.js.liquid

  1. Verwenden Sie 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ügen Sie 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:

Die aktualisierte Version der Datei theme.js.liquid

  1. Verwenden Sie 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. Ersetzen Sie 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:

Die aktualisierte Version der Datei theme.js.liquid

  1. Verwenden Sie 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ügen Sie 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:

Die aktualisierte Version der Datei theme.js.liquid

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

Sprachdatei Ihres Themes bearbeiten

  1. Suchen Sie den Ordner Gebietsschemas, erweitern Sie ihn und wählen Sie die Datei en.default.json aus.

  2. Verwenden Sie 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ügen Sie den folgenden Code über "refresh_page" aus Schritt 2 hinzu:
"unit_price_separator": "per",

Nach der Bearbeitung sollte das Ergebnis so aussehen:

Die aktualisierte Version der Datei en.default.json

  1. Verwenden Sie 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ügen Sie 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:

Die aktualisierte Version der Datei en.default.json

  1. Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen.

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

  1. Auf die Themes-Seite gehen

  2. Wählen Sie Aktion > Sprachen bearbeiten

  3. Klicken Sie auf Theme-Sprache ändern und wählen Sie die Sprache aus, die Sie ändern möchten (dies ist nur für Ihr veröffentlichtes Theme möglich).

Optionaler Schritt 3

  1. Suchen Sie in der Eingabeleiste nach "Einzelpreis"

  2. Aktualisieren Sie das Feld "Einzelpreis-Separator" unter "Allgemein/Barrierefreiheit"

  3. Aktualisieren Sie das Feld "Einzelpreisetikett" unter "Produkte/Produkt".

Optionaler Schritt 6

Preis pro Einheit in Ihren Bestellbenachrichtigungen anzeigen

Wenn Sie Ihrem Produkt einen Preis pro Einheit hinzugefügt haben, dieser jedoch nicht in Ihren Bestellbenachrichtigungen angezeigt wird, müssen Sie möglicherweise Ihre Vorlage für Bestellbenachrichtigungen aktualisieren.

Schritte:

  1. Gehen Sie in Ihrem Shopify-Adminbereich zu Einstellungen > Benachrichtigungen.

  2. Klicken Sie auf Bestellbestätigung.

  3. Fügen Sie 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. Klicken Sie auf Speichern.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren