Shopify Horizon v4.3.0 アップデート解説 ― カートアイコンの個数表示バグとメモ欄の不具合を修正

Shopify Horizon v4.3.0 アップデート解説 ― カートアイコンの個数表示バグとメモ欄の不具合を修正

Shopify公式テーマ「Horizon」が v4.2.0 から v4.3.0 に進みました。本記事では、コードの差分を読み解きながら、v4.2.0 から v4.3.0 への変更内容と、ストア運営者が押さえておくべきポイントをまとめます。

前回の「v4.2.0 アップデート解説」ではカートの「戻る」ボタン問題を取り上げましたが、今回はその続編とも言えるカートアイコンの個数表示バグと、設定をONにしても動いていなかったカートメモ欄の不具合が目玉です。

⚠️ 本記事の執筆時点(2026年10月時点)では、Shopify公式のリリースノート(release-notes.md)とGitHub公式ミラー(github.com/Shopify/horizon)はまだv4.2.0のままで、v4.3.0の内容は反映されていません。本記事は、実ストア(sh-horizon.myshopify.com)から書き出したテーマエクスポート(config/settings_schema.json の theme_version: "4.3.0" で確認)とv4.2.0タグとのコード差分を一次情報として執筆しています。公式リリースノートの文言が後日公開され次第、必要があれば加筆します。

変更サマリー ― 「52ファイル変更」の中身

差分は 52ファイル変更、+694行 / −259行。削除されたファイルが1つ(snippets/fonts.liquid)あり、新規ファイルはありません。

ストア運営者が気にすべき変更は、大きく次の通りです。

変更 影響範囲 対応の要否
① カートアイコンの個数表示バグ修正 ヘッダーのカートバッジ(個数表示)の正確性 不要(自動で適用)
② カートメモ欄が動いていなかった不具合の修正 「カートにメモ欄を表示する」設定をONにしているストア 要確認(該当設定を使っている場合は表示をチェック)
③ ヘッダーのスタイル再計算範囲の縮小(パフォーマンス改善) ヘッダー・ドロワー操作時の描画負荷 不要(自動で適用)

順に解説します。

変更点① ― カートアイコンの個数表示バグ修正

前回のv4.2.0では、ブラウザの「戻る」操作でカートドロワー・カートページの中身が古いまま表示される不具合が修正されました。今回はその続きで、ヘッダーのカートアイコンに表示される個数バッジが同じ経路で古いまま残ってしまう問題が修正されています。カート本体の表示は直っていたのに、アイコンの数字だけ取り残されていた形です。

assets/cart-icon.js に、ページの復元経路を判定して個数を取り直す処理が追加されました。

// assets/cart-icon.js に新設
static #getNavigationType() {
  const navigationEntry = globalThis.performance?.getEntriesByType?.('navigation')[0];
  return CartIcon.#isNavigationTiming(navigationEntry) ? navigationEntry.type : undefined;
}

// back_forward(戻る/進む)での復元を検知したら、カートをfetchし直して個数を再計算
if (CartIcon.#getNavigationType() === 'back_forward') {
  this.#reconcileHistoryCart();
}

Navigation Timing APIのtypeが'back_forward'かどうかで、戻る/進む操作による表示かを判定し、該当する場合はカートAPIをcache: 'no-store'で取り直して個数バッジを更新します。あわせて、連続して戻る/進むを行った場合に古いリクエストの結果で新しい表示を上書きしてしまわないよう、AbortControllerとリビジョン番号での世代管理も入っています。

変更点② ― カートメモ欄が動いていなかった不具合の修正

テーマ設定の「カートにメモ欄を表示する」(show_cart_note)という項目自体は、v4.2.0以前から存在していました。カートのHTML側にもメモ欄のマークアップは出ていたのですが、実際に入力を受け付けて保存するcart-note.jsを読み込む条件分岐そのものがsnippets/scripts.liquidに存在していませんでした。

// snippets/scripts.liquid に新設
{% if settings.show_cart_note %}
  <script
    src="{{ 'cart-note.js' | asset_url }}"
    type="module"
    fetchpriority="low"
  ></script>
{% endif %}

