Adding dynamic SKU to product pages

[SHOUT-OUT]

I’m hoping someone out there can help me. I’ve got my SKU codes appearing by using this code:

SKU: {% assign current_variant = product.selected_or_first_available_variant %}{{ current_variant.sku }}

but the SKU doesn’t update automatically when a different variant is chosen. For e.g. A4 or A5 options of a product. The same first SKU code is displayed unless you refresh the page and then it updates.

I’ve tried inserting some the .js code that I’ve seen on other posts but it doesn’t make a difference.

Can anyone help please?

[donny_fitmiecom]

Hi @SHOUT-OUT
Could you share which theme your store is using, along with the store URL and password?We’ll take a look and assist you further.

[PaulNewton]

It’s only going to be dynamic IF the theme re-renders the area where the SKU is when a variant||option changes.
Search first https://community.shopify.com/search?q=change+sku+when+variant+changes
Optionally including the theme name for actual relevance.

Beyond that it’s an advanced theme customization that varies by theme.
Reach out to me for customization services to get it done properly. (click profile pic on forums)

[SHOUT-OUT]

Ah yeah I’m using Craft theme and password is meunga

[SHOUT-OUT]

and the website is https://shoutoutstitches.com

it’s been one of those days.

[Maximus3]

Your theme’s javascript file doesn’t contain _updateSKU function. That’s why it doesn’t update when a different variant is selected. You can either find out what the specific code that will work with your theme, or choose a different theme.

[devcoders]

Hi @SHOUT-OUT

Yes, this happens in the Craft theme because the SKU isn’t automatically updated on variant change unless you add the JS listener manually.

You already added the Liquid, now just replace your SKU code with this:

Liquid (put inside product form)

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

JavaScript (add at the bottom of product page template)

Place this at the end of main-product.liquid (or in your product.js file if using the Craft ES module structure):

document.addEventListener('variant:change', function(event) {
  const variant = event.detail.variant;
  const skuElement = document.getElementById('variant-sku');

  if (skuElement && variant) {
    skuElement.textContent = `SKU: ${variant.sku ?? ''}`;
  }
});

Best regards,
Devcoder

[Dan-From-Ryviu]

Hi @SHOUT-OUT
Your theme includes a SKU block by default, allowing you to add it through theme customization.

Best regards,
Dan from Ryviu: Product Reviews App

[donny_fitmiecom]

@SHOUT-OUT

meunga

HI @SHOUT-OUT
Craft theme already support for SKU block in theme customize.
follow this image to know detail

Also if you want to show the SKU label, try to change a bit in code like this image:

[oscprofessional]

@SHOUT-OUT

meunga

Hi @SHOUT-OUT ,
SKU is displaying correctly on page load, but not updating when the customer switches variants. That happens because the Liquid code you’re using, Try below steps:

Step 1: Add a container for the SKU

In your product template (usually main-product.liquid or product-form.liquid), wrap your SKU in an identifiable element:

<p class="product-sku">SKU: <span id="variant-sku">{{ product.selected_or_first_available_variant.sku }}</span></p>

Step 2: Add this JavaScript

Below your product form or in your theme’s main-product.liquid file, add:

<script>
document.addEventListener('DOMContentLoaded', () => {
  const skuElement = document.querySelector('#variant-sku');
  const productForm = document.querySelector('product-form');

  if (!skuElement || !productForm) return;

  productForm.addEventListener('variant:change', (event) => {
    const variant = event.detail.variant;
    if (variant) {
      skuElement.textContent = variant.sku || '—';
    }
  });
});
</script>

[Maximus3]

I stand corrected. @Dan-From-Ryviu is right. Craft theme includes sku already, you just have to add the block.

[SHOUT-OUT]

Well I feel silly now lol. I can’t believe I never noticed the block before. Thanks for pointing that out @Dan-From-Ryviu

Thank you everyone for your help and advice.