How to show SKU's on your product page

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.

Result:

How to:

1

Modify product.liquid

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

(Don't skip this step) Make a duplicate of your theme before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

From the Snippets folder, open product.liquid:

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

h1

Example:

Add a couple blank lines below the line ending with </h1>. Then add the following code:

<!-- Code added for SKU -->                       
{% assign current_variant = product.selected_or_first_available_variant %}
{% if current_variant.sku != "" %}
<p class="text-center uppercase"><span id="sku"></span></p> 
{% endif %}    
<!-- end SKU -->

Example:

Save the file.

2

Modify your Javascript file

This will vary depending on which version of Pipeline you're running: 

Check your version:
Which version of Pipeline am I using?

Pipeline 4 - From the Assets folder, open theme.js

Or

Earlier versions of Pipeline, from the Assets open shop.js.liquid

Part 1

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and find:

if (variant.available)

Example:

Part 2

Add the following code above the start of the found section:

/* -- code added for SKU -- */
$('#sku').text('SKU: ' + variant.sku);
/* - end - */

Example (theme.js):

Example for older versions of Pipeline (shop.js):

(be sure to add a couple blank lines before pasting the code). 

Save the file.

3

Add sku information to your product pages

In your product setup, update all products to include a SKU number - This is found done in the inventory section:

For products with variants:

Finally, if I have no SKU attached to my products, none will be shown:

If you have a product that has variants, make sure all variant options have a SKU or none.