Vis SKU-numre på produktsider

Advarsel

Eldre temaer er ikke tilgjengelige i Theme Store. Eldre temaer har ikke funksjonene fra Shopifys Online Store 2.0-temaer, og Shopifys gratis eldre temaer mottar ikke oppdateringer ut over sikkerhetsrettelser.

Merk

Hvis du bruker et gratis tema fra Shopify, kan du kontakte Shopifys brukerstøtte for å få hjelp med denne veiledningen. Det krever 15 minutter med designtid. Finn ut mer om Shopifys retningslinjer for design.

Merk

Denne tilpasningen er for eldre Shopify-temaer, og gjelder ikke for Nettbutikk 2.0-temaer.

• Finn ut temaets arkitekturversjon
• Utforsk Online Store 2.0-tematilpasninger

SKU-er (lagerbeholdningsenheter) er tall, vanligvis alfanumeriske, som brukes til å identifisere og spore lagerbeholdning. Hvis en butikk bruker SKU-er, tilordnes et unikt nummer til hver individuelle produktvariant. Du kan vise SKU-numre for varianter på produktsider ved å redigere temakoden:

Seksjonerte og ikke-seksjonerte temaer

Merk

Trinnene for denne veiledningen varierer avhengig av hvorvidt du bruker et kategorisert eller et ukategorisert tema. Med et kategorisert tema kan du dra og slippe for å endre oppsett på startsiden, mens dette ikke er mulig med et ukategorisert tema.

For å finne ut om temaet ditt støtter seksjoner kan du gå til temaets Rediger kode-side. Hvis det er filer i Seksjoner-katalogen, bruker du et seksjonert tema. Ukategoriserte temaer ble lansert før oktober 2016, og har ingen filer i katalogen Seksjoner.

Hvis du bruker et kategorisert tema, klikker du på knappen Kategoriserte temaer og følger instruksjonene. Hvis du bruker et eldre, ukategorisert tema, klikker du på knappen Ukategoriserte temaer og følger instruksjonene.

Trinn for kategoriserte temaer

Vis SKU-numre på produktsider

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.

3. I Seksjoner-katalogen klikker du på product.liquid eller product-template.liquid.

4. Finn følgende Liquid-tagg:

{{ product.title }}

Dette er koden som gjengir produkttitlene dine på produktsiden.

1. På en ny linje under kodelinjen som inneholder {{ product.title }} limer du inn følgende kode:

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

1. Klikk på Lagre.

Velg tema

Trinnene for denne tilpasningen varierer avhengig av ditt valgte tema. Klikk på knappen for ditt tema og følg instruksjonene.

Boundless

Steg for Boundless

1. I Ressurser-katalogen klikker du på theme.js.liquid.

2. Se etter variant.sku:

   • Hvis du finner variant.sku, har du fullført tilpasningen.
   • Hvis du ikke finner variant.sku, må du gå videre til neste trinn.

3. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Brooklyn

Trinn for Brooklyn

1. I Ressurser-katalogen klikker du på theme.js.liquid.

2. Se etter variant.sku:

   • Hvis du finner variant.sku, har du fullført tilpasningen.
   • Hvis du ikke finner variant.sku, må du gå videre til neste trinn.

3. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Debut

Steg for Debut

1. I Ressurser-katalogen klikker du på theme.js.

2. Se etter variant.sku:

   • Hvis du finner variant.sku, har du fullført tilpasningen.
   • Hvis du ikke finner variant.sku, må du gå videre til neste trinn.

3. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Express

Trinn for Express

1. I Oppsett-katalogen klikker du på theme.liquid.
2. Finn den avsluttende </body>-taggen.
3. På linjen rett over den avsluttende </body>-taggen limer du inn følgende kode:

<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. Klikk på Lagre.

Minimal

Steg for Minimal

1. I Ressurser-katalogen klikker du på theme.js.

2. Se etter variant.sku:

   • Hvis du finner variant.sku, har du fullført tilpasningen.
   • Hvis du ikke finner variant.sku, må du gå videre til neste trinn.

3. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Narrative

Steg for Narrative

1. I Ressurser-katalogen klikker du på custom.js.
2. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Simple

Steg for Simple

1. I Ressurser-katalogen klikker du på theme.js.liquid.

2. Se etter variant.sku:

   • Hvis du finner variant.sku, har du fullført tilpasningen.
   • Hvis du ikke finner variant.sku, må du gå videre til neste trinn.

3. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Supply

Steg for Supply

1. I Ressurser-katalogen klikker du på theme.js.liquid.

2. Se etter variant.sku:

   • Hvis du finner variant.sku, har du fullført tilpasningen.
   • Hvis du ikke finner variant.sku, må du gå videre til neste trinn.

3. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Venture

Steg for Venture

1. I Ressurser-katalogen klikker du på theme.js.

2. Se etter variant.sku:

   • Hvis du finner variant.sku, har du fullført tilpasningen.
   • Hvis du ikke finner variant.sku, må du gå videre til neste trinn.

3. Nederst i filen limer du inn følgende kode:

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. Klikk på Lagre.

Legg til SKU-numre til produktvariantene fra administrator

Hvis du vil at SKU-er skal vises på produktsidene, må du legge til SKU-numre i produktvariantene dine i Shopify-administrator.

1. Fra Shopify-administratoren går du til Produkter.

2. Klikk på produktet du vil redigere.

3. For produkter med flere varianter, legger du til SKU-numre i Varianter-seksjonen:

4. Klikk på Lagre.

Trinn for ukategoriserte temaer

Vis SKU-numre på produktsider

Merk

Denne tilpasningen fungerer ikke for det ukategoriserte temaet Boundless. Ukategoriserte temaer ble lansert før oktober 2016, og har ingen filer i katalogen Seksjoner.

Trinn:

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode.

3. I Maler -katalogen klikker du på product.liquid.

4. Finn følgende Liquid-tagg:

{{ product.title }}

Dette er koden som gjengir produkttitlene dine på produktsiden.

1. På en ny linje under kodelinjen som inneholder {{ product.title }}, limer du inn følgende:

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

1. Klikk på Lagre.
2. Hvis du bruker et gratis Shopify-tema som ikke er Brooklyn eller Venture, finn følgende kodelinje:

var selectCallback = function(variant, selector) {

Hvis du ikke finner koden ovenfor i product.liquid, finner du den i theme.liquid, i Layout-katalogen.

• Brooklyn og Venture: Hvis du bruker Brooklyn eller Venture, må du finne og redigere en annen kodelinje. I katalogen Materiell klikker du på theme.js.liquid og finner følgende kodelinje:

theme.productVariantCallback = function (variant, selector) {

1. Lim inn følgende kode på en ny linje under:

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

Koden din skal se omtrent slik ut:

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. Klikk på Lagre.

Legg til SKU-numre til produktvariantene fra administrator

Hvis du vil at SKU-er skal vises på produktsidene, må du legge til SKU-numre i produktvariantene dine i Shopify-administrator.

1. Fra Shopify-administratoren går du til Produkter.

2. Klikk på produktet du vil redigere.

3. For produkter med flere varianter kan du legge til SKU-numre i seksjonen Varianter:

   

   For produkter uten varianter kan du legge til SKU-nummeret i seksjonen Lagerbeholdning:

   

4. Klikk på Lagre.