How to display variant SKU on product page (horizon theme)

[SDBdigital]

How do I display the variant SKU below the product price?

Using Horizon theme.

https://lunamar.co.za

[Guleria]

Hello @SDBdigital ,

Edit product template find for price existing code and just after it use this code

SKU: {{ product.selected_or_first_available_variant.sku }}

Or if the theme you are using support liquid block then use this code directly there.

Regards
Guleria

[AiTrillion]

Hi @SDBdigital ,

You can add a snippet in the customization section.

{{ product.first_available_variant.sku }}

[SDBdigital]

Hi

I inserted the code using a custom liquid block - the sku displays - but does not update/change when selecting a different variant.

[AiTrillion]

@SDBdigital Yes, to update/change the price according to varient please copy the below code:

<script>
document.addEventListener("DOMContentLoaded", function () {
const variantSelector = document.querySelector('form[action^="/cart/add"] select[name="id"]');
const skuDisplay = document.getElementById("variant-sku");

if (variantSelector && skuDisplay) {
variantSelector.addEventListener("change", function () {
const selectedVariantId = this.value;

fetch(window.location.pathname + '.js')
.then(res => res.json())
.then(product => {
const variant = product.variants.find(v => v.id == selectedVariantId);
if (variant && variant.sku) {
skuDisplay.textContent = "SKU: " + variant.sku;
} else {
skuDisplay.textContent = "SKU: N/A";
}
});
});
}
});
</script>

[SDBdigital]

Hi

I don't need the price to change. 
I just want the variant SKU that is displayed below the titles to change when changing variants.

eg:

small (display SKU: xyz-small)

medium (display SKU: xyz-medium)