Ürün sayfalarında SKU numaralarını gösterme

SKU'lar (stok bulundurma birimleri), ürünleri tanımlamaya ve envanteri izlemeye yardımcı olmak için kullanılan, genellikle alfasayısal sayılardır. Bir mağaza SKU'ları kullanıyorsa, her bir ürün varyasyonuna benzersiz bir numara atanır. Tema kodunuzu düzenleyerek ürün sayfalarınızda varyasyonlar için SKU numaralarını gösterebilirsiniz:

Varyasyon SKU örneği

Bölümlere ayrılmış ve ayrılmamış temalar

Bölümlere ayrılmış temalar için adımlar

Ürün sayfalarında SKU numaralarını gösterme

  1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.

  2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için düğmesine, ardından Kodu düzenle'ye tıklayın.

  3. Bölümler dizininde product.liquid veya product-template.liquid dosyasına tıklayın.

  4. Aşağıdaki Liquid etiketini bulun:

{{ product.title }}

Bu kod, ürün sayfanıza ürün başlıklarınızı işler.

  1. {{ product.title }} kodunu içeren kod satırının altına aşağıdaki kodu yapıştırın:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. Kayıtyap ' a tıklayın.

Temanızı seçme

Bu özelleştirmeye yönelik sıradaki adımlar, temanıza göre değişiklik gösterir. Temanıza ilişkin düğmeye basın ve talimatları uygulayın.

Boundless

Boundless için adımlar

  1. Assets (Öğeler) dizininde theme.js.liquid seçeneğine tıklayın.
  2. variant.sku ifadesini arayın:

    • variant.sku ifadesini bulabiliyorsanız özelleştirmeyi tamamlamışsınızdır.
    • variant.sku ifadesini bulamıyorsanız sonraki adıma geçin.
  3. Dosyanın en altına aşağıdaki kodu yapıştırın:

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. Kayıtyap ' a tıklayın.
Brooklyn

Brooklyn için adımlar

  1. Assets (Öğeler) dizininde theme.js.liquid seçeneğine tıklayın.
  2. variant.sku ifadesini arayın:

    • variant.sku ifadesini bulabiliyorsanız özelleştirmeyi tamamlamışsınızdır.
    • variant.sku ifadesini bulamıyorsanız sonraki adıma geçin.
  3. Dosyanın en altına aşağıdaki kodu yapıştırın:

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. Kayıtyap ' a tıklayın.
Debut

Debut için adımlar

  1. Assets (Öğeler) dizininde theme.js seçeneğine tıklayın.
  2. variant.sku ifadesini arayın:

    • variant.sku ifadesini bulabiliyorsanız özelleştirmeyi tamamlamışsınızdır.
    • variant.sku ifadesini bulamıyorsanız sonraki adıma geçin.
  3. Dosyanın en altına aşağıdaki kodu yapıştırın:

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. Kayıtyap ' a tıklayın.
Express

Express için adımlar

  1. Düzen dizininde theme.liquid seçeneğine tıklayın.
  2. Kapatma </body> etiketini bulun.
  3. Kapatma </body> etiketinin hemen üstündeki satıra aşağıdaki kodu yapıştırın:
<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. Kayıtyap ' a tıklayın.
Minimal

Minimal için adımlar

  1. Assets (Öğeler) dizininde theme.js seçeneğine tıklayın.
  2. variant.sku ifadesini arayın:

    • variant.sku ifadesini bulabiliyorsanız özelleştirmeyi tamamlamışsınızdır.
    • variant.sku ifadesini bulamıyorsanız sonraki adıma geçin.
  3. Dosyanın en altına aşağıdaki kodu yapıştırın:

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. Kayıtyap ' a tıklayın.
Narrative

Narrative için adımlar

  1. Assets (Öğeler) dizininde custom.js seçeneğine tıklayın.
  2. Dosyanın en altına aşağıdaki kodu yapıştırın:
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. Kayıtyap ' a tıklayın.
Simple

Simple için adımlar

  1. Assets (Öğeler) dizininde theme.js.liquid seçeneğine tıklayın.
  2. variant.sku ifadesini arayın:

    • variant.sku ifadesini bulabiliyorsanız özelleştirmeyi tamamlamışsınızdır.
    • variant.sku ifadesini bulamıyorsanız sonraki adıma geçin.
  3. Dosyanın en altına aşağıdaki kodu yapıştırın:

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. Kayıtyap ' a tıklayın.
Supply

