How to Show Variant SKU Number on Product Pages - Shopify 2.0 Dawn and free themes

Option 1: Showing SKU for a product without variants

This only works if your product does not have variants.

Simply add this code into a Custom Liquid block:

{% if product.selected_or_first_available_variant.sku != blank %}
  <p>SKU: {{ product.selected_or_first_available_variant.sku }}</p>
{% endif %}

Option 2: Dynamically updating the SKU when variant is changed

The best way to do it on Dawn and other free themes by Shopify.

Inside main-product.liquid

Create a new block type in the schema:

{
  "type": "variant_sku",
  "name": "⚡️ Variant SKU",
  "limit": 1
},

Create the HTML that is output when the new block is added to the page:

{%- when 'variant_sku' -%} 
<div id="sku-{{ section.id }}" {{ block.shopify_attributes }} style="margin-top: -15px;"> 
  {% if product.selected_or_first_available_variant.sku != blank %}
    <p id="product-sku">SKU: {{ product.selected_or_first_available_variant.sku }} </p>
  {% endif %}
</div>

Remove the style="margin-top: -15px;" if you want some spacing above. This was only done in case you want it placed close underneath the product title.

Inside global.js

Inside renderProductInfo(), after the lines const price and if price:

const sku = document.getElementById(`sku-${this.dataset.section}`);
if (sku) sku.classList.remove('visibility-hidden'), this.updateSku(html);

After the renderProductInfo() function, declare a new function :

updateSku(html) {
  const id = `sku-${this.dataset.section}`;
  const destination = document.getElementById(id);
  const source = html.getElementById(id);

  if (source && destination) destination.innerHTML = source.innerHTML;
}

Inside the setUnavailable() function, just a bit lower:

// above line if (!addButton) return;
const sku = document.getElementById(`sku-${this.dataset.section}`);

// below line if (!addButton) return;
if (sku) sku.classList.add('visibility-hidden');

Option 3: Listing the variants and their SKU’s

Easy way if you are using another theme and cannot do the above. Simply output a list of all variants and their SKU’s.

If your theme has a collapsible accordion block with a liquid field, that would be the ideal place to add this.

<h4>SKU's</h4>
{% for variant in product.variants %}
	<p>{{ variant.title }}: {{ variant.sku }}</p>
{% endfor %}

Or with bullet points:

<h4>SKU's</h4>
<ul>
	{% for variant in product.variants %}
		<li>{{ variant.title }}: {{ variant.sku }}</li>
	{% endfor %}
</ul>

If your theme doesn’t have a liquid field in the accordion tab block, then you can add a liquid field inside the schema by adding this code to the block settings array:

{
  "type": "liquid",
  "id": "liquid",
  "label": "Liquid"
},