Show variant SKU / barcode on product page

Store Design
1

Hi there,
there was a solution in the past, but it no longer works on current Dawn.

https://community.shopify.com/topic/1481357

2

Hey @kbac ,

To display SKUs on the Dawn 2.0 theme:

  1. Add SKU code in main-product.liquid:

  SKU: 
  {{ current_variant.sku | default: product.sku }}
  1. Style SKU (optional) in base.css:
.product-sku { font-size: 14px; margin-top: 10px; color: #333; }
  1. Dynamic SKU for variants: Add JavaScript in global.js:
document.addEventListener('DOMContentLoaded', function () {
  const skuElement = document.querySelector('#variant-sku');
  const variantSelector = document.querySelector('[name="id"]');
  variantSelector.addEventListener('change', function () {
    skuElement.textContent = variantSelector.options[variantSelector.selectedIndex].dataset.sku || 'N/A';
  });
});

Add data-sku in the variant option:

Save changes, and the SKU will display.

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

3

Hi @kbac ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom Liquid Block: https://prnt.sc/ypQ7nly2wv27

Step 3: Add this code in the file

{{ product.variants.first.sku }}

Here is the result:

DaisyVo_0-1736244897101.png
DaisyVo_0-1736244897101.png1357Ă—612 153 KB

DaisyVo_1-1736244909217.png
DaisyVo_1-1736244909217.png1349Ă—448 78.9 KB

Please let me know if it works!

Best,

Daisy

4

Sorry did not work, does not update the SKU when variant is changed

5

sorry, did not work, nothing is displayed. Do I have have to add a custom liquid in the product page?

6

Thank you, it worked. Great solution.
What would I have to do if I want to display barcode of variant as well?

7

@kbac ,

To display the barcode of a variant along with the SKU on your product pages in the Dawn theme, you can follow a similar process as for the SKU. Here’s how you can do it:

Follow these Steps:

  1. Online Store

  2. Themes

  3. Edit code

  4. Open main-product.liquid (or product.liquid) in the Sections folder.

  5. Add Barcode Code:

  6. Find the area where you added the SKU display code.

  7. Insert the following code below or near the SKU section:

{% if product.variants.size == 1 %}
  

Barcode: {{ product.variants.first.barcode }}

{% else %}
  

Barcode: {{ current_variant.barcode }}

{% endif %}

This code checks if the product has one variant or multiple variants and dynamically displays the barcode for the appropriate variant.

  1. Style the Barcode Display (Optional):

-Open your theme’s CSS file (base.css or theme.css) from the Assets folder.

-Add the following CSS to style the barcode text:

.product-barcode {
    font-size: 14px;
    color: #777;
    margin-top: 5px;
}

Save the changes to both the Liquid and CSS files.

If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,

Rajat

8

Thank you.

So to add barcode and SKU, I do the following changes:

  1. main product liquid
SKU: {{ current_variant.sku | default: product.sku }}

{% if product.variants.size == 1 %}

Barcode: {{ product.variants.first.barcode }}

{% else %}

Barcode: {{ current_variant.barcode }}

{% endif %}
  1. base.css

.product-sku { font-size: 14px; margin-top: 10px; color: #333; }

.product-barcode {
font-size: 14px;
color: #777;
margin-top: 5px;
}

  1. to display the SKU, I have an item “SKU” to add, what do I have to do to add barcode?
9

@kbac ,

You’re welcome! :blush:

To display the barcode alongside the SKU, you need to follow a similar approach as you did for the SKU. Here’s what you need to do:

Steps to Add Barcode:

  1. Create a Metafield for Barcode (if needed):

  • If your barcode data is stored in Shopify’s barcode field (for variants), the code already uses current_variant.barcode to pull it dynamically. No additional setup is required.

  • If your barcode data is stored elsewhere (like a custom metafield), you’ll need to define that metafield in your Shopify admin under Settings > Custom Data > Products or Variants.

  1. Modify Your Code:
  • In the same way you added the SKU display, the barcode display code (

    Barcode: …

    ) is already configured.

Please feel free to reach out via email so I can help you best. Thanks! :blush:

10

Thank you, but I do not understand.

Could you give a step by step guide.

I understand that they are the following steps:

  1. modify main product liquid
SKU: {{ current_variant.sku | default: product.sku }}

{% if product.variants.size == 1 %}

Barcode: {{ product.variants.first.barcode }}

{% else %}

Barcode: {{ current_variant.barcode }}

{% endif %}
  1. modify base.css

.product-sku { font-size: 14px; margin-top: 10px; color: #333; }

.product-barcode {
font-size: 14px;
color: #777;
margin-top: 5px;
}

I do not understand what exactly step 3 is.
Are steps 1 & 2 correct?