how do I make the sku section on product page dynamic?

[michelle012]

I added this code to the product.liquid with makes the sku visible bunt not dynamic without refreshing the page.

{%- when 'sku' -%}
<p
class="product__sku{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}{% if product.selected_or_first_available_variant.sku.size == 0 %} visibility-hidden{% endif %}"
id="Sku-{{ section.id }}"
role="status"
{{ block.shopify_attributes }}
>
<span class="visually-hidden">{{ 'products.product.sku' | t }}:</span>
{{- product.selected_or_first_available_variant.sku -}}
</p>

does anyone have a solution on how the make the custom sku section dynamic?

[StudioEnchant]

Hey @michelle012,

I would love to help out but I'm not sure what you are trying to achieve, so if you could ellaborate a little more and maybe provide an example from another website it will be great.

If you mean to just show the SKU on the product page, you can add that block inside your theme's customization, just edit the product template.

Sincerely,
Lior from Studio Enchant

[michelle012]

thankyou for your responds. normally when you have a sku on the product page with multiple variants the sku should switch dynamically when another variant is selected. this is not the case with my sku. so my question is how to make the sky dynamically change when another variant is selected

[Dotsquares]

hi @michelle012 

To make the SKU section dynamic—so it updates automatically when a customer selects a different variant—you'll need to hook into Shopify's variant change event using a bit of JavaScript.

Here’s a quick way to make your custom SKU section update without a page refresh:

1. Add an ID to your SKU container (you already did this – perfect!):

<p id="product-sku">{{ product.selected_or_first_available_variant.sku }}</p>

2. Add this JavaScript to your theme (either at the bottom of product.liquid or in your main JS file):

document.addEventListener('DOMContentLoaded', function () {
  const skuElement = document.getElementById('product-sku');

  document.querySelector('form[action^="/cart/add"]')?.addEventListener('change', function (event) {
    const selectedVariantId = document.querySelector('[name="id"]')?.value;

    if (!selectedVariantId || !window.meta || !meta.product) return;

    const selectedVariant = meta.product.variants.find(v => v.id == selectedVariantId);

    if (selectedVariant && skuElement) {
      skuElement.textContent = selectedVariant.sku || '';
    }
  });
});

This script listens for variant changes and updates the SKU text accordingly.

[michelle012]

I tried your solution but are still not able to solve the issue. Hope you have another way around

[tim]

Did not expect Pipeline to not have a "SKU" block, sorry.

Create a "Liquid" block and add this code:

<script>
if ('function' != typeof updateSKU) {
  window.updateSKU = (evt) => {
    let container = evt.target;
    let variant = evt.detail.variant;
    if (!container || !variant) return;
    let skuElement = container.closest('.product__main__content')?.querySelector('.product__sku');
    if (skuElement) skuElement.innerHTML = `<span class="visually-hidden">SKU:</span>${ variant.sku}`;
  };

  document.addEventListener('theme:variant:change', updateSKU);
}
</script>

[michelle012]

hi thankyou for your response. I tried and added the code to another block but still no result of the dynamic change. hoping you may have another solution

[tim]

Can I see the link where my code is added?

[michelle012]

I added the code in a snippet

[tim · Accepted solution]

The idea is that you go to your themes, click "Customize", the go to product page and add a block or a section "Liquid", then paste my code in this block/section setting.

Otherwise, you can find your "sku" block and add my code right below.

At the moment, I do not see my code included on your product page(s).