【Shopifyテーマ:Horizon】
Horizon のカスタマイズ難易度を上げている理由のひとつは、morph の挙動にあるのではないかと感じています。
バリアント選択やカート更新のたびに、Horizon は対象セクションの HTML をサーバーから取り直し、画面を更新します。あとから JavaScript で追加した表示は、サーバーが返す HTML には含まれないため、この再描画のたびに消えてしまいます。
やや厄介なのは、初回表示では正しく見える点です。一度は表示されるので確認時に気づきにくく、バリアントを切り替えた瞬間に消えて、原因を追いにくい不具合になりがちです。
Horizon のセクション内に何かを追加する場合は、この前提を持っておく必要があります。現実的には、消えることを前提に MutationObserver で再描画を検知し、必要な表示を足し直す処理を書くのが対応策になりそうです。