Supply için adımlar

  1. Assets (Öğeler) dizininde theme.js.liquid seçeneğine tıklayın.
  2. variant.sku ifadesini arayın:

    • variant.sku ifadesini bulabiliyorsanız özelleştirmeyi tamamlamışsınızdır.
    • variant.sku ifadesini bulamıyorsanız sonraki adıma geçin.
  3. Dosyanın en altına aşağıdaki kodu yapıştırın:

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. Kayıtyap ' a tıklayın.
Venture

Venture için adımlar

  1. Assets (Öğeler) dizininde theme.js seçeneğine tıklayın.
  2. variant.sku ifadesini arayın:

    • variant.sku ifadesini bulabiliyorsanız özelleştirmeyi tamamlamışsınızdır.
    • variant.sku ifadesini bulamıyorsanız sonraki adıma geçin.
  3. Dosyanın en altına aşağıdaki kodu yapıştırın:

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. Kayıtyap ' a tıklayın.

Yöneticiden ürün varyasyonlarınıza SKU numaraları ekleme

Ürün sayfalarınızda SKU'ların görünmesi için Shopify yöneticisinden ürün çeşitlerinize SKU numaraları eklemeniz gerekir.

  1. Shopify yöneticinizden Ürünler'e gidin.

  2. Düzenlemek istediğiniz ürüne tıklayın.

  3. Birden fazla varyasyonu olan ürünler için Varyasyonlar bölümünde SKU numaralarınızı ekleyin:

  4. Kayıtyap ' a tıklayın.

Bölümlere ayrılmamış temalar için adımlar

Ürün sayfalarında SKU numaralarını gösterme

Adımlar:

  1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.

  2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için düğmesine, ardından Kodu düzenle'ye tıklayın.

  3. Şablonlar dizininde product.liquid seçeneğine tıklayın.

  4. Aşağıdaki Liquid etiketini bulun:

{{ product.title }}

Bu kod, ürün sayfanıza ürün başlıklarınızı işler.

  1. {{ product.title }} içeren kodun altına yeni bir satır açarak aşağıdaki kodu yapıştırın:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. Kayıtyap ' a tıklayın.
  2. Brooklyn veya Venture dışında ücretsiz bir Shopify teması kullanıyorsanız aşağıdaki kod satırını bulun:
var selectCallback = function(variant, selector) {

Yukarıda yer alan kod satırını product.liquid içerisinde bulamıyorsanız, bunu Düzen dizininde theme.liquid içerisinde bulabilirsiniz.

  • Brooklyn ve Venture: Brooklyn veya Venture kullanıyorsanız farklı bir kod satırı bulup düzenlemeniz gerekir. Assets (Öğeler) dizininde theme.js.liquid dosyasına tıklayın ve aşağıdaki kod satırını bulun:
theme.productVariantCallback = function (variant, selector) {
  1. Altına yeni bir satıra aşağıdaki kodu yapıştırın:
if (variant) {
      document.querySelector('.variant-sku').innerText = variant.sku;
    }
    else {
      document.querySelector('.variant-sku').innerText = '';
    }

Kodunuz aşağıdaki gibi olmalıdı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. Kayıtyap ' a tıklayın.

Yöneticiden ürün varyasyonlarınıza SKU numaraları ekleme

Ürün sayfalarınızda SKU'ların görünmesi için Shopify yöneticisinden ürün çeşitlerinize SKU numaraları eklemeniz gerekir.

  1. Shopify yöneticinizden Ürünler'e gidin.

  2. Düzenlemek istediğiniz ürüne tıklayın.

  3. Birden fazla varyasyonu olan ürünler için SKU numaralarınızı Varyasyonlar bölümünden ekleyin:

    SKUs
    Varyasyonları olmayan ürünler için SKU numaranızı Envanter bölümünden ekleyin:
    SKU for products without variants

  4. Kayıtyap ' a tıklayın.

Aradığınız cevapları bulamıyor musunuz? Yardımcı olmak için buradayız.