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

Trang này được in vào Jun 26, 2022. Để 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.

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

Để chỉnh sửa chủ đề để hiển thị số SKU trên trang sản phẩm:

Trong 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, rồi nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).

Trong ứng dụng Shopify, chạm vào Cửa hàng.
Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.
Chạm vào Manage themes (Quản lý chủ đề).
Tìm chủ đề bạn muốn chỉnh sửa, rồi nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).

Trong ứng dụng Shopify, chạm vào Cửa hàng.
Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.
Chạm vào Manage themes (Quản lý chủ đề).
Tìm chủ đề bạn muốn chỉnh sửa, rồi nhấp vào Actions (Thao tác) > Edit code (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 }}

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

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.
Ở 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.
Ở 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.
Ở 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.
Ở 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.
Ở 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.
Ở 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.
Ở 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 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).

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

Để chỉnh sửa chủ đề để hiển thị số SKU trên trang sản phẩm:

Trong 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, rồi nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).

Trong ứng dụng Shopify, chạm vào Cửa hàng.
Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.
Chạm vào Manage themes (Quản lý chủ đề).
Tìm chủ đề bạn muốn chỉnh sửa, rồi nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).

Trong ứng dụng Shopify, chạm vào Cửa hàng.
Trong phần Kênh bán hàng, chạm vào Cửa hàng trực tuyến.
Chạm vào Manage themes (Quản lý chủ đề).
Tìm chủ đề bạn muốn chỉnh sửa, rồi nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã).

Trong thư mục Templates, nhấp vào product.liquid.
Tìm thẻ Liquid sau:

{{ product.title }}

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

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

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

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 = '';
    }

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

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

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

Dùng thử miễn phí