By default, Horizon updates only a handful of properties on product page with variant selection.
And it is not possible to use variant metafields as Dynamic sources.
It’s possible though to extend theme functionality by adding a “Custom liquid” block which will update its content on variant change.
You can do it like this – Add an “Accordion Row” block, but instead of default text blocks add a “Custom liquid” one:
Into “Custom liquid” block paste the code like this – you need to change it to use your metafield:
{% # the ID parameter must use uniq on the page %}
<variant-data class="rte" id="availability-{{section.id}}">
{% # output your metafield value %}
{{ closest.product.selected_or_first_available_variant.metafields.availability["14-Lyndon-Street"] }}
</variant-data>
<script>
if (!customElements.get('variant-data')) {
class VariantData extends HTMLElement {
constructor() { super(); }
connectedCallback(){
document.addEventListener('variant:update', ({detail}) => {
const newContent = detail.data?.html?.getElementById(this.id)?.innerHTML;
if (newContent) this.innerHTML = newContent;
});
}
}
customElements.define('variant-data', VariantData )
};
</script>
The Javascript code here will listen to events fired by the Horizon theme code and update this variant-data element accordingly.
See it working here.
Similar solution for Dawn family themes: Variant Metafield reference is Giving Invalid Error - #3 by tim_1
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it