Vis SKU-numre på produktsider

Denne side blev udskrevet kl. Apr 24, 2024. Besøg https://help.shopify.com/da/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku for at se den aktuelle version.

SKU-numre er normalt alfanumeriske numre, som bruges til at identificere produkter og spore lagerbeholdning. Hvis en butik bruger SKU-numre, tildeles der et unikt nummer til alle de enkelte produktvarianter. Du kan vise SKU-numre for varianter på dine produktsider ved at redigere din temakode:

Eksempel på en variant-SKU

Temaer med og uden sektioner

Bemærk: Trinnene i denne vejledning er forskellige, afhængigt af om du bruger et tema med sektioner eller uden sektioner. Med et tema med sektioner kan du trække og slippe for at arrangere startsidens layout – det kan du ikke med et tema uden sektioner.

Du kan finde ud af, om dit tema understøtter sektioner, ved at gå til temaets side Rediger kode. Hvis der er filer i mappen Sektioner, bruger du et tema med sektioner. Temaer uden sektioner blev udgivet før oktober 2016 og har ikke filer i mappen Sektioner.

Hvis du bruger et tema med afsnit, skal du klikke på knappen Temaer med afsnit og følge instruktionerne. Hvis du bruger et ældre tema uden afsnit, skal du klikke på knappen Temaer uden afsnit og følge instruktionerne.

På denne side

Trin for temaer med afsnit

Vis SKU-numre på produktsider

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
  3. Klik på product.liquid eller product-template.liquid i mappen Afsnit.
  4. Find det følgende Liquid-tag: 
{{ product.title }}

Dette er den kode, der gengiver produkttitler på produktsiden.

  1. Indsæt følgende kode på en ny linje under den kodelinje, der indeholder {{ product.title }}: 
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. Klik på Gem.

Vælg dit tema

De næste trin for denne tilpasning varierer afhængigt af dit tema. Klik på knappen for dit tema, og følg vejledningen.

Trin for Boundless

  1. Klik på theme.js.liquid i mappen Aktiver.

  2. Søg efter variant.sku:

    • Hvis du kan finde variant.sku, har du fuldført tilpasningen.
    • Hvis du ikke kan finde variant.sku, skal du fortsætte til næste trin.

  3. Indsæt nedenstående kode i bunden af filen:

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. Klik på Gem.

Trin til Brooklyn

  1. Klik på theme.js.liquid i mappen Aktiver.

  2. Søg efter variant.sku:

    • Hvis du kan finde variant.sku, har du fuldført tilpasningen.
    • Hvis du ikke kan finde variant.sku, skal du fortsætte til næste trin.

  3. Indsæt nedenstående kode i bunden af filen:

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. Klik på Gem.

Trin for Debut

  1. Klik på theme.js i mappen Aktiver.

  2. Søg efter variant.sku:

    • Hvis du kan finde variant.sku, har du fuldført tilpasningen.
    • Hvis du ikke kan finde variant.sku, skal du fortsætte til næste trin.

  3. Indsæt nedenstående kode i bunden af filen:

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. Klik på Gem.

Trin til Express

  1. I mappen Layout skal du klikke på theme.liquid.
  2. Finddet afsluttende </body>-tag.
  3. Indsæt følgende kode på linjen lige over det afsluttende </body>-tag: 
<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. Klik på Gem.

Trin for Minimal

  1. Klik på theme.js i mappen Aktiver.

  2. Søg efter variant.sku:

    • Hvis du kan finde variant.sku, har du fuldført tilpasningen.
    • Hvis du ikke kan finde variant.sku, skal du fortsætte til næste trin.

  3. Indsæt nedenstående kode i bunden af filen:

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. Klik på Gem.

Trin for Narrative

  1. Klik på custom.js i mappen Aktiver.
  2. Indsæt nedenstående kode i bunden af filen: 
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. Klik på Gem.

Trin for Simple

  1. Klik på theme.js.liquid i mappen Aktiver.

  2. Søg efter variant.sku:

    • Hvis du kan finde variant.sku, har du fuldført tilpasningen.
    • Hvis du ikke kan finde variant.sku, skal du fortsætte til næste trin.

  3. Indsæt nedenstående kode i bunden af filen:

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. Klik på Gem.

Trin for Supply

  1. Klik på theme.js.liquid i mappen Aktiver.

  2. Søg efter variant.sku:

    • Hvis du kan finde variant.sku, har du fuldført tilpasningen.
    • Hvis du ikke kan finde variant.sku, skal du fortsætte til næste trin.

  3. Indsæt nedenstående kode i bunden af filen:

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. Klik på Gem.

Trin for Venture

  1. Klik på theme.js i mappen Aktiver.

  2. Søg efter variant.sku:

    • Hvis du kan finde variant.sku, har du fuldført tilpasningen.
    • Hvis du ikke kan finde variant.sku, skal du fortsætte til næste trin.

  3. Indsæt nedenstående kode i bunden af filen:

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. Klik på Gem.

Føj SKU-numre til dine produktvarianter fra administratoren

Hvis du vil vise SKU-numre på dine produktsider, skal du føje SKU-numrene til dine produktvarianter i Shopify-administrator.

  1. Gå til Produkter i din Shopify-administrator.

  2. Klik på det produkt, du vil redigere.

  3. Hvis du har produkter med flere varianter, skal du tilføje dine SKU-numre i afsnittet Varianter:

  4. Klik på Gem.

Trin for temaer uden sektioner

Vis SKU-numre på produktsider

Trin:

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
  3. Klik på product.liquid i mappen Skabeloner.
  4. Find det følgende Liquid-tag: 
{{ product.title }}

Dette er den kode, der gengiver produkttitler på produktsiden.

  1. Indsæt følgende på en ny linje under den kodelinje, der indeholder {{ product.title }}: 
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. Klik på Gem.
  2. Hvis du bruger et andet gratis Shopify-tema end Brooklyn eller Venture, skal du finde følgende kodelinje: 
var selectCallback = function(variant, selector) {

Hvis du ikke kan finde ovenstående kodelinje i product.liquid, kan du finde den i theme.liquid i mappen Layout.

  • Brooklyn og Venture: Hvis du bruger Brooklyn eller Venture, skal du finde og redigere en anden kodelinje. Klik på theme.js.liquid i mappen Aktiver, og find følgende kodelinje: 
theme.productVariantCallback = function (variant, selector) {
  1. Indsæt følgende kode på en ny linje nedenfor: 
if (variant) {
      document.querySelector('.variant-sku').innerText = variant.sku;
    }
    else {
      document.querySelector('.variant-sku').innerText = '';
    }

Koden bør se nogenlunde således ud:

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. Klik på Gem.

Føj SKU-numre til dine produktvarianter fra administratoren

Hvis du vil vise SKU-numre på dine produktsider, skal du føje SKU-numrene til dine produktvarianter i Shopify-administrator.

  1. Gå til Produkter i din Shopify-administrator.

  2. Klik på det produkt, du vil redigere.

  3. Hvis du har produkter med flere varianter, skal du tilføje dine SKU-numre i afsnittet Varianter:

    SKUs
    Hvis du har produkter uden varianter, skal du tilføje dit SKU-nummer i afsnittet Lager:
    SKU for products without variants

  4. Klik på Gem.

Er du klar til at begynde at sælge med Shopify?

Prøv det gratis