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 :
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:
