Liquid, JavaScript, Themes
Hello everybody,
we sell medical products in Germany. Many of our products, such as COVID-19 rapid tests, come in different packaging units (e.g., 1-piece, 5-pack, 20-pack) and also have variant-specific identifiers, such as PZN (German pharma code), UDI, or other medical registration numbers.
Currently, Shopify does not allow us to assign metafields per variant in a flexible way. However, this is crucial for legally compliant and informative product listings in the healthcare sector.
I’m looking for a way to implement variant-specific metafields in Shopify, so I can assign a unique PZN (or similar) to each variant of a product.
What’s the best way to achieve this technically?
Hi - don't forget this is the German community!
And "metafields per variant in a flexible way" - can you explain what you mean by that? Like when a user is eyeballing 👁️ the Covid product on the PDP and they click between variants causing different details to appear as a single line text (like a certain PZN per variant) depending on the variant chosen?
One issue here is that you want to update the variant change without needing a full page reload in order to provide a better UX. You would need something like Shopify's AJAX API, a React-based PDP, or headless Hydrogen for that. Or code it into the Liquid with some JS like variantSelector.addEventListener("change", function () {updateSKU(this.value);
In other words, it will require a bit of coding where you need to expose all variant metafields in the Liquid, preferably inside an HTML placeholder, and some JavaScript logic (like an IF/ELSE via object lookup). Steps:
See a great video from one of Shopify's best coders, Jan the Man, here -> https://youtu.be/L-0q83epPPo?si=pkl0tp2oGoRQSMkh
Here is Jan working with the Shopify Community.