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:

Variant SKU

Sectioned and non-sectioned themes

Show SKU numbers on product pages

To edit your theme to show SKU numbers on product pages:

  1. Find the theme you want to edit, click Actions, and then click Edit code.

  2. In the Sections directory, click product-template.liquid.

  3. Find the following Liquid tag:

    {{ product.title }}
    

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

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

    Your code should look something like this (although the product page HTML varies theme to theme):

    <h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
    
    {% assign current_variant = product.selected_or_first_available_variant %}
    <span class="variant-sku">{{ current_variant.sku }}</span>
    
    {% if section.settings.show_vendor %}
      <p itemprop="brand" class="product-single__vendor">{{ product.vendor }}</p>
    {% endif %}
    
  5. Click Save. If you use a Shopify theme that is not Minimal, then you have completed the customization. If you use Minimal, then continue to follow the next steps.

  6. In the Assets directory, click theme.js.liquid.

  7. Find following line of code:

    var selectCallback = function(variant, selector) {
    
  8. On a new line below, paste the following code:

    if (variant) {
      $('.variant-sku').text(variant.sku);
    }
    else {
      $('.variant-sku').empty();
    }
    

    Your code should look like this:

    var selectCallback = function(variant, selector) {
    
        if (variant) {
          $('.variant-sku').text(variant.sku);
        }
        else {
          $('.variant-sku').empty();
        }
    
        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
          }
        });
      };
    
  9. 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.

  1. From your Shopify admin, click Products.

  2. Click on the product that you would like to edit.

  3. For products with multiple variants, in the Variants section, add your SKU numbers:

    SKUs

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

    SKU for products without variants
  4. Click Save.

Show SKU numbers on product pages

To edit your theme to show SKU numbers on product pages:

  1. Find the theme you want to edit, click Actions, and then click Edit code.

  2. In the Templates directory, click product.liquid.

  3. Find the following Liquid tag:

    {{ product.title }}
    

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

  4. 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>
    
  5. Click Save.

  6. If you are using a free Shopify theme that is not Brooklyn nor 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) {
    
  7. On a new line below, paste the following code:

        if (variant) {
          $('.variant-sku').text(variant.sku);
        }
        else {
          $('.variant-sku').empty();
        }
    

    Your code should look something like this:

        var selectCallback = function(variant, selector) {
    
            if (variant) {
              $('.variant-sku').text(variant.sku);
            }
            else {
              $('.variant-sku').empty();
            }
    
            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
              }
            });
          };
    
  8. 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.

  1. From your Shopify admin, click Products.

  2. Click on the product that you would like to edit.

  3. For products with multiple variants, in the Variants section, add your SKU numbers:

    SKUs

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

    SKU for products without variants
  4. Click Save.

Want to discuss this page?

Visit the Shopify Community