แสดงหมายเลข SKU ในหน้าสินค้า

หน้านี้พิมพ์ขึ้นเมื่อ Apr 19, 2024 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku

SKU (รหัสสินค้าคงคลัง) คือตัวเลข โดยทั่วไปแล้วจะเป็นตัวอักษรและตัวเลขที่ใช้เพื่อระบุสินค้าและติดตามสินค้าคงคลัง หากร้านค้าใช้ SKU หมายเลขเฉพาะจะถูกกำหนดให้กับตัวเลือกสินค้าแต่ละรายการ คุณสามารถแสดงหมายเลข SKU ของตัวเลือกสินค้าในหน้าสินค้าได้โดยแก้ไขโค้ดธีมของคุณ:

ตัวอย่าง SKU ของตัวเลือกสินค้า

ธีมที่แบ่งส่วนและธีมที่ไม่แบ่งส่วน

หมายเหตุ: ขั้นตอนสำหรับบทแนะนำการใช้งานนี้จะแตกต่างกันไป ขึ้นอยู่กับว่าคุณกำลังใช้ธีมที่แบ่งส่วน หรือไม่แบ่งส่วน อยู่ โดยธีมที่แบ่งส่วนจะให้คุณสามารถลากและวางวัตถุเพื่อจัดการเลย์เอาต์ของหน้าแรกได้ ในขณะที่ธีมที่ไม่แบ่งส่วนนั้นไม่สามารถทำได้

หากต้องการทราบว่าธีมของคุณรองรับส่วนหรือไม่ ให้ไปที่หน้าแก้ไขโค้ดของธีม หากมีไฟล์ในไดเรกทอรีส่วน หมายความว่าคุณกำลังใช้ธีมที่แบ่งส่วน ธีมที่ไม่แบ่งส่วนเปิดตัวก่อนเดือนตุลาคม 2016 และไม่มีไฟล์ในไดเรกทอรีส่วน

หากคุณใช้ธีมที่แบ่งส่วน ให้คลิกปุ่ม ธีมที่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ หากคุณใช้ธีมที่ไม่แบ่งส่วนซึ่งเป็นรุ่นเก่า ให้คลิกปุ่ม ธีมที่ไม่แบ่งส่วน แล้วดำเนินการตามคำแนะนำ

ในหน้านี้

ขั้นตอนต่างๆ สำหรับธีมที่แบ่งส่วน

แสดงหมายเลข SKU ในหน้าสินค้า

  1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
  2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
  3. ในไดเรกทอรีส่วน ให้คลิกที่ product.liquid หรือ product-template.liquid
  4. ค้นหาแท็ก Liquid ต่อไปนี้: 
{{ product.title }}

นี่คือโค้ดที่แสดงผลชื่อสินค้าของคุณในหน้าสินค้า

  1. ในบรรทัดใหม่ด้านล่างบรรทัดของโค้ดที่มี {{ product.title }} ให้วางโค้ดต่อไปนี้: 
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. คลิกที่ “บันทึก”

เลือกธีมของคุณ

ขั้นตอนต่อไปสำหรับการปรับแต่งนี้จะแตกต่างกันไปขึ้นอยู่กับธีมของคุณ คลิกปุ่มสำหรับธีมของคุณและปฏิบัติตามคำแนะนำ

ขั้นตอนสำหรับ Boundless

  1. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js.liquid

  2. ค้นหา variant.sku

    • หากคุณสามารถค้นหา variant.sku ได้ แสดงว่าคุณได้ทำการปรับแต่งเสร็จสิ้นแล้ว
    • หากคุณไม่สามารถค้นหา variant.sku ได้ ให้ไปยังขั้นตอนถัดไป

  3. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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. คลิกที่ “บันทึก”

ขั้นตอนสำหรับ Brooklyn

  1. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js.liquid

  2. ค้นหา variant.sku

    • หากคุณสามารถค้นหา variant.sku ได้ แสดงว่าคุณได้ทำการปรับแต่งเสร็จสิ้นแล้ว
    • หากคุณไม่สามารถค้นหา variant.sku ได้ ให้ไปยังขั้นตอนถัดไป

  3. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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. คลิกที่ “บันทึก”

ขั้นตอนสำหรับ Debut

  1. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js

  2. ค้นหา variant.sku

    • หากคุณสามารถค้นหา variant.sku ได้ แสดงว่าคุณได้ทำการปรับแต่งเสร็จสิ้นแล้ว
    • หากคุณไม่สามารถค้นหา variant.sku ได้ ให้ไปยังขั้นตอนถัดไป

  3. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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. คลิกที่ “บันทึก”

ขั้นตอนต่างๆ สำหรับธีม Express

  1. ในไดเรกทอรีเลย์เอาต์ ให้คลิก theme.liquid
  2. ค้นหา แท็กปิด </body>
  3. ในบรรทัดเหนือแท็กปิด </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. คลิกที่ “บันทึก”

ขั้นตอนสำหรับ Minimal

  1. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js

  2. ค้นหา variant.sku

    • หากคุณสามารถค้นหา variant.sku ได้ แสดงว่าคุณได้ทำการปรับแต่งเสร็จสิ้นแล้ว
    • หากคุณไม่สามารถค้นหา variant.sku ได้ ให้ไปยังขั้นตอนถัดไป

  3. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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. คลิกที่ “บันทึก”

