Hiển thị số SKU trên trang sản phẩm

Trang này được in vào Apr 26, 2024. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku.

SKU (đơn vị lưu kho) là số, thường là chữ và số, được sử dụng để giúp xác định sản phẩm và theo dõi hàng trong kho. Nếu cửa hàng sử dụng SKU, mỗi mẫu mã sản phẩm sẽ được chỉ định một số duy nhất. Bạn có thể hiển thị số SKU cho mẫu mã trên trang sản phẩm bằng cách chỉnh sửa mã chủ đề:

Ví dụ về SKU mẫu mã

Chủ đề có phân mục và không phân mục

Lưu ý

Các bước hướng dẫn này khác nhau tùy thuộc vào việc bạn sử dụng chủ đề có phân mục hay không phân mục. Chủ đề có phân mục cho phép bạn kéo và thả để sắp xếp bố cục trang chủ còn chủ đề không phân mục thì không.

Để tìm hiểu xem chủ đề của bạn có hỗ trợ phân mục không, vào trang Edit code (Chỉnh sửa mã) của chủ đề. Nếu có tệp trong thư mục Sections thì bạn đang sử dụng chủ đề có phân mục. Chủ đề không phân mục được phát hành trước tháng 10 năm 2016 và không có tệp trong thư mục Sections.

Nếu bạn đang sử dụng chủ đề có phân mục, nhấp vào nút Chủ đề có phân mục và làm theo hướng dẫn. Nếu bạn đang sử dụng chủ đề cũ và không phân mục, nhấp vào nút Chủ đề không phân mục và làm theo hướng dẫn.

Trên trang này

Các bước đối với Chủ đề có phân mục
Các bước đối với Chủ đề không phân mục

Các bước đối với Chủ đề có phân mục

Hiển thị số SKU trên trang sản phẩm

Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
Trong thư mục Mục, nhấp vào product.liquid hoặc product-template.liquid.
Tìm thẻ Liquid sau:

{{ product.title }}

Đây là mã kết xuất tiêu đề sản phẩm trên trang sản phẩm của bạn.

Dán mã sau trên một dòng mới bên dưới dòng mã bao gồm {{ product.title }}:

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

Nhấp vào Save (Lưu).

Chọn chủ đề

Các bước tùy chỉnh tiếp theo thay đổi tùy thuộc vào chủ đề của bạn. Nhấp vào nút dành cho chủ đề của bạn và làm theo hướng dẫn.

Các bước thực hiện dành cho chủ đề Boundless

Trong thư mục Assets, nhấp vào theme.js.liquid.
Tìm kiếm variant.sku:
- Nếu bạn có thể tìm được variant.sku thì nghĩa là bạn đã hoàn tất tùy chỉnh.
- Nếu bạn không tìm được variant.sku, hãy chuyển sang bước tiếp theo.
Ở cuối tệp, dán mã sau:

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);
});

Nhấp vào Save (Lưu).

Các bước dành cho chủ đề Brooklyn

Trong thư mục Assets, nhấp vào theme.js.liquid.
Tìm kiếm variant.sku:
- Nếu bạn có thể tìm được variant.sku thì nghĩa là bạn đã hoàn tất tùy chỉnh.
- Nếu bạn không tìm được variant.sku, hãy chuyển sang bước tiếp theo.
Ở cuối tệp, dán mã sau:

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;
      });
    });
  }
});

Nhấp vào Save (Lưu).

Các bước thực hiện dành cho chủ đề Khai trương

Trong thư mục Assets, nhấp vào theme.js.
Tìm kiếm variant.sku:
- Nếu bạn có thể tìm được variant.sku thì nghĩa là bạn đã hoàn tất tùy chỉnh.
- Nếu bạn không tìm được variant.sku, hãy chuyển sang bước tiếp theo.
Ở cuối tệp, dán mã sau:

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;
      });
    });
  }
});

Nhấp vào Save (Lưu).

Các bước dành cho chủ đề Express

Trong thư mục Layout, nhấp vào theme.liquid.
Tìm thẻ có kết thúc là </body>.
Trên dòng ngay phía trên thẻ có kết thúc là </body>, dán mã sau:

<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>

Nhấp vào Save (Lưu).

Các bước thực hiện dành cho chủ đề Minimal

Trong thư mục Assets, nhấp vào theme.js.
Tìm kiếm variant.sku:
- Nếu bạn có thể tìm được variant.sku thì nghĩa là bạn đã hoàn tất tùy chỉnh.
- Nếu bạn không tìm được variant.sku, hãy chuyển sang bước tiếp theo.
Ở cuối tệp, dán mã sau:

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;
      });
    });
  }
});

Nhấp vào Save (Lưu).

Các bước thực hiện dành cho chủ đề Narrative

Trong thư mục Assets, nhấp vào custom.js.
Ở cuối tệp, dán mã sau:

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;
      });
    });
  }
});

Nhấp vào Save (Lưu).

Các bước thực hiện dành cho chủ đề Simple

Trong thư mục Assets, nhấp vào theme.js.liquid.
Tìm kiếm variant.sku:
- Nếu bạn có thể tìm được variant.sku thì nghĩa là bạn đã hoàn tất tùy chỉnh.
- Nếu bạn không tìm được variant.sku, hãy chuyển sang bước tiếp theo.
Ở cuối tệp, dán mã sau:

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;
      });
    });
  }
});

Nhấp vào Save (Lưu).

Các bước thực hiện dành cho chủ đề Cung ứng

Trong thư mục Assets, nhấp vào theme.js.liquid.
Tìm kiếm variant.sku:
- Nếu bạn có thể tìm được variant.sku thì nghĩa là bạn đã hoàn tất tùy chỉnh.
- Nếu bạn không tìm được variant.sku, hãy chuyển sang bước tiếp theo.
Ở cuối tệp, dán mã sau:

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;
      });
    });
  }
});

Nhấp vào Save (Lưu).

Các bước thực hiện dành cho chủ đề Venture

Trong thư mục Assets, nhấp vào theme.js.
Tìm kiếm variant.sku:
- Nếu bạn có thể tìm được variant.sku thì nghĩa là bạn đã hoàn tất tùy chỉnh.
- Nếu bạn không tìm được variant.sku, hãy chuyển sang bước tiếp theo.
Ở cuối tệp, dán mã sau:

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;
      });
    });
  }
});

Nhấp vào Save (Lưu).

Thêm số SKU vào mẫu mã sản phẩm từ trang quản trị

Để SKU hiển thị trên trang sản phẩm, bạn phải thêm số SKU vào mẫu mã sản phẩm trong trang quản trị Shopify.

Trong trang quản trị Shopify, vào mục Sản phẩm.
Nhấp vào sản phẩm bạn muốn chỉnh sửa.
Đối với sản phẩm có nhiều mẫu mã, trong mục Mẫu mã, thêm số SKU:
Nhấp vào Save (Lưu).

Các bước đối với Chủ đề không phân mục

Hiển thị số SKU trên trang sản phẩm

Bước:

Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã.
Trong thư mục Templates, nhấp vào product.liquid.
Tìm thẻ Liquid sau:

{{ product.title }}

Đây là mã kết xuất tiêu đề sản phẩm trên trang sản phẩm của bạn.

Dán nội dung sau vào dòng mới bên dưới mã bao gồm {{ product.title }}:

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

Nhấp vào Save (Lưu).
Nếu bạn đang sử dụng chủ đề Shopify miễn phí, không phải chủ đề Brooklyn hay Venture, hãy tìm dòng mã sau:

var selectCallback = function(variant, selector) {

Nếu không tìm thấy dòng mã trên trong product.liquid, bạn sẽ tìm thấy dòng mã này trong theme.liquid, trong thư mục Bố cục.

Brooklyn và Venture: Nếu đang sử dụng chủ đề Brooklyn hoặc Venture, bạn sẽ cần tìm và chỉnh sửa dòng mã khác. Trong thư mục Phần tử, nhấp vào theme.js.liquid và tìm dòng mã sau:

theme.productVariantCallback = function (variant, selector) {

Dán mã sau vào một dòng mới bên dưới:

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

Mã của bạn sẽ có dạng như sau:

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
          }
        });
      };

Nhấp vào Save (Lưu).

Thêm số SKU vào mẫu mã sản phẩm từ trang quản trị

Để SKU hiển thị trên trang sản phẩm, bạn phải thêm số SKU vào mẫu mã sản phẩm trong trang quản trị Shopify.

Trong trang quản trị Shopify, vào mục Sản phẩm.
Nhấp vào sản phẩm bạn muốn chỉnh sửa.
Đối với sản phẩm có nhiều mẫu mã, trong mục Mẫu mã, thêm số SKU:
Đối với sản phẩm không có mẫu mã, trong mục Hàng trong kho, thêm số SKU:
Nhấp vào Save (Lưu).

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí