バリエーションを切り替えた時にメタフィールドの情報が反映されない。

テーマ「Trade」を使用しています。
バリエーションごとに異なる説明文を表示させたいのですが、
下記方法も試してみたのですが、リロードしないと反映されないです。

リロードするとメタフィールドの情報が表示されます。

1:バリエーションのメタフィールドを作成する(ネームスペースとキーはcustom._explanation)
2:カスタマイズされたLiquidブロックを追加し下記のコードを入力

{%- assign nowVariantId = product.selected_or_first_available_variant.id -%}
{%- for variant in product.variants -%}
{% if variant.id == nowVariantId %}
{%- assign optionText = variant.metafields.custom._explanation.value | newline_to_br -%}
{% endif %}
{%- endfor -%}

{{ optionText }}

ちゃんと読んでいませんがとりあえず以下が目についたので直してから、エラーや各部をコンソールなどで確認することで対応できるのではと思います。

  • querySelectorのセレクター指定を見直す

参考:

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

文字列で、照合する 1 つ以上のセレクターを設定します。この文字列は妥当な CSS セレクターでなければなりません。