Show SKU numbers on product pages - Dawn 2.0

[Sweets-n-Things]

Can anyone help on a easy way to display the SKU details for products and variants on default product page in Dawn 2.0 please??

I found this but it stated not 2.0

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku

[zahid]

Hey,

If you edit the theme code and go to Sections → main-product.liquid you will see code relating to product properties e.g.

{{ product.description }}

and

{{ product.title }}

Simply add the product / variant attributes that you want to display in there.

[DelightCart]

May this help you. Click Here

[Sweets-n-Things]

thanks, i was aware of this page, however not the specifics of the code for the DAWN 2.0 theme to get the product SKU to update with the variants? any advise appreciated

Select your theme

The next steps for this customization vary depending on your theme. Click the button for your theme and follow the instructions.

[madiasdomain]

If you haven’t figured out yet, with the skus changing when clicking different options, check out this post below from @Alan15 It worked for me and many others too!!

For the Dawn theme, add this code to the main-product.liquid file , directly to the code after the title, or add it to a custom block as described above:

<div class="hideAll">
    <p><span>SKU: </span><span class="sku"></span></p>       
</div>

{% capture 'variant_sku' %}       
    {% for variant in product.variants %}
        {{variant.id}}:{{ variant.sku| json }}
        {% unless forloop.last %},{% endunless %}           
   {% endfor %}
{% endcapture %}  
        
<script>
  const currentVariantSku = {{ product.selected_or_first_available_variant.id }};
  const variantSku = { {{ variant_sku }} };        
  const getSku = (id) => {
  let selector = document.querySelector('.sku');
  let hide = document.querySelector('.hideAll')
    if (variantSku[id]) {
     hide.style.display = 'block'
     selector.innerHTML = variantSku[id];
    }
    else 
     hide.style.display = 'none'
  }
  getSku(currentVariantSku);

</script>

You then need to update the global.js file in the Assets folder. Find the code beginning with onVariantChange() , it should be around line 740. Update it to look like this:

 onVariantChange() {
    this.updateOptions();
    this.updateMasterId();
    this.toggleAddButton(true, '', false);
    this.updatePickupAvailability();
    this.removeErrorMessage();

    if (!this.currentVariant) {
      this.toggleAddButton(true, '', true);
      this.setUnavailable();
    } else {
      this.updateMedia();
      this.updateURL();
      this.updateVariantInput();
      this.renderProductInfo();
      this.updateShareUrl();
      this.updateSku();
    }
  }
  
 updateSku() {
	  getSku(this.currentVariant.id);
  }

  updateOptions() {
    this.options = Array.from(this.querySelectorAll('select'), (select) => select.value);
  }   

I’ve added

this.updateSku();

and

updateSku() {
getSku(this.currentVariant.id);
}

to the existing code.

This should update the SKU variant value without a page refresh.

If you only need the first 4 numbers of the SKU, change the javascript code above to be:

selector.innerHTML = variantSku[id].substring(0,4);

[pepsi_max2k]

Well this needs bumping. Spent weeks trying to figure out how to add variant SKUs and Barcodes to product pages and this solves it.

Added more detail below, to also include barcodes, basically still follows Alan15’s post from https://community.shopify.com/c/shopify-design/sku-id-on-dawn/m-p/1472513#M387714

1. Add the below to a Custom Liquid block in theme editor (I put mine within the Product Information block).

    

SKU:  Barcode: 

       

{% capture 'variant_barcode' %}       
    {% for variant in product.variants %}
        {{variant.id}}:{{ variant.barcode| json }}
        {% unless forloop.last %},{% endunless %}           
   {% endfor %}
{% endcapture %}

{% capture 'variant_sku' %}       
    {% for variant in product.variants %}
        {{variant.id}}:{{ variant.sku| json }}
        {% unless forloop.last %},{% endunless %}           
   {% endfor %}
{% endcapture %}

        