つまり、設定をONにしていてもメモの入力欄は表示されるがJSが読み込まれず、入力した内容が実際には注文に反映されていなかった可能性があります。今回この読み込み条件が追加され、正しく機能するようになりました。

💡 この設定を使っている(使おうとしていた)ストアは、アップデート後にカートでメモを入力し、実際の注文の「備考」欄に反映されるか一度確認することをおすすめします。

変更点③ ― ヘッダーのスタイル再計算範囲の縮小

透過ヘッダーのレイアウト調整に使われているCSSセレクタが、body:has(...)から#header-group:has(...)に変更されました。地味な変更ですが、コード内コメントに理由が書かれています。

- body:has(#header-component[transparent]) .content-for-layout > .shopify-section:first-child
+ #header-group:has(> .header-section > #header-component[transparent])
+   ~ .content-for-layout > .shopify-section:first-child

:has()の対象をbody全体にすると、ヘッダー内で[open]や[aria-expanded]が変わるたび、ブラウザはページ全体のスタイルを再計算しにいきます。対象を#header-groupに絞ることで、再計算の範囲をヘッダー周りだけに抑えられます。メニューの開閉やドロワー操作が多いページほど、体感できる改善になりそうです。

その他の変更

変更 概要
数量一括編集(クイックオーダーリスト)の堅牢化 assets/quick-order-list.js。セクション再描画中の編集をブロックする処理、同一バリアントで複数行(プロパティ違い)がある場合に数量ゼロを「更新」ではなく「削除」として正しく報告する処理を追加
商品開示情報の絞り込みロジック変更 snippets/cart-disclosure-tooltip.liquid。自前の絞り込みロジックを新しいLiquidフィルタapplicable_disclosuresに置き換え。シンボル画像が未設定の場合のフォールバックアイコン表示も追加
ヘッダーメニューのサブメニュー高さ計測の方式変更 assets/header-menu.js。MutationObserverからResizeObserverベースに変更し、開閉アニメーションの精度を向上
アカウントメニュー設定のラベル変更 customer_account_menu設定の表示名が、汎用的な「メニュー」から専用の文言に変更(表記上の改善のみ、設定値への影響なし)
フォントのpreloadタグ生成の廃止 snippets/fonts.liquidが削除され、layout/theme.liquidからの呼び出しも無くなった。置き換え先となる同等の仕組みは見当たらず、意図は公式リリースノート公開を待って確認したい

アップデート手順

安全カスタマイズ記事で構築したupstream/horizonブランチ運用を使っている場合、管理画面の対象テーマから「コードを編集 → ダウンロード」で最新版のファイル一式を取得し、このブランチにまるごと反映してhorizon-v4.3.0のタグを打って管理します。

⚠️ Shopify公式のGitHub公開ミラー(github.com/Shopify/horizon)は、実際にストアへ配信される内容と乖離することがあります。今回のv4.3.0は、本記事執筆時点でミラー側がまだv4.2.0のままという、乖離の一例そのものです。実店舗からのテーマエクスポートを正として検証することをお勧めします。

まとめ

v4.2.0 → v4.3.0 はアップデート推奨です。特に「カートにメモ欄を表示する」設定を使っている(使おうとして動かなかった)ストアは、今回のアップデートで実際に機能するようになったか確認する価値があります。

  • カート周りの「戻る/進む」キャッシュ対応は、v4.2.0のカート本体修正に続き、今回はヘッダーの個数バッジにまで範囲が広がりました。同種の不具合が別の場所に残っていないか、という目線での継続的な修正がうかがえます。
  • 設定項目はあるのにJSの読み込みが抜けていて機能していない、という今回のカートメモ欄のような不具合は、設定画面だけを見ていては気づけません。該当する設定を使っている場合は、実際の動作を定期的に確認しておくとよいでしょう。
  • GitHub公式ミラーが最新版に追従していない状態は今回も発生しており、バージョン追跡は実店舗のテーマエクスポートを正とする運用が引き続き安全です。

ファイル構成がバージョンごとに変わりうるテーマだからこそ、「どこを触ったか」を常に把握できるGit管理(upstream/horizonブランチでのオリジナル追跡)が、こうした地道なアップデートでも効いてきます。