Show SKU numbers on product pages

You can show SKU numbers for products or variants by adding some code to your product pages and theme scripts.

Caution

This solution will not work in the Shopify Boundless theme and might not work in third-party themes. If it doesn't work in your third-party theme, please contact your theme author.

Note

You can export a copy of your theme to use as a backup copy.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click product.liquid in the Templates folder to open it in the code editor.

  4. Copy the following HTML code:

    <span class="variant-sku"></span>
    
  5. Paste the code that you copied into your product.liquid file wherever you want the SKU to appear.

    This example shows the SKU under the product title in product.liquid:

    Variant sku span placement
  6. Press ctrl + F on a PC or command + F on a Mac and search for the JavaScript selectCallback function. Where you will find it varies from theme to theme, but it is often at the bottom of product.liquid or theme.liquid:

    Selectcallback

    Tip

    If you're using the Brooklyn or Venture themes, the selectCallback function is called productVariantCallback and is located in theme.js.liquid in the theme's Assets folder.

  7. Copy the following code and paste it after the beginning of the selectCallback function:

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

    The result should look something like this:

    Variant sku selectCallback
  8. Click Save to confirm the changes to your theme files.

On the storefront, your product page will show the SKU under the product title:

Variant sku

Want to discuss this page?

Visit the Shopify Community