2. In global.js (found in code editor for theme, under Assets), find the “onVariantChange() {” line, and update it to the following. Basically adds this.updateSku and the updateSku function, and again for barcode.

onVariantChange() {
    this.updateOptions();
    this.updateMasterId();
    this.toggleAddButton(true, '', false);
    this.updatePickupAvailability();
    this.removeErrorMessage();

    if (!this.currentVariant) {
      this.toggleAddButton(true, '', true);
      this.setUnavailable();
    } else {
      this.updateMedia();
      this.updateURL();
      this.updateVariantInput();
      this.renderProductInfo();
      this.updateShareUrl();
      this.updateSku();
      this.updateBarcode();
    }
  }
  
 updateSku() {
	  getSku(this.currentVariant.id);
  }
  
  updateBarcode() {
	  getBarcode(this.currentVariant.id);
  }

  updateOptions() {
    this.options = Array.from(this.querySelectorAll('select'), (select) => select.value);
  }

And that should be it. Barcodes and SKUs now updating on variant selection in product pages on OS 2.0, thanks to Alan15 and Madiasdomain

[samlearay]

Thats perfect, any idea how to do the same thing to show a variants inventory stock quantity?

[pepsi_max2k]

Yup; you can do it with any of the variant attributes shown in https://shopify.dev/api/liquid/objects/variant

So just duplicate everything for eg. barcode, and change the word barcode to inventory_quantity.

for the noobs:

    

SKU:  Barcode: 

       

{% capture 'variant_barcode' %}       
    {% for variant in product.variants %}
        {{variant.id}}:{{ variant.barcode| json }}
        {% unless forloop.last %},{% endunless %}           
   {% endfor %}
{% endcapture %}

{% capture 'variant_sku' %}       
    {% for variant in product.variants %}
        {{variant.id}}:{{ variant.sku| json }}
        {% unless forloop.last %},{% endunless %}           
   {% endfor %}
{% endcapture %}

{% capture 'variant_inventory_quantity' %}       
    {% for variant in product.variants %}
        {{variant.id}}:{{ variant.inventory_quantity| json }}
        {% unless forloop.last %},{% endunless %}           
   {% endfor %}
{% endcapture %}

        

onVariantChange() {
    this.updateOptions();
    this.updateMasterId();
    this.toggleAddButton(true, '', false);
    this.updatePickupAvailability();
    this.removeErrorMessage();

    if (!this.currentVariant) {
      this.toggleAddButton(true, '', true);
      this.setUnavailable();
    } else {
      this.updateMedia();
      this.updateURL();
      this.updateVariantInput();
      this.renderProductInfo();
      this.updateShareUrl();
      this.updateSku();
      this.updateBarcode();
      this.updateInventoryQuantity();
    }
  }
  
 updateSku() {
	  getSku(this.currentVariant.id);
  }
  
  updateBarcode() {
	  getBarcode(this.currentVariant.id);
  }

  updateInventoryQuantity() {
	  getInventoryQuantity(this.currentVariant.id);
  }

  updateOptions() {
    this.options = Array.from(this.querySelectorAll('select'), (select) => select.value);
  }

[samlearay]

Thats great! Thank you

[samlearay]

We have implemented it and works great, apart from if an item is down to 0 then it goes blank. Any other figure, even minus figures show up perfectly (and we want it to so thats great), but if something is 0 then its not appearing. Any ideas? I want it to show 0 if possible.

[pepsi_max2k]

You’d have to play around with it but it might have something to do with the following:

if (variantInventoryQuantity[id]) {
     hide.style.display = 'block'
     selector.innerHTML = variantInventoryQuantity[id];
    }
    else 
     hide.style.display = 'none'
  }

This hides the inventory text if the inventory quantity is blank/null/doesnt exits/maybe 0? In which case…

if (variantInventoryQuantity[id]) {
     hide.style.display = 'block'
     selector.innerHTML = variantInventoryQuantity[id];
    }
    else 
      hide.style.display = 'block'
     selector.innerHTML = '0';
  }

Not sure if that code’s quite right either, or if that’s the actual issue, but may work?

[tristancliffe]

This works BRILLIANTLY!!!

I am also adding a “Contact us for more info” email button to the product page (via a custom block), and I’d like the variant.sku to update in the Subject line of the button.

So, to reiterate, I have your code in a custom block, and in ANOTHER custom block I have the following lines

[
**{{ 'products.product.enquire' | t }}**

](mailto:sales@xxx.com?subject=Shop enquiry - {{ product.title }} - {{variant.sku }}>
<button type=)

And I’d really like it if the same global.js and script could update the email subject SKU with the correct SKU for the one chosen… Any ideas? Because the original code uses , I don’t see how I can use that in the Subject line.

[Cholavendhan]

Thanks for the solution. Simple and working so well. Thanks.

[Cholavendhan]

Brilliant work. Clear step by step instruction. Hats off. Thank you.

[Cholavendhan]

This works only for vintage theme not applicable for 2.0 themes like Dawn

[tristancliffe]

Not true - works brilliantly in Dawn 2.0.

[tristancliffe]

I solved my issue, and using the code from this thread as a basis it now updates sku displayed on the page, in the email link, and it updates the product weight shown on the page.

Took a bit of figuring out with the email link, but got there in the end.

Dawn is a lovely theme to customise!

[barcusmrandt]

I can confirm that this solution works perfectly in Dawn 2.0

[Sankalpa97]

Thanks Mate! works like a charm.

[madiasdomain]