SKU-Nummern auf Produktseiten anzeigen

SKUs (Artikelnummern) sind Nummern, die in der Regel alphanumerisch sind und der Identifizierung von Produkten und Verfolgung des Inventars dienen. Wenn ein Shop SKUs verwendet, wird jeder einzelnen Produktvariante eine eindeutige Nummer zugewiesen. Du kannst SKU-Nummern für Varianten auf deinen Produktseiten anzeigen, indem du deinen Theme-Code bearbeitest:

Beispiel für Varianten-SKU

Themes mit und ohne Abschnitte

Schritte für Themes mit Abschnitten

SKU-Nummern auf Produktseiten anzeigen

  1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

  2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

  3. Klicke im Verzeichnis Abschnitte auf product.liquid oder product-template.liquid.

  4. Suche nach dem folgenden Liquid-Tag:

{{ product.title }}

Das ist der Code, mit dem deine Produkttitel auf der Produktseite gerendert werden.

  1. Füge in einer neuen Zeile unterhalb der Codezeile, die {{ product.title }} enthält, den folgenden Code ein:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. Klicke auf Speichern.

Wähle dein Theme

Die nächsten Schritte für diese Anpassung variieren je nach deinem Theme. Klicke auf die Schaltfläche für dein Theme und befolge die Anweisungen.

Boundless

Schritte für Boundless

  1. Klicke im Verzeichnis Assets auf theme.js.liquid.
  2. Suche nach variant.sku:

    • Wenn du variant.sku findest, ist die Anpassung abgeschlossen.
    • Wenn du variant.sku nicht findest, fahre mit dem nächsten Schritt fort.
  3. Füge am Ende der Datei den folgenden Code ein:

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(function() {
    const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
    if (productJson.length > 0) {
      productJson.forEach((product) => {
        const sectionId = product.id.replace("ProductJson-", "shopify-section-");
        const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
        const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
        const productInfo = JSON.parse(product.innerHTML);
        const inputValues = [];
        const optionValues = [];
        let count = 0;
        inputSelects.forEach((input) => {
          inputValues.push(input.value);
          optionValues.push(count);
          input.addEventListener('change', (evt) => {
            const currentValue = evt.currentTarget.value.toString();
            const changedIndex = inputSelects.indexOf(evt.target);
            inputValues[changedIndex] = currentValue;
            variantSKU.innerText = ' ';
            productInfo.variants.forEach((variant) => {
              if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
                variantSKU.innerText = variant.sku;
              }
            });
          });
          count += 1;
        });
      });
    }
  }, 100);
});
  1. Klicke auf Speichern.
Brooklyn

Schritte für Brooklyn

  1. Klicke im Verzeichnis Assets auf theme.js.liquid.
  2. Suche nach variant.sku:

    • Wenn du variant.sku findest, ist die Anpassung abgeschlossen.
    • Wenn du variant.sku nicht findest, fahre mit dem nächsten Schritt fort.
  3. Füge am Ende der Datei den folgenden Code ein:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const productInfo = JSON.parse(product.innerHTML);
      const radioButtons = document.querySelector('.single-option-radio');
      let inputSelects;
      if (radioButtons !== null) {
        inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-radio')];
      } else {
        inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector__radio')];
      }
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        if (radioButtons !== null) {
          inputValues.push(input.firstElementChild.value);
        } else {
          inputValues.push(input.value);
        }
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.target.value.toString();
          const changedIndex = inputSelects.indexOf(evt.currentTarget);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
      count += 1;
      });
    });
  }
});
  1. Klicke auf Speichern.
Debut

Schritte für Debut

  1. Klicke im Verzeichnis Assets auf theme.js.
  2. Suche nach variant.sku:

    • Wenn du variant.sku findest, ist die Anpassung abgeschlossen.
    • Wenn du variant.sku nicht findest, fahre mit dem nächsten Schritt fort.
  3. Füge am Ende der Datei den folgenden Code ein:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});
  1. Klicke auf Speichern.
Express

Schritte für Express

  1. Klicke in der Übersicht Layout auf theme.liquid .
  2. Suche nach dem abschließenden Tag </body>.
  3. Füge in der Zeile direkt über dem abschließenden Tag </body> den folgenden Code ein:
<script>
document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[data-product-json]')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = "shopify-section-" + product.closest('[data-section-id]').dataset.sectionId;
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .form__input--select')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});
</script>
  1. Klicke auf Speichern.
Minimal

Schritte für Minimal

  1. Klicke im Verzeichnis Assets auf theme.js.
  2. Suche nach variant.sku:

    • Wenn du variant.sku findest, ist die Anpassung abgeschlossen.
    • Wenn du variant.sku nicht findest, fahre mit dem nächsten Schritt fort.
  3. Füge am Ende der Datei den folgenden Code ein:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});
  1. Klicke auf Speichern.
Narrative

Schritte für Narrative

  1. Klicke im Verzeichnis Assets auf custom.js.
  2. Füge am Ende der Datei den folgenden Code ein:
document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[data-product-json]')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = "shopify-section-" + product.closest('[data-section-id]').dataset.sectionId;
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});
  1. Klicke auf Speichern.
Simple

Schritte für Simple

  1. Klicke im Verzeichnis Assets auf theme.js.liquid.
  2. Suche nach variant.sku:

    • Wenn du variant.sku findest, ist die Anpassung abgeschlossen.
    • Wenn du variant.sku nicht findest, fahre mit dem nächsten Schritt fort.
  3. Füge am Ende der Datei den folgenden Code ein:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});
  1. Klicke auf Speichern.
Supply

Schritte für Supply

  1. Klicke im Verzeichnis Assets auf theme.js.liquid.
  2. Suche nach variant.sku:

    • Wenn du variant.sku findest, ist die Anpassung abgeschlossen.
    • Wenn du variant.sku nicht findest, fahre mit dem nächsten Schritt fort.
  3. Füge am Ende der Datei den folgenden Code ein:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});
  1. Klicke auf Speichern.
Venture

Schritte für Venture

  1. Klicke im Verzeichnis Assets auf theme.js.
  2. Suche nach variant.sku:

    • Wenn du variant.sku findest, ist die Anpassung abgeschlossen.
    • Wenn du variant.sku nicht findest, fahre mit dem nächsten Schritt fort.
  3. Füge am Ende der Datei den folgenden Code ein:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});
  1. Klicke auf Speichern.

SKU-Nummern zu Produktvarianten im Adminbereich hinzufügen

Damit SKUs auf deinen Produktseiten angezeigt werden, musst du im Shopify-Adminbereich SKU-Nummern zu deinen Produktvarianten hinzufügen.

  1. Gehe im Shopify-Adminbereich zu Produkte.

  2. Klicke auf das Produkt, das du bearbeiten möchtest.

  3. Füge bei Produkten mit mehreren Varianten im Abschnitt Varianten die SKU-Nummern hinzu:

  4. Klicke auf Speichern.

Schritte für Themes ohne Abschnitte

SKU-Nummern auf Produktseiten anzeigen

Schritte:

  1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.

  2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

  3. Klicke im Verzeichnis Vorlagen auf product.liquid.

  4. Suche nach dem folgenden Liquid-Tag:

{{ product.title }}

Das ist der Code, mit dem deine Produkttitel auf der Produktseite gerendert werden.

  1. Füge in einer neuen Zeile unterhalb der Codezeile, die {{ product.title }} enthält, Folgendes ein:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. Klicke auf Speichern.
  2. Wenn du ein kostenloses Shopify-Theme außer Brooklyn oder Venture verwendest, suche nach der folgenden Codezeile:
var selectCallback = function(variant, selector) {

Wenn du die oben aufgeführte Codezeile nicht in product.liquid finden kannst, suche im Verzeichnis Layout in der Datei theme.liquid danach.

  • Brooklyn und Venture: Wenn du Brooklyn oder Venture verwendest, musst du nach einer anderen Codezeile suchen und diese bearbeiten. Klicke im Verzeichnis Assets auf theme.js.liquid und suche nach der folgenden Codezeile:
theme.productVariantCallback = function (variant, selector) {
  1. Füge in einer neuen Zeile darunter den folgenden Code ein:
if (variant) {
      document.querySelector('.variant-sku').innerText = variant.sku;
    }
    else {
      document.querySelector('.variant-sku').innerText = '';
    }

Der Code sollte etwa so aussehen:

var selectCallback = function(variant, selector) {

      if (variant) {
        document.querySelector('.variant-sku').innerText = variant.sku;
      }
      else {
        document.querySelector('.variant-sku').innerText = '';
      }

        self.productPage({
          money_format: theme.moneyFormat,
          variant: variant,
          selector: selector,
          translations: {
            add_to_cart : theme.productStrings.addToCart,
            sold_out : theme.productStrings.soldOut,
            unavailable : theme.productStrings.unavailable
          }
        });
      };
  1. Klicke auf Speichern.

SKU-Nummern zu Produktvarianten im Adminbereich hinzufügen

Damit SKUs auf deinen Produktseiten angezeigt werden, musst du im Shopify-Adminbereich SKU-Nummern zu deinen Produktvarianten hinzufügen.

  1. Gehe im Shopify-Adminbereich zu Produkte.

  2. Klicke auf das Produkt, das du bearbeiten möchtest.

  3. Füge für Produkte mit mehreren Varianten im Abschnitt Varianten deine SKU-Nummern hinzu:

    SKUs
    Füge für Produkte ohne Varianten im Abschnitt Inventar deine SKU-Nummer hinzu:
    SKU for products without variants

  4. Klicke auf Speichern.

Du hast die gesuchten Antworten nicht gefunden? Wir helfen dir gerne weiter.