Add Barcode to Product Page

[lauralonno]

Hi! 

This is my first post and I'm hoping someone can help. I'm looking to add product barcodes (not SKU) to my product page so they're visible for a wholesale buyer needs them to be visible for ease.

I have 6 variants on my products, the barcodes are EAN13 and use the 'District' theme.

I seem to be able to find a lot of references to adding SKUs, but none seem to work for me.

Any help would be greatly appreciated!

Thanks

[JHKCreate]

Hi @lauralonno 

To access the product variant's barcode you would need the following code:

{% for variant in product.variants %}
{{ variant.barcode }}
{% endfor %}

However, keep in mind that variant.barcode will display multiple barcodes here, and since you have variants, you would need to setup some JavaScript depending on your theme to track that variant change and change the barcode as well.

Let me know if this helps!

[CicelyHuang]

Hello, my theme template is "District", I want to display the corresponding barcode for different variants instead of all of them, how can I do it?

[JHKCreate]

Hi @CicelyHuang 

You would need custom coding to get this done correctly, more specifically, you would need a JavaScript code to get this done correctly. Do you have any background in coding?

[CicelyHuang]

None

[Bayi]

Please continue. Do we have to use Javascript? Is Liquid not possible to execute this task?

[Angelynn]

First add sku to product pages you can find Shopify help by searching

Show SKU numbers on product page

Use the code in In the Sections directory, click product.liquid or product-template.liquid 

1. On a new line below the line of code that includes {{ product.title }}, paste the following code:

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

SAVE

This is a quick fix to have barcode numbers show up...it worked for me.  Edit your SKU's to not just the SKU but SKU plus UPC as attached.