FROM CACHE - en_header

SKU Id on Dawn

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 22 (22)
Ranaay
Tourist
7 2 5

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 7

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

BOND_Group
Tourist
9 0 5

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 7

I am looking for the same answer!

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 5

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
New Member
2 0 3

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

Erokezz
New Member
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 7

Thank you! This worked!

tatumutv
Excursionist
22 0 7

I'm having the same issue with the cart.

Jon931
New Member
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?

IAMTHATIAM
New Member
2 0 2

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

Alan15
Shopify Partner
124 27 52

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 5

@Alan15 , thank you very much!

Soeks.Store
IAMTHATIAM
New Member
2 0 2

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

madiasdomain
Tourist
6 0 1

This worked for me too! Thanks so much 🙂