A user is attempting to display variant-level metafield data (realism, tree shape, height, width, warranty, tip count, light count) in collapsible product description rows on their Shopify store using the Trade theme. They’re encountering an “invalid” error when trying to reference variant metafields through the theme editor’s dynamic source feature.
Core Issue:
Shopify’s theme editor only supports product-level metafields as dynamic sources—not variant-level metafields. The dynamic source picker cannot access variant.metafields.* references.
Proposed Solutions:
{{ product.selected_or_first_available_variant.metafields.custom.realism }}
Current Status:
The user attempted tim_1’s custom code solution but reports it doesn’t update when switching between variants (e.g., height remains “4’” regardless of selection). They’ve requested additional help and been asked to share a preview link for further troubleshooting. The user is unfamiliar with editing theme template files directly.
Hi! I am using the Trade them for my website and when trying to reference variant metafield attributes to add into the item descriptions I am getting the error:
I just checked the Variant metafield definition I am trying to reference and it looks to be correct?
Can anyone tell me what I am doing wrong so that I can reference these variant level attributes when a customer select a certain variant on my product page?
No, you can’t use variant properties as dynamic sources.
I wonder how you were able to even add that reference though.
To do what you want there is a bunch of app, one of them is “Variant descriptions” …
Alternatively for Dawn family themes, you can use “Custom Liquid” block/section and use this code:
{% # id must be unique %}
<variant-data class="rte" id="realism-{{section.id}}">
{{ product.selected_or_first_available_variant.metafields.custom.realism }}
</variant-data>
<script>
if (!window.defineVariantData ) {
window.defineVariantData = () => {
if (!customElements.get('variant-data')) {
class VariantData extends HTMLElement {
constructor() { super(); }
connectedCallback(){
subscribe(PUB_SUB_EVENTS.variantChange, ({data}) => {
const newContent = data.html.getElementById(this.id)?.innerHTML;
if (newContent) this.innerHTML = newContent;
});
}
}
customElements.define('variant-data', VariantData )
};
}
if (document.readyState == "complete") defineVariantData()
else window.addEventListener('load', defineVariantData );
}
</script>
Demo – Look at the “Available at 14 Lyndon St” here, above the title
Similar solution for Horizon family themes: Please help me with this variant metafield code fix - #2 by tim_1
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
1. Confirm metafield location
realism under namespace: custom (so its full key is custom.realism). If it’s under Products, not Variants, you must reference it as:product.metafields.custom.realism
not variant.metafields.
2. Ensure you’re in a variant context
variant.metafields... gives an invalid error in the editor.realism to Product metafields instead of Variant metafields.Option B – Reference via code (for variant-specific values)main-product.liquid or similar), locate where you want to show the metafield.{{ product.selected_or_first_available_variant.metafields.custom.realism }}
That will output the value for the selected variant dynamically.
Would you like me to show exactly where to add that code inside your Trade theme’s collapsible row so it displays properly per variant?
If yes, please tell me:
Yes please help. I am trying to add these rows into my collapsible connect with their respective variant metafield data. I am going to use this item as one example to see all the information. https://www.tinseltraditions.com/products/alberta-spruce-artificial-christmas-tree?_pos=1&_sid=d1e84c8a2&_ss=r&variant=41480528166958
Realism = custom.realism
Shape = custom.tree_shape
Height & Width = custom.height custom.width
Warranty = custom.warranty
Tip Count = custom.tip_count
Light Count = custom.light_count
Ok dear, please share your store URL and collaborator code with me so I can check and provide you with the proper solution.
You are displaying variant-specific metafield data in your product descriptions.
Meanwhile, Shopify’s theme editor can only support product-level metafields as dynamic sources.
For variant-specific data, edit your theme file by adding this code snippet in the product template file:
{{ product.selected_or_first_available_variant.metafields.custom.realism }}
This should display the metafield value for the selected variant.
If you wish to go a step beyond and add custom Shopify product attributes that directly map to the Merchant Center, we recommend using a Built for Shopify app, like AdNabu.
It automatically syncs the updates and follows Google-compliant policies for zero product disapprovals.
Have a good day. 
Can I do this in Edit Theme custom CSS? I do not know how to add code snippet to the product template file in this new shopify theme editor.
Have you tried the suggestion I’ve published above?
I did try this but it does not update as I click through the variants. For example, another variant metafield I am trying to load is custom.height and using you code it only displays “ 4’ ” and when I click on the 6 foot or other height options the value does not change accordingly like I need it to.
Share a preview link?