Can the SKU ID be displayed under product names on Dawn theme?

DollarsSense
Tourist
3 0 8

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. 

Replies 24 (24)

Ranaay
Tourist
7 2 7

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
Excursionist
22 0 8

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

cpmusic_nicole
Tourist
6 1 2

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
Tourist
9 0 6

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

 

Soeks.Store
Erokezz
Visitor
2 0 3

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

Erokezz
Visitor
2 0 3

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
Tourist
3 0 2

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
Excursionist
22 0 8

I'm having the same issue with the cart.

Jon931
Visitor
1 0 0

Same.

es9
Tourist
3 0 2

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
Excursionist
22 0 8

Thank you! This worked!

IAMTHATIAM
Visitor
2 0 2

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

Alan15
Shopify Partner
143 27 62

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

 

Need more help? Contact me here
es9
Tourist
3 0 2

This worked, thanks!

BOND_Group
Tourist
9 0 6

@Alan15 , thank you very much!

Soeks.Store
IAMTHATIAM
Visitor
2 0 2

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

madiasdomain
Tourist
7 0 6

This worked for me too! Thanks so much 🙂

Carl_Lobato
Visitor
2 0 0

Great stuff, thanks!!!!

Tim90
Tourist
9 1 6

Thank you @Alan15 ! This works!

mmorris
Tourist
10 0 1

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
Visitor
1 0 0

This worked for me!  Thankyou!

jchonparadise
Visitor
3 0 0

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?

Jchon

BOND_Group
Tourist
9 0 6

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

Soeks.Store
tatumutv
Excursionist
22 0 8

I am looking for the same answer!