SKU-nummers op productpagina's tonen

Let op

Vintage thema's zijn niet beschikbaar in de Theme Store. Deze thema's hebben niet de functies die in de Online Store 2.0-thema's van Shopify zijn opgenomen en de gratis vintage thema's van Shopify krijgen alleen nog updates als dit voor de beveiliging nodig is.

Opmerking

Als je een gratis thema van Shopify gebruikt, kun je mogelijk contact opnemen met Shopify Support voor hulp bij deze tutorial. Hiervoor is 15 minuten ontwerptijd nodig. Zie Ondersteuning voor thema's voor meer informatie.

Opmerking

Deze aanpassing is voor vintage thema's van Shopify en is niet van toepassing op Online Store 2.0-thema's.

• Ontdek de architectuurversie van je thema
• Ontdek aanpassingen aan Online Store 2.0-thema

SKU's (voorraadeenheden) zijn getallen, meestal alfanumerieke, die worden gebruikt om producten te identificeren en voorraad bij te houden. Als een winkel SKU's gebruikt, wordt aan elke afzonderlijke productvariant een uniek nummer toegewezen. Je kunt SKU-nummers voor varianten op je productpagina's tonen door je themacode te bewerken:

---

Thema's met en zonder secties

Opmerking

de stappen in deze tutorial verschillen al naar gelang of je een thema met secties of zonder secties gebruikt. In een thema met secties kun je verslepen om de pagina-indeling van je homepage te bepalen en in een thema zonder secties kan dat niet.

Ga naar de pagina Code bewerken van je thema om erachter te komen of je thema secties ondersteunt. Gebruik een thema met secties als de directory Secties bestanden bevat. Thema's zonder secties werden gebruikt voor oktober 2016 en de directory Secties van deze thema's bevat geen bestanden.

Als je een sectiethema gebruikt, klik op de knop Sectiethema's en volg de instructies. Als je een ouder, niet-gesegmenteerd thema gebruikt, klik op de knop Thema's zonder secties en volg de instructies.

Sectioned themes

SKU-nummers op productpagina's tonen

Je thema bewerken om SKU-nummers op productpagina's weer te geven:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

2. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

1. Klik in de directory Secties op product.liquid of product-template.liquid.

2. Zoek de volgende Liquid-tag:

{{ product.title }}

This is the code that renders your product titles on the product page.

1. Plak de volgende code op een nieuwe regel onder de regel met code {{ product.title }}:

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

1. Klik op Opslaan.

Je thema selecteren

De stappen voor deze aanpassing variëren naargelang je thema. Klik op de knop van je thema en volg de instructies.

Boundless

Stappen voor Boundless

1. Klik in de directory Assets op theme.js.liquid.

2. Zoek naar variant.sku.

3. Plak onderin het bestand de volgende code:

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 op Opslaan.

Brooklyn

Stappen voor Brooklyn

1. Klik in de directory Assets op theme.js.liquid.

2. Zoek naar variant.sku.

3. Plak onderin het bestand de volgende code:

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 op Opslaan.

Debut

Stappen voor Debut

1. Klik in de directory Assets op theme.js.

2. Zoek naar variant.sku.

3. Plak onderin het bestand de volgende code:

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 op Opslaan.

Express

Stappen voor Express

1. Klik in de directory Opmaak op theme.liquid.
2. Zoek de sluitende tag </body>.
3. Plak de volgende code op een regel direct boven de sluitende tag </body>:

<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 op Opslaan.

Minimal

Stappen voor Minimal

1. Klik in de directory Assets op theme.js.

2. Zoek naar variant.sku.

3. Plak onderin het bestand de volgende code:

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 op Opslaan.

Narrative

Stappen voor Narrative

1. Klik in de directory Assets op custom.js.
2. Plak onderin het bestand de volgende code:

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 op Opslaan.

Simple

Stappen voor Simple

1. Klik in de directory Assets op theme.js.liquid.

2. Zoek naar variant.sku.

3. Plak onderin het bestand de volgende code:

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 op Opslaan.

Supply

Stappen voor Supply

1. Klik in de directory Assets op theme.js.liquid.

2. Zoek naar variant.sku.

3. Plak onderin het bestand de volgende code:

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 op Opslaan.

Venture

Stappen voor Venture

1. Klik in de directory Assets op theme.js.

2. Zoek naar variant.sku.

3. Plak onderin het bestand de volgende code:

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 op Opslaan.

SKU-nummers toevoegen aan je productvarianten vanuit het beheercentrum

Om SKU's op je productpagina's te laten verschijnen, moet je SKU-nummers toevoegen aan je productvarianten vanuit het Shopify-beheercentrum.

1. Ga vanuit het Shopify-beheercentrum naar Producten.

2. Klik op het product dat je wilt bewerken.

3. Voeg in het gedeelte Varianten je SKU-nummers toe voor producten met meerdere varianten:

4. Klik op Opslaan.

Non-sectioned themes

SKU-nummers op productpagina's tonen

Opmerking

deze aanpassing werkt niet voor het thema Boundless zonder secties. Thema's zonder secties zijn vóór oktober 2016 vrijgegeven en bevatten geen bestanden in de directory Secties.

Je thema bewerken om SKU-nummers op productpagina's weer te geven:

Desktop

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.

2. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

iPhone

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

Android

1. Tik in de Shopify-app op Winkel.

2. Tik in het gedeelte Verkoopkanalen op Onlinewinkel.

3. Tik op Thema's beheren.

4. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.

1. Klik op product.liquid in de directory Templates.

2. Zoek de volgende Liquid-tag:

{{ product.title }}

This is the code that renders your product titles on the product page.

1. Plak het volgende op een nieuwe regel onder de regel code die {{ product.title }} bevat:

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

1. Klik op Opslaan.

2. Als je een gratis Shopify-thema gebruikt dat geen Brooklyn of Venture is, zoek je de volgende coderegel:

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. Plak de volgende code op een nieuwe regel hieronder:

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. Klik op Opslaan.

SKU-nummers toevoegen aan je productvarianten vanuit het beheercentrum

Om SKU's op je productpagina's te laten verschijnen, moet je SKU-nummers toevoegen aan je productvarianten vanuit het Shopify-beheercentrum.

1. Ga vanuit het Shopify-beheercentrum naar Producten.

2. Klik op het product dat je wilt bewerken.

3. Voeg in het gedeelte Varianten je SKU-nummers toe voor producten met meerdere varianten:

4. Klik op Opslaan.