ขั้นตอนสำหรับ Narrative

  1. ในไดเรกทอรีชิ้นงาน ให้คลิก custom.js
  2. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้: 
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. คลิกที่ “บันทึก”

ขั้นตอนสำหรับ Simple

  1. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js.liquid

  2. ค้นหา variant.sku

    • หากคุณสามารถค้นหา variant.sku ได้ แสดงว่าคุณได้ทำการปรับแต่งเสร็จสิ้นแล้ว
    • หากคุณไม่สามารถค้นหา variant.sku ได้ ให้ไปยังขั้นตอนถัดไป

  3. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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. คลิกที่ “บันทึก”

ขั้นตอนสำหรับ Supply

  1. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js.liquid

  2. ค้นหา variant.sku

    • หากคุณสามารถค้นหา variant.sku ได้ แสดงว่าคุณได้ทำการปรับแต่งเสร็จสิ้นแล้ว
    • หากคุณไม่สามารถค้นหา variant.sku ได้ ให้ไปยังขั้นตอนถัดไป

  3. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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. คลิกที่ “บันทึก”

ขั้นตอนสำหรับธีม Venture

  1. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js

  2. ค้นหา variant.sku

    • หากคุณสามารถค้นหา variant.sku ได้ แสดงว่าคุณได้ทำการปรับแต่งเสร็จสิ้นแล้ว
    • หากคุณไม่สามารถค้นหา variant.sku ได้ ให้ไปยังขั้นตอนถัดไป

  3. ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้:

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. คลิกที่ “บันทึก”

เพิ่มหมายเลข SKU ให้กับตัวเลือกสินค้าของคุณจากส่วนผู้ดูแล

หากต้องการให้ SKU ปรากฏในหน้าสินค้าของคุณ คุณต้องเพิ่มหมายเลข SKU ไปยังตัวเลือกสินค้าของคุณจากส่วนผู้ดูแล Shopify

  1. ในส่วนผู้ดูแล Shopify ให้ไปที่สินค้า

  2. คลิกสินค้าที่คุณต้องการแก้ไข

  3. หากสินค้าที่มีตัวเลือกสินค้าหลายรายการ ให้เพิ่มหมายเลข SKU ของคุณในส่วนตัวเลือกสินค้า:

  4. คลิกที่ “บันทึก”

ขั้นตอนต่างๆ สำหรับธีมที่ไม่แบ่งส่วน

แสดงหมายเลข SKU ในหน้าสินค้า

ขั้นตอน:

  1. ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
  2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
  3. ในไดเรกทอรีเทมเพลตให้คลิก product.liquid.
  4. ค้นหาแท็ก Liquid ต่อไปนี้: 
{{ product.title }}

นี่คือโค้ดที่แสดงผลชื่อสินค้าของคุณในหน้าสินค้า

  1. ในบรรทัดใหม่ด้านล่างโค้ดที่มี {{ product.title }} ให้วางสิ่งต่อไปนี้: 
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. คลิกที่ “บันทึก”
  2. หากคุณใช้ธีม Shopify ฟรีซึ่งไม่ใช่ธีม Brooklyn หรือ Venture ให้ค้นหาบรรทัดต่อไปนี้ของโค้ด: 
var selectCallback = function(variant, selector) {

หากคุณไม่พบบรรทัดของโค้ดข้างต้นใน product.liquid คุณจะต้องค้นหาใน theme.liquid ในไดเรกทอรีเลย์เอาต์

  • Brooklyn และ Venture: หากคุณใช้ธีม Brooklyn หรือ Venture คุณจะต้องค้นหาและแก้ไขโค้ดบรรทัดอื่น ในไดเรกทอรีองค์ประกอบ ให้คลิกที่ theme.js.liquid และค้นหาบรรทัดต่อไปนี้ของโค้ด: 
theme.productVariantCallback = function (variant, selector) {
  1. วางโค้ดต่อไปนี้ในบรรทัดใหม่ด้านล่าง: 
if (variant) {
      document.querySelector('.variant-sku').innerText = variant.sku;
    }
    else {
      document.querySelector('.variant-sku').innerText = '';
    }

โค้ดของคุณควรมีลักษณะดังนี้:

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. คลิกที่ “บันทึก”

เพิ่มหมายเลข SKU ให้กับตัวเลือกสินค้าของคุณจากส่วนผู้ดูแล

หากต้องการให้ SKU ปรากฏในหน้าสินค้าของคุณ คุณต้องเพิ่มหมายเลข SKU ไปยังตัวเลือกสินค้าของคุณจากส่วนผู้ดูแล Shopify

  1. ในส่วนผู้ดูแล Shopify ให้ไปที่สินค้า

  2. คลิกสินค้าที่คุณต้องการแก้ไข

  3. หากสินค้าที่มีตัวเลือกสินค้าหลายรายการ ให้เพิ่มหมายเลข SKU ของคุณในส่วนตัวเลือกสินค้า:

    SKUs
    สำหรับสินค้าที่ไม่มีตัวเลือกสินค้า ในส่วนสินค้าคงคลัง ให้เพิ่มหมายเลข SKU ของคุณ:
    SKU for products without variants

  4. คลิกที่ “บันทึก”

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี