Show SKU numbers on product pages

SKUs (stock keeping units) are numbers, typically alphanumeric, that are used to help identify products and track inventory. If a store uses SKUs, then a unique number is assigned to each individual product variant. You can show SKU numbers for variants on your product pages by editing your theme code:

Sectioned and non-sectioned themes

Show SKU numbers on product pages

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Sections directory, click product.liquid or product-template.liquid.
Find the following Liquid tag:

{{ product.title }}

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

On a new line below the line of code that includes {{ product.title }}, paste the following code:

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

Click Save.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Sections directory, click product.liquid or product-template.liquid.
Find the following Liquid tag:

{{ product.title }}

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

On a new line below the line of code that includes {{ product.title }}, paste the following code:

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

Click Save.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Sections directory, click product.liquid or product-template.liquid.
Find the following Liquid tag:

{{ product.title }}

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

On a new line below the line of code that includes {{ product.title }}, paste the following code:

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

Click Save.

Select your theme

The next steps for this customization vary depending on your theme. Click the button for your theme and follow the instructions.

Steps for Boundless

In the Assets directory, click theme.js.liquid.
Look for variant.sku.

If you're able to find variant.sku, then you have completed the customization.

If you're unable to find variant.sku, then continue to the next step.
At the bottom of the file, paste the following 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);
});

Click Save.

Steps for Brooklyn

In the Assets directory, click theme.js.liquid.
Look for variant.sku.

If you're able to find variant.sku, then you have completed the customization.

If you're unable to find variant.sku, then continue to the next step.
At the bottom of the file, paste the following 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;
      });
    });
  }
});

Click Save.

Steps for Debut

In the Assets directory, click theme.js.
Look for variant.sku.

If you're able to find variant.sku, then you have completed the customization.

If you're unable to find variant.sku, then continue to the next step.
At the bottom of the file, paste the following 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;
      });
    });
  }
});

Click Save.

Steps for Express

In the Layout directory, click theme.liquid.
Find the closing </body> tag.
On the line immediately above the closing </body> tag, paste the following code:

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

Click Save.

Steps for Minimal

In the Assets directory, click theme.js.
Look for variant.sku.

If you're able to find variant.sku, then you have completed the customization.

If you're unable to find variant.sku, then continue to the next step.
At the bottom of the file, paste the following 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;
      });
    });
  }
});

Click Save.

Steps for Narrative

In the Assets directory, click custom.js.
At the bottom of the file, paste the following 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;
      });
    });
  }
});

Click Save.

Steps for Simple

In the Assets directory, click theme.js.liquid.
Look for variant.sku.

If you're able to find variant.sku, then you have completed the customization.

If you're unable to find variant.sku, then continue to the next step.
At the bottom of the file, paste the following 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;
      });
    });
  }
});

Click Save.

Steps for Supply

In the Assets directory, click theme.js.liquid.
Look for variant.sku.

If you're able to find variant.sku, then you have completed the customization.

If you're unable to find variant.sku, then continue to the next step.
At the bottom of the file, paste the following 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;
      });
    });
  }
});

Click Save.

Steps for Venture

In the Assets directory, click theme.js.
Look for variant.sku.

If you're able to find variant.sku, then you have completed the customization.

If you're unable to find variant.sku, then continue to the next step.
At the bottom of the file, paste the following 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;
      });
    });
  }
});

Click Save.

Add SKU numbers to your product variants from the admin

To have SKUs appear on your product pages, you must add SKU numbers to your product variants from in Shopify admin.

From your Shopify admin, go to Products.
Click the product that you want to edit.
For products with multiple variants, in the Variants section, add your SKU numbers:

For products without variants, in the Inventory section, add your SKU number:
Click Save.

Show SKU numbers on product pages

Steps:

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Templates directory, click product.liquid.
Find the following Liquid tag:

{{ product.title }}

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

On a new line below the line of code that includes {{ product.title }}, paste the following:

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

Click Save.
If you're using a free Shopify theme that isn't Brooklyn or Venture, then find the following line of code:

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 the following line of code:

theme.productVariantCallback = function (variant, selector) {

On a new line below, paste the following code:

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

Click Save.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Templates directory, click product.liquid.
Find the following Liquid tag:

{{ product.title }}

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

On a new line below the line of code that includes {{ product.title }}, paste the following:

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

Click Save.
If you're using a free Shopify theme that isn't Brooklyn or Venture, then find the following line of code:

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 the following line of code:

theme.productVariantCallback = function (variant, selector) {

On a new line below, paste the following code:

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

Click Save.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
In the Templates directory, click product.liquid.
Find the following Liquid tag:

{{ product.title }}

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

On a new line below the line of code that includes {{ product.title }}, paste the following:

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

Click Save.
If you're using a free Shopify theme that isn't Brooklyn or Venture, then find the following line of code:

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 the following line of code:

theme.productVariantCallback = function (variant, selector) {

On a new line below, paste the following code:

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

Click Save.

Add SKU numbers to your product variants from the admin

To have SKUs appear on your product pages, you must add SKU numbers to your product variants from in Shopify admin.

From your Shopify admin, go to Products.
Click the product that you want to edit.
For products with multiple variants, in the Variants section, add your SKU numbers:
For products without variants, in the Inventory section, add your SKU number:
Click Save.

Show SKU numbers on product pages

Sectioned and non-sectioned themes

On this page

Show SKU numbers on product pages

Select your theme

Steps for Boundless

Steps for Brooklyn

Steps for Debut

Steps for Express

Steps for Minimal

Steps for Narrative

Steps for Simple

Steps for Supply

Steps for Venture

Add SKU numbers to your product variants from the admin

Show SKU numbers on product pages

Steps:

Add SKU numbers to your product variants from the admin