Palo Alto Theme – Showing Product SKU's on Product Page

Technical Q&A
,
1

Hi everyone!

I want to display the product SKU on my product pages below the price. I figured out how to get it to show with this code:

{%- assign current_variant = product.selected_or_first_available_variant -%}
{{ current_variant.sku }}

The issue is the SKU won’t change when I choose a different variant on the same product page.

Could someone please help me out with this?

2

Can you share the link to your website? Thanks!

3

Here is the preview link! https://uoz8joqq8ftgc0ep-55183966382.shopifypreview.com

4

Thanks! Now, which page in particular were you talking about?

5

All of the product pages. I want to show the product SKU either underneath the price or product name. For products that have multiple variants I need the SKU to dynamically change based off what variant is currently selected.

6

Can you point me to a product which has multiple variants? The ones I clicked on all had just one variant.

Thanks.

7

SKU: FP-ZM-07DIP0200

8

I meant to a link on your website. Thanks!

9

https://www.diamondtoolstore.com/search?options%5Bprefix%5D=last&q=FP-ZM-07DIP0200 Let me know if that works

10

Just tested it, and the SKU number seems to be changing when a variant is changed.

Are you still facing the issue on your side?

11

Hi,

I have the same issue, i can see you fixed it, any chance you could let me know how you did it?

Thanks

12

Of course, someone from Palo Alto sent me this code snippet:

<!-- Liquid - Add product SKU --> 
{% assign current_variant = product.selected_or_first_available_variant %}
<p class="sku-wrapper radio__legend" data-aos="fade-up" 
data-aos-anchor="{{ animation_anchor }}"
data-aos-delay="{{ animation_delay }}"
><span class="radio__legend__label" {% if current_variant.sku == "" %}style="display:none;" {% endif %}>SKU: </span><span class="variant-sku">{{ current_variant.sku }}</span></p>

<script>
document.addEventListener('theme:variant:change', function(event) {
const variant = event.detail.variant;
let container = event.target;

if(event.target.outerWrapper){
container = event.target.outerWrapper;
}

const skuWrapper = container.querySelectorAll(".sku-wrapper");

if (skuWrapper.length) {
skuWrapper.forEach((element) => {
const sku = element.querySelector(".variant-sku");
if (variant) {
if (variant.sku) {
if(sku) {
sku.innerHTML = variant.sku;
}
element.style.display = "block"
} else {
element.style.display = "none";
}
} else {
element.style.display = "none";
}
});
} 
});
</script>
<!-- end SKU -->

Paste it in /snippets/product.liquid where you want the SKU to display, I placed mine after the product title.

Hope that helps!