So each product variant will have an item code, and I want it to show depending on which variant the customer is looking it.
I have created a variant metafield named “Item Code” (custom.item_code) of which I will be inputing these codes. How do I get it so it shows it in the text box below after “Item Code: ______” ?
My store URL is Cheffings.net - I have applied inputs ‘1111’, ‘2222’, ‘3333’, ‘4444’ to the variants on the product Japanese Ceramic Oval Jiyun Plate (Japanese Ceramic Oval Jiyun Plate – Cheffings ) so I recommend using that page as a tester as no other products have their variant metafields input yet.
1 Like
Yes you can loop over all the variants of a product and show the code with liquid.
If you want this to show on variant selections for that you will have to modify/add some js code to show the code for the selected variant.
Best
Would you be able to assist me? I do not know how to code.
Sure. I see you are using the dawn theme most probably. I can do this on my dev store but it would be great if you could give collab access.
I would directly implement this on the store. Both ways work for me.
Best
If you could try on your dev store that would be appreciated, Thank you!
Ok. Will try to update you on it
Hi,
Hope this will help
- Add the text box to your product page
HTML code example
<!-- Item Code box -->
<div id="ItemCodeBox" class="item-code" style="margin:.5rem 0;">
<label for="item-code-input" style="display:block;font-weight:600;">Item Code:</label>
<input id="item-code-input"
type="text"
readonly
value="{{ product.selected_or_first_available_variant.metafields.custom.item_code.value | default: '' }}"
style="width:100%;max-width:240px;padding:.5rem;">
</div>
- Give the page a tiny “map” of all variant codes
Script example
<script id="variant-item-codes-json" type="application/json">
{
{% for v in product.variants %}
"{{ v.id }}": {{ v.metafields.custom.item_code.value | json }}{% unless forloop.last %},{% endunless %}
{% endfor %}
}
</script>
- Make it change when the shopper switches variants
Hi @lukafernada ,
Yes, you can absolutely show a variant metafield (like your custom.item_code) on the product page, and update it dynamically when the customer switches variants.
Here’s how you can do it in Shopify (using Online Store 2.0 themes like Dawn/Refresh):
- Add the placeholder in your product page
Edit your main-product.liquid (or main-product.liquid section in your theme):
Find where you want the “Item Code” to display (maybe under the price or product form) and add:
<div class="variant-item-code">
Item Code: <span id="variant-item-code"></span>
</div>
- Output the variant metafields in JSON
Shopify doesn’t output variant metafields automatically — so you need to include them in a JSON object for your JS to read.
Inside the same section (usually near the bottom of main-product.liquid), add:
<script>
window.variantItemCodes = {{ product.variants | map: "id" | json }};
window.variantMetafields = {
{% for variant in product.variants %}
{{ variant.id }}: {{ variant.metafields.custom.item_code.value | json }}{% unless forloop.last %},{% endunless %}
{% endfor %}
};
</script>
- Update the Item Code on variant change
Most Shopify 2.0 themes already have a product-form.js or some variant change script.
You can hook into it, or just add this script:
<script>
document.addEventListener("DOMContentLoaded", function() {
const itemCodeBox = document.getElementById("variant-item-code");
// Find current variant id from the product JSON object Shopify provides
const productJson = {{ product | json }};
let currentVariant = productJson.variants.find(v => v.available);
if (currentVariant && window.variantMetafields[currentVariant.id]) {
itemCodeBox.textContent = window.variantMetafields[currentVariant.id];
}
// Listen to variant change
document.addEventListener("variant:change", function(event) {
const variant = event.detail.variant;
if (variant && window.variantMetafields[variant.id]) {
itemCodeBox.textContent = window.variantMetafields[variant.id];
} else {
itemCodeBox.textContent = "";
}
});
});
</script>
Sorry where is it that I input these codes?
Hello,
This works but it only shows the Item Code of the first variant, it doesn’t change when I switch variants (e.g. ‘9 Inches’ should = ‘3333’).
How do I fix this?
Hi ,Can you please copy and paste the below code to custom.liquid block
{% if product.selected_or_first_available_variant.metafields.custom.item_code %}<p class="product__item-code">
<strong>Item Code:</strong>
<span id="item-code">
{{ product.selected_or_first_available_variant.metafields.custom.item_code | escape }}
</span>
</p>
{% endif %}
It will work. If it didn’t worked, I will require the collaborative access to add this for you. Also, I hope you are using DAWN theme of Shopify. If you use different theme, please let me know.
It is displaying “Item Code: “ but not the variant
This will require some js code to listen for variant selections and update the value for that variant.
Could you help me out with such code please?
It’s working but it only changes when you reload the page with a different option selected, not upon selecting a different variant. Could you help me fix this?
So yeah I can set this up but this is slightly a bit more than just the basics
Yes! Can you please provide me the collaborative code to check the code and fix it for you?
