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.

Note

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

Caution

This solution is designed for Shopify themes and might not work in third-party themes. If it does not work, you can try using the non-sectioned solution or contact your theme author.

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. To figure out whether your theme supports sections, go to the theme's Edit HTML/CSS page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, then click the Sectioned themes button and follow the instructions. If you are using non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

Show SKU for sectioned themes

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

  2. Click product-template.liquid in the Sections folder to open it in the code editor.

  3. Copy the following code:

    
    {% assign current_variant = product.selected_or_first_available_variant %}
    <span class="variant-sku">{{current_variant.sku}}</span>
    
    
  4. Paste the code that you copied into your product-template.liquid file, wherever you want the SKU to appear.

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

    Sku section
  5. 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

Show SKU for non-sectioned themes

Caution

This solution will not work in the Shopify non-sectioned Boundless theme.

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

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

  3. Copy the following HTML code:

    
    {% assign current_variant = product.selected_or_first_available_variant %}
    <span class="variant-sku">{{current_variant.sku}}</span>
    
    
  4. 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
  5. 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.

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