How to display SKU ID below product name on Dawn theme?

[DollarsSense]

hi there. Can anyone advise how we can show the SKU ID below the Name title of a product on Product Pages. We are using the Dawn Theme. We have no coding skills but we can follow instructions 🙂 Thanks. 

[Ranaay]

STEP 1. Go to Online Stores > Themes > Action > Edit Code > search for main-product.liquid

STEP 2. Within main-product.liquid, look for

{%- when 'title' -%}
<h3 class="product__title" {{ block.shopify_attributes }}>
{{ product.title | escape }}
</h3>

Step 3. Add these two lines underneath it.

{%- assign current_variant = product.selected_or_first_available_variant -%}
<span>SKU: {{ current_variant.sku }}</span>

[tatumutv]

What about when I have different color variants? How do I get those to change too when the variant is selected?

[cpmusic_nicole]

I used this code snippet and it was working. I just tested it yesterday and it isn't anymore....can't figure out why.

[BOND_Group]

For Theme like DAWN.

Instraction:

Themes -> Customize -> Default product -> Product information -> Add block -> Custom liquid and add code below: 

SKU: {% assign current_variant = product.selected_or_first_available_variant %}{{ current_variant.sku }}

[Erokezz]

when I choose color and size options, the SKU does not change

[Erokezz]

For Theme like DAWN.

Instruction:

Themes -> Customize -> Default product -> Product information -> Add block -> Custom liquid and add code below: 

{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<strong>SKU: {{ variant.sku }} </strong>
{% endif %}
{% endfor %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".no-js-hidden").on("click", function(){
var refreshint = setInterval(function(){
location.reload();
}, 1000);    });   });
</script>

[es9]

This works to an extent, however there are a few issues here. The first is that it reloads the entire page, which could be an issue for users with slower internet or those viewing on mobile (it took a second for me even on a 5G connection). The other problem is that any click triggers a reload. If I want to adjust the quantity I add to the cart, it reloads the page and resets this back to 1.

[tatumutv]

I'm having the same issue with the cart.

[Jon931]

Same.

[es9]

For me, the SKUs start with a 4 digit style that doesn't change on a product page. My customers don't need to see the whole SKU, usually just the style to make sure they're buying the product they think they're buying. Does anyone know how to limit the SKU that's shown using the code posted previously to only the first 4 characters?

[tatumutv]

Thank you! This worked!

[IAMTHATIAM]

Do we have a solution to the page reload issue with variants?

[Alan15]

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

[es9]

This worked, thanks!

[BOND_Group]

@Alan15 , thank you very much!

[IAMTHATIAM]

Worked. Issue resolved. Thank you very much. You are awesome!

[madiasdomain]

This worked for me too! Thanks so much 🙂

[Carl_Lobato]

Great stuff, thanks!!!!

[Tim90]

Thank you @Alan15 ! This works!

[mmorris]

This works amazing EXCEPT when I click back to the variant that was 'selected' on page load, it won't reupdate the sku to it nor the variant image. Is there a fix for this?

[krilleum]

This worked for me!  Thankyou!

[jchonparadise]

This worked perfectly on the product pages. I have yet to find a solution to doing the same to the product grid (product cards) for collection displays. Any ideas?

[BOND_Group]

The price changes when you click on the option button (variant), how can I make SKU change too? Without reloading the entire page.

[tatumutv]

I am looking for the same answer!