スマホやPC、またメニューのなかなどにカートアイコンを設置し、
商品が入ったらカートの中の数が更新されるようにしたく、
下記のコードを同じheader.liquid内に2箇所に設置しております。
同じID（id=“cart-icon-bubble”）なので複数設置はどうかと思っていましたが
やはり挙動が一部おかしくなってしまいます。
良い改善案はないでしょうか？
●現時点（下記コードで2箇所に設置）
先にコードを設置しているPC版は問題なく反応しますが、
下にコードがあるスマホ版は商品ページでカートインやカートで数量を変更してもリアルタイムで変更できず
ページ更新したら更新される状態。
id="cart-icon-bubble"などが記載されているJS（cart.jsなど）
うまく別のIDをしたりできないか試行錯誤しましたがうまく行かず
最悪、お買い物カート内で数量を変えたらエラーが出る状態になってしまいました。
ーーーーーーーーーーー
{%- liquid
if cart == empty
render 'icon-cart-empty'
else
render 'icon-cart'
endif
-%}
{{ 'templates.cart.cart' | t }}
{%- if cart != empty -%}
{%- if cart.item_count < 100 -%}
{{ cart.item_count }}
{%- endif -%}
{{ 'sections.header.cart_count' | t: count: cart.item_count }}
{%- endif -%}
カート