Logga in
Starta gratis testversion

Visa SKU-nummer på produktsidor

SKU:er (lagringsenheter) är nummer, vanligtvis alfanumeriska, som används för att hjälpa till att identifiera produkter och spåra lager. Om en butik använder SKU:er, tilldelas ett unikt nummer till varje enskild produktvariant. Du kan visa SKU-nummer för varianter på dina produktsidor genom att redigera din temakod:

Exempel på variant-SKU

Avsnitt och icke-sektionerade teman

På den här sidan

Steg för indelade teman

Visa SKU-nummer på produktsidor

  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.

  3. Klicka på product.liquid eller product-template.liquid i katalogen Avsnitt.

  4. Leta efter följande Liquid-tagg:

{{ product.title }}

Det här är den kod som återger dina produktnamn på produktsidan.

  1. På en ny rad under kodraden som innehåller {{ product.title }} klistrar du in följande kod: 
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. Klicka på Spara.

Välj ditt tema

Nästa steg för denna anpassning varierar beroende på ditt tema. Klicka på knappen för ditt tema och följ anvisningarna.

Boundless

Steg för Boundless

  1. Klicka på theme.js.liquid i registret Tillgångar.

  2. Leta efter variant.sku:

    • Om du kan hitta variant.sku har du slutfört anpassningen.
    • Om du inte kan hitta variant.sku fortsätter du till nästa steg.

  3. Längst ner i filen klistra in följande kod:

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. Klicka på Spara.
Brooklyn

Steg för Brooklyn

  1. Klicka på theme.js.liquid i registret Tillgångar.

  2. Leta efter variant.sku:

    • Om du kan hitta variant.sku har du slutfört anpassningen.
    • Om du inte kan hitta variant.sku fortsätter du till nästa steg.

  3. Längst ner i filen klistra in följande kod:

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. Klicka på Spara.
Debut

Steg för Debut

  1. Klicka på theme.js i registret Tillgångar.

  2. Leta efter variant.sku:

    • Om du kan hitta variant.sku har du slutfört anpassningen.
    • Om du inte kan hitta variant.sku fortsätter du till nästa steg.

  3. Längst ner i filen klistra in följande kod:

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. Klicka på Spara.
Express

Steg för Express

  1. Klicka på theme.liquid i Layout-registret
  2. Leta efter den avslutande </body>-taggen.
  3. På raden direkt ovanför den avslutande </body>-taggen klistrar du in följande kod: 
<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. Klicka på Spara.
Minimal

Steg för Minimal

  1. Klicka på theme.js i registret Tillgångar.

  2. Leta efter variant.sku:

    • Om du kan hitta variant.sku har du slutfört anpassningen.
    • Om du inte kan hitta variant.sku fortsätter du till nästa steg.

  3. Längst ner i filen klistra in följande kod:

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. Klicka på Spara.
Narrative

Steg för Narrative

  1. Klicka på custom.js i registret Tillgångar.
  2. Längst ner i filen klistra in följande kod: 
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. Klicka på Spara.
Simple

Steg för Simple

  1. Klicka på theme.js.liquid i registret Tillgångar.

  2. Leta efter variant.sku:

    • Om du kan hitta variant.sku har du slutfört anpassningen.
    • Om du inte kan hitta variant.sku fortsätter du till nästa steg.

  3. Längst ner i filen klistra in följande kod:

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. Klicka på Spara.
Supply

Steg för Supply

  1. Klicka på theme.js.liquid i registret Tillgångar.

  2. Leta efter variant.sku:

    • Om du kan hitta variant.sku har du slutfört anpassningen.
    • Om du inte kan hitta variant.sku fortsätter du till nästa steg.

  3. Längst ner i filen klistra in följande kod:

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. Klicka på Spara.
Venture

Steg för Venture

  1. Klicka på theme.js i registret Tillgångar.

  2. Leta efter variant.sku:

    • Om du kan hitta variant.sku har du slutfört anpassningen.
    • Om du inte kan hitta variant.sku fortsätter du till nästa steg.

  3. Längst ner i filen klistra in följande kod:

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. Klicka på Spara.

Lägg till SKU-nummer till dina produktvarianter från administratören

Om du vill att SKU:er ska visas på dina produktsidor måste du lägga till SKU-nummer till dina produktvarianter från Shopify-administratören.

  1. Gå till Produkter i din Shopify-administratör.

  2. Klicka på den produkt som du vill redigera.

  3. Lägg till dina SKU-nummer i avsnittet Varianter för produkter med flera varianter:

  4. Klicka på Spara.

Steg för icke-indelade teman

Visa SKU-nummer på produktsidor

Steg:

  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.

  3. Klicka på product.liquidi katalogen Mallar.

  4. Leta efter följande Liquid-tagg:

{{ product.title }}

Det här är den kod som återger dina produktnamn på produktsidan.

  1. På en ny rad under raden med koden som innehåller {{ product.title }} klistrar du in följande: 
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. Klicka på Spara.
  2. Leta efter följande kodrad om du använder ett gratis Shopify-tema som inte är Brooklyn eller Venture: 
var selectCallback = function(variant, selector) {

Om du inte kan hitta ovanstående kodrad i product.liquid hittar du den i theme.liquid, i katalogen Layout.

  • Brooklyn och Venture: Om du använder Brooklyn eller Venture måste du hitta och redigera en annan kodrad. I katalogen Tillgångar klickar du på theme.js.liquid och hitta följande kodrad: 
theme.productVariantCallback = function (variant, selector) {
  1. På en ny rad under klistrar du in följande kod: 
if (variant) {
      document.querySelector('.variant-sku').innerText = variant.sku;
    }
    else {
      document.querySelector('.variant-sku').innerText = '';
    }

Din kod ska se ut ungefär så här:

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. Klicka på Spara.

Lägg till SKU-nummer till dina produktvarianter från administratören

Om du vill att SKU:er ska visas på dina produktsidor måste du lägga till SKU-nummer till dina produktvarianter från Shopify-administratören.

  1. Gå till Produkter i din Shopify-administratör.

  2. Klicka på den produkt som du vill redigera.

  3. Lägg till dina SKU-nummer för produkter med flera varianter i avsnittet Varianter:

    SKUs
    Lägg till ditt SKU-nummer för produkter utan varianter i avsnittet Lager:
    SKU for products without variants

  4. Klicka på Spara.

Hittar du inte de svar du letar efter? Vi finns här för att hjälpa till!