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

[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). 

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

{% 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 %}

        
<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);

  const currentVariantBarcode = {{ product.selected_or_first_available_variant.id }};
  const variantBarcode = { {{ variant_barcode }} };        
  const getBarcode = (id) => {
  let selector = document.querySelector('.barcode');
  let hide = document.querySelector('.hideAll')
    if (variantBarcode[id]) {
     hide.style.display = 'block'
     selector.innerHTML = variantBarcode[id];
    }
    else 
     hide.style.display = 'none'
  }
  getBarcode(currentVariantBarcode);

</script>

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: 

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

{% 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 %}

        
<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);

  const currentVariantBarcode = {{ product.selected_or_first_available_variant.id }};
  const variantBarcode = { {{ variant_barcode }} };        
  const getBarcode = (id) => {
  let selector = document.querySelector('.barcode');
  let hide = document.querySelector('.hideAll')
    if (variantBarcode[id]) {
     hide.style.display = 'block'
     selector.innerHTML = variantBarcode[id];
    }
    else 
     hide.style.display = 'none'
  }
  getBarcode(currentVariantBarcode);


  const currentVariantInventoryQuantity = {{ product.selected_or_first_available_variant.id }};
  const variantInventoryQuantity = { {{ variant_inventory_quantity }} };        
  const getInventoryQuantity = (id) => {
  let selector = document.querySelector('.inventory_quantity');
  let hide = document.querySelector('.hideAll')
    if (variantInventoryQuantity[id]) {
     hide.style.display = 'block'
     selector.innerHTML = variantInventoryQuantity[id];
    }
    else 
     hide.style.display = 'none'
  }
  getBarcode(currentVariantInventoryQuantity);

</script>

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?

[Cholavendhan]

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

[marinaevans]

This is so helpful, thank you! But I am finding that SKU & Barcode disappear when I select any variant except the first one on the product page. The variant for this product is quantity; each quantity has its own SKU (a variation on the Barcode (actually an ISBN), which is the same for all variants). See screenshots below. Any suggestions? Thanks so much!

First variant (100) selected, correctly displays SKU and Barcode:

Second variant (250) selected, SKU and Barcode disappear:

[Westy247365]

Appreciate this is a bit old now, but still works (sort of). The issue is that If a product only has a SKU and no barcode, it will not show the SKU only. It only shows both the SKU and Barcode or nothing at all. They need to be able to show and hide independently. Is there a way to make it so that it will how just the SKU or just the barcode if that is all a product has?

[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

<a  href="mailto:sales@xxx.com?subject=Shop enquiry - {{ product.title }} - {{variant.sku }}>
<button type="submit" name="add" class="product-form__submit button button--full-width button--secondary">
<span><strong>{{ 'products.product.enquire' | t }}</strong></span>
</button>
</a>

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 <span class="sku">, I don't see how I can use that in the Subject line.

[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!

[Cholavendhan]

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

[barcusmrandt]

I can confirm that this solution works perfectly in Dawn 2.0

[Sankalpa97]

Thanks Mate! works like a charm. 😍

[madiasdomain]

😊👍

[rcdxbweb]

Hey! Im trying to follow this one, but on the global.js i can't find the onVariantChange() line. Im using Ella Theme and not Dawn maybe that's why?

Any other workaround on this for other theme?

I also cannot find the product.liquid and product-template.liquid.

[FairWind]

I am having the same issue. the onVariantChange line is no longer in Dawn's global.js file. In fact, I found the following code and comments on line 757 which I believe is the reason for the change in the global.js file:

  update() {
    // Temporarily prevents unneeded updates resulting from variant changes
    // This should be refactored as part of https://github.com/Shopify/dawn/issues/2057
    if (!this.slider || !this.nextButton) return;

With that, the solution no longer works. 

I'm on Dawn 15.2.0 and here is a link to my global.js file on that theme.

If anyone has a way to make this solution work with that global.js file it would be greatly appreciated!!

[Cholavendhan]

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

[tristancliffe]

Not true - works brilliantly in Dawn 2.0.