How can I display dynamic EAN codes on product pages?

Store Design

Topic summary

A user is trying to display both SKU and EAN (barcode) codes on product pages. While the SKU updates correctly when selecting different variants, the EAN code remains static and doesn’t change.

Current Implementation:

  • Using Liquid code to display variant SKU and barcode
  • Code works on initial page load but fails to update dynamically

Proposed Solution:

  • Modify the variant selector JavaScript (typically in theme.js, product.js, or product.liquid)
  • Implement an event listener using Shopify’s OptionSelectors that triggers on variant changes
  • Update the barcode display within the callback function when variants are selected

Additional Context:

  • Another user reports similar issues with the Dawn theme, experiencing problems displaying SKU with variants and also attempting to show pre-tax pricing
  • Solution requires identifying theme-specific classes/IDs and integrating custom JavaScript to handle dynamic updates
Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hi everybody. I have been searching for how to display SKU code and EAN code on the product pages. I found a way to make those 2 codes display on the product page BUT EAN code is not changing when you select a different variant

SKU code changes with no issues.

Does anybody know how to make it change as SKU does?

This is the code (product.liquid):

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

2

Hello @visionzz

The code you are showing is perfect code but that will only work when the page is loading. once the page is loaded after data will change based on the selector code.

in your theme, you will be able to find a theme. js or product.js or may be at the end of the product. liquid

Where you will find the selector code, on the variant change event code you have to run.

each theme has diff classes and IDs but below I am writing the ideal code which can give you a barcode/EAN number on the change event of the variant.

{{ ‘option_selection.js’ | shopify_asset_url | script_tag }}

var selectCallback = function(variant, selector) { console.log(variant.barcode); } new Shopify.OptionSelectors('jsvariants_custom', { product: {{ product | json }}, onVariantSelected: selectCallback, enableHistoryState: true }); Where it say "jsvariants_custom" you can replace that with your variation ID or class. Thank you
1 Like
3

Hi Rishihuptech,

I also struggle with the SKU/barcode issue, as the SKU doesn’t update after changing the variant, and I can’t find the correct solution. I’m using the Dawn theme, and I also want to display the price without tax below the taxed price. It works fine with a product without variants, but with variants, I’m encountering the same issue as with the SKU.