Visa SKU-nummer på produktsidor

Den här sidan skrevs ut den Mar 21, 2023. Besök https://help.shopify.com/sv/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku för den aktuella versionen.

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

Obs! Stegen i den här handledningen varierar beroende på om du använder ett tema med avsnitt eller ett tema utan avsnitt. Med ett tema med avsnitt kan du dra och släppa för att arrangera layouten på din startsida, men inte med ett tema utan avsnitt.

Gå till temasidan Redigera kod för att ta reda på om ditt tema stöder avsnitt. Om det finns filer i Avsnittskatalogen använder du ett avgränsat tema. Icke-sektionerade teman släpptes före oktober 2016 och har inga filer i Avsnittskatalogen.

Om du använder ett avgränsat tema klickar du på knappen Avgränsade teman-knapp och följer anvisningarna. Om du använder ett äldre, icke-avsnittsbaserat tema klickar du på knappen Icke-avgränsade teman och följer anvisningarna.

Visa SKU-nummer på produktsidor

Så här redigerar du ditt tema för att 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.

  1. Från Shopify-appen klickar du på Butik.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera teman.

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

  1. Från Shopify-appen klickar du på Butik.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera teman.

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

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

  2. Leta efter följande Liquid-tagg:

{{ product.title }}
This is the code that renders your product titles on the product page.
  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.

Steg för Boundless

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

  2. Leta efter variant.sku.

  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.

Steg för Brooklyn

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

  2. Leta efter variant.sku.

  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.

Steg för Debut

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

  2. Leta efter variant.sku.

  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.

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.

Steg för Minimal

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

  2. Leta efter variant.sku.

  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.

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.

Steg för Simple

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

  2. Leta efter variant.sku.

  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.

Steg för Supply

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

  2. Leta efter variant.sku.

  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.

Steg för Venture

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

  2. Leta efter variant.sku.

  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. Från ditt Shopify-administratörskonto går du till Produkter.

  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.

Visa SKU-nummer på produktsidor

OBS! Den här anpassningen fungerar inte för det icke-sektionerade Boundless-temat. Teman utan avsnitt släpptes före oktober 2016 och har inga filer i katalogen Avsnitt.

Så här redigerar du ditt tema för att 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.

  1. Från Shopify-appen klickar du på Butik.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera teman.

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

  1. Från Shopify-appen klickar du på Butik.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera teman.

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

  1. Klicka på product.liquidi katalogen Mallar.

  2. Leta efter följande Liquid-tagg:

{{ product.title }}
This is the code that renders your product titles on the product page.
  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) {
If you cannot find the above line of code in `product.liquid`, then you will find it in `theme.liquid`, in the **Layout** directory.

#### Brooklyn and Venture

If you are using Brooklyn or Venture, then you will need to find and edit a different line of code. In the **Assets** directory, click `theme.js.liquid`, and [find](/manual/shopify-admin/productivity-tools/keyboard-shortcuts#find) the following line of code:
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 = '';
    }
Your code should look something like this:
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. Från ditt Shopify-administratörskonto går du till Produkter.

  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.

Är du redo att börja sälja med Shopify?

Prova gratis