Shopify themes, liquid, logos, and UX
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.
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>
What about when I have different color variants? How do I get those to change too when the variant is selected?
The price changes when you click on the option button (variant), how can I make SKU change too? Without reloading the entire page.
I used this code snippet and it was working. I just tested it yesterday and it isn't anymore....can't figure out why.
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 }}
when I choose color and size options, the SKU does not change
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>
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.
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?
Do we have a solution to the page reload issue with variants?
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);
Worked. Issue resolved. Thank you very much. You are awesome!
User | RANK |
---|---|
136 | |
94 | |
88 | |
61 | |
51 |
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By