Show SKU on product page for Ella Theme

Technical Q&A
1

Im trying to show the SKU on our product pages using Ella theme.

I have tried to follow different ways but there are files that I can’t find on the tutorials,

specifically this > product.liquid and product-template.liquid

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku

I also tried this approach
https://community.shopify.com/c/shopify-design/show-sku-numbers-on-product-pages-dawn-2-0/m-p/1491756/highlight/true#M393679

but on the global.js, I cannot find the OnVariantChange.

Can someone help me on this? Thank you!

2

Hi,

Hope this will help

Add SKU Code


  SKU: {{ product.selected_or_first_available_variant.sku }}

Ensure SKU Updates with Variant Changes

document.addEventListener('DOMContentLoaded', function () {
  const variantSelect = document.querySelector('[name="id"]');
  const skuElement = document.querySelector('.product-sku');

  if (variantSelect && skuElement) {
    variantSelect.addEventListener('change', function () {
      const selectedOption = variantSelect.options[variantSelect.selectedIndex];
      const selectedVariant = window.variantData.find(variant => variant.id == selectedOption.value);
      skuElement.textContent = 'SKU: ' + selectedVariant.sku;
    });
  }
});

Use CSS for styling

3

Thank you for the fast reply,

Can you also specify on which part I can copy and paste this two codes? Thank you!