SKU-Nummern auf Produktseiten anzeigen

Achtung

Vintage-Themes sind nicht im Theme Store verfügbar. Diese Themes verfügen nicht über die Funktionen, die in den Onlineshop 2.0-Themes von Shopify enthalten sind, und erhalten nur sicherheitsbezogene Aktualisierungen.

Hinweis

Wenn du ein kostenloses Theme von Shopify verwendest, kannst du dich an den Shopify Support wenden, um Hilfe zu diesem Tutorial zu erhalten. Die Designzeit beträgt 15 Minuten. Weitere Informationen dazu findest du unter Theme-Support.

Hinweis

Diese Anpassung ist für Vintage-Shopify-Themes und gilt nicht für Online Store 2.0-Themes.

• Finde die Architekturversion deines Themes heraus
• Entdecke die Anpassungsmöglichkeiten für Online Store 2.0-Themes

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:

Themes mit und ohne Abschnitte

Hinweis

Die Schritte für dieses Tutorial unterscheiden sich je nach dem, ob du ein Theme mit Abschnitten oder eines ohne Abschnitte verwendest. Ein Theme mit Abschnitten ermöglicht es dir, das Layout deiner Startseite mittels Drag & Drop anzuordnen, während dies bei einem Theme ohne Abschnitte nicht der Fall ist.

Gehe auf die Seite Code bearbeiten deines Themes, um dort herauszufinden, ob dein Theme Abschnitte unterstützt oder nicht. Wenn sich Dateien im Verzeichnis Sections (Abschnitte) befinden, verwende ein unterteiltes Theme. Nicht unterteilte Themen wurden vor dem Oktober 2016 veröffentlicht und enthalten keine Dateien im Verzeichnis Sections (Abschnitte).

Wenn Sie ein unterteiltes Theme verwenden, klicken Sie auf die Schaltfläche Unterteilte Themes und folgen Sie den Anweisungen. Wenn Sie ein älteres, nicht unterteiltes Theme verwenden, klicken Sie auf die Schaltfläche Nicht unterteilte Themes und folgen Sie den Anweisungen.

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

Hinweis

Diese Anpassung funktioniert nicht im Boundless-Theme ohne Abschnitte. Themes ohne Abschnitte wurden vor Oktober 2016 veröffentlicht und enthalten keine Dateien im Verzeichnis Abschnitte.

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:

   

   Füge für Produkte ohne Varianten im Abschnitt Inventar deine SKU-Nummer hinzu:

   

4. Klicke auf Speichern.