Horizonにmain-cart-items.liquidがない理由(およびcart-items-componentのカスタマイズ方法)

Horizonにはmain-cart-items.liquidセクションファイルがありません。このファイルはDawnには存在しますが、Horizonにはありません。Horizonでは、カートアイテムのレンダリングはmain-cart.liquid(セクション)とcart-items-componentカスタムウェブエレメントによって処理されます。カートをカスタマイズするには、フラットなLiquidセクションを編集するのではなく、ウェブコンポーネントアーキテクチャ内で作業する必要があります。

重要なポイント

• Horizonは単一のmain-cart-items.liquidパターンを自己完結型のcart-items-componentウェブコンポーネントに置き換えました。
• Horizonコアファイルを直接編集すると、次のテーマ更新時に上書きされます(Horizonは週次リリースを配信します)。
• カート属性はmain-cart-footer.liquidに記述され、ラインアイテムプロパティはmain-cart.liquid内のcart.itemsイテレーションを通じてレンダリングされます。
• 安全なカスタマイズ方法は、blocks/の新しいブロックファイル、プレフィックス付きセクションファイル、およびShopifyの更新をクリーンにプルするGitHubアップストリームブランチです。
• 古いOnline Store 2.0アーキテクチャ向けに構築されたアプリは、ウェブコンポーネントがShadow DOM内で実行されるため、Horizonのカートで破損することが多くあります。

探しているファイルが存在しない理由

Shopifyのヘルプドキュメントと無数のチュートリアルがmain-cart-items.liquidを参照するのは、Dawnがカートをこのように構造化しているためです。Dawnはカートページを2つのセクションに分割します。main-cart-items.liquid(ラインアイテムテーブル)とmain-cart-footer.liquid(合計、チェックアウトボタン、属性)です。Horizonはこの分割を複製していません。

Horizonはホライゾンフレームワークに基づいた新世代のShopifyテーマの旗艦です。アーキテクチャの原則は次のとおりです。ページの意味のあるインタラクティブな部分は、すべて自己完結型のウェブコンポーネントです。カートドロワー、バリアントピッカー、予測検索、どれもがDawnが実装する単一のLiquidセクションではなく、代わりに単一のmain-cart.liquidセクションファイル内で構成されたカプセル化されたカスタムエレメントです。

これはHorizonが2025年Summer Editionsで発表されたときに即座に混乱を引き起こしました。2026年2月までに、ShopifyコミュニティフォーラムはHorizon 3.3.0を実行しているマーチャントで満ちていました。彼らはsections/ディレクトリでmain-cart-items.liquidを検索して何も見つかりませんでした。それはそこにはなかったからです。

Horizonカートアーキテクチャの実際の姿

カートゾーンごとに別のセクションファイルを使用する代わりに、Horizonのカートページは外側のセクションとしてmain-cart.liquidを中心に構造化され、<cart-items-component>カスタムエレメントはその内部の対話的なラインアイテムレンダリングを処理します。

主要なアーキテクチャ上の決定は公式Horizon GitHubリポジトリから直接取得しています。

• サーバーレンダリング優先。 HTMLはLiquidを介してShopifyのサーバーによってレンダリングされます。マネーフォーマットと翻訳のようなビジネスロジックはクライアント上ではなくサーバーに留まります。
• ウェブネイティブプログレッシブ強化。 テーマはポリフィルなしで最新ブラウザを対象とし、カート状態の非同期再レンダリング(数量更新、削除)はサーバーレンダリングされたHTMLの上のプログレッシブ強化として控えめに処理されます。
• スコープ付きJavaScript。 Horizonにはプロダクトフォーム、カートドロワー、カート割引などのコンポーネント用のパフォーマンスを測定する特定のJSクラスが含まれており、コンポーネントごとのJS重を最小限に保ちます。

cart-items-componentはラインアイテムテーブルをラップするカスタムエレメント(<cart-items-component>)です。カート変更イベント(追加、削除、数量更新)をリッスンし、Cart Ajax APIを通じて完全なページ再読み込みなしに内側のHTMLを再レンダリングします。そのLiquidテンプレートは別のファイルではなくmain-cart.liquid内に存在します。

カート属性(ギフトメッセージや日付ピッカーのようなオーダーレベルのカスタムフィールド)はmain-cart-footer.liquidを通じてキャプチャされます。Shopifyのカートテンプレートドキュメントによれば、name="attributes[your-field-name]"およびform="cart"属性を持つ<input>をそのフッターファイル内に追加します。その属性は{{ cart.attributes['your-field-name'] }}を通じてアクセス可能になります。

ラインアイテムプロパティ(製品ごとのカスタムデータ)はcart-items-componentによって自動的にレンダリングされません。main-cart.liquid内でcart.itemsをループし、各アイテムの.propertiesハッシュを出力する必要があります。Shopifyのドキュメント自体は、同じアイテムが一意のラインアイテムプロパティで2つ追加された場合、それらが別のラインアイテムに分割されることを注記しています。これはテンプレートロジックで考慮する価値のある動作です。

Horizonでカートを安全にカスタマイズする方法

Horizonは週次テーマアップデートをリリースします。コアファイルを直接編集する場合、次にアップデートを適用するときにそれらの編集は上書きされます。GitHubリポジトリはライブバージョンの不一致さえフラグを立てました。2026年4月の時点で、Theme Storeはv3.5.1でしたがGitHubリポジトリはv3.4.0に固定されていました。つまり、いくつかの変更はストアに最初に到達していました。これはプロパーなGitワークフローの必要性を強化しています。

3ブランチGitHubセットアップ

Shopifyの公式Growth Servicesガイド(2025年11月発行)は、規律のあるブランチング戦略を通じてすべてのHorizonカスタマイズを管理することを推奨しています。

1. upstream/horizon、公式Shopify/horizonリポジトリを直接トラックします。ここで最初にアップデートをプルします。
2. main、カスタマイズされたプロダクション対応ブランチ。差分をレビューした後、アップストリームをメインにマージします。
3. フィーチャーブランチ、すべての新しいカートカスタマイズはここで構築され、メインにPRされます。

アップストリームを設定するには、ローカルテーマフォルダに移動して以下を実行します。

git remote add upstream https://github.com/Shopify/horizon.git
git fetch upstream

Shopifyが新しいHorizonバージョンを配信するとき、それをアップストリームブランチにプルし、カスタムファイルの競合を解決して、マージします。これはすべての週次アップデートを通じてカートカスタマイズを保持します。

カートカスタマイズを実際に配置する場所

完全なmain-cart.liquidをcustom.プレフィックス付きバージョンにコピーしようという誘惑を避けてください。完全なコピーは、将来のShopifyアップデートをそのセクションに手動で差分し、再適用する必要があるということです。代わりに、必要な場所のみに新しいブロックファイルで追加し、コアセクションは触らないままにしてください。

ウェブコンポーネントとしてインタラクティブなカート拡張を構築する

Horizonのパフォーマンス哲学は明確です。外部カルーセルやUIライブラリはありません。カート内にインタラクティブな動作が必要な場合(アニメーション化された数量ステッパー、リアルタイム送料無料進捗バー)、表示されるときのみ初期化するバニラウェブコンポーネントとして構築します。IntersectionObserverを使用して、ビューポート内にない何かを遅延させ、{% style %}タグ内でスタイルを記述してスコープを保ち、追加のHTTPリクエストを免れます。

class CartUpsellBadge extends HTMLElement {
  connectedCallback() {
    // カートが開いている/エレメントが表示されているときのみ初期化
    this._observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this._init();
        this._observer.disconnect();
      }
    });
    this._observer.observe(this);
  }

  _init() {
    // アップセルデータを取得し、this.innerHTMLにレンダリング
  }
}
customElements.define('cart-upsell-badge', CartUpsellBadge);

<script type="module">を通じてこのスクリプトをロードして、ブラウザがそれを効率的に処理でき、Horizon自体のスクリプトロードパターンにマッチします。

Shadow DOMアプリ互換性の問題

これはプロジェクトの途中でほとんどのマーチャントを捕えるぎゃプです。Dawnの古いOnline Store 2.0アーキテクチャ向けに構築されたアプリは、しばしば数量インプットまたはカート合計スパンのためのDOMのクエリとリスニング変更イベントによってカートに接続しようとします。そのパターンはHorizonで破損します。

Horizonのカートコンポーネントはウェブコンポーネントであるため、Shadow DOMカプセル化を使用するアプリは古いdocument.querySelector('.cart-item__quantity')パターンをブロックします。カスタムエレメントの内部は標準DOMクエリを通じてシャドウルートの外側からアクセスできません。

Horizonにカートアプリをインストールする前に、アプリリストでホライゾン対応のメモを明確に確認してください。「Built for Shopify」バッジを受け取ったアプリはパフォーマンステストを受けていますが、バッジステータスだけではShadow DOM互換性を保証しません。疑わしい場合は、複製されたテーマにインストールし、ライブに進む前にエンドツーエンドで数量更新、削除、チェックアウトフローをテストします。

現在のGitHubラグとそれがあなたに意味すること

2026年中盤の時点で、Shopify/horizon GitHubリポジトリはTheme Storeで提供されているバージョンよりも遅れている時期がありました。2026年4月、コミュニティ開発者はリポジトリがv3.4.0でしたがTheme Storeがv3.5.1を提供していたことに注意しました。Shopifyはメインブランチにはまだリリースされていない機能のコードが含まれている可能性があることを確認し、公開テーマとリポジトリが両方向で同期されていない可能性があります。

実用的な意味。GitHubリポジトリをストアで実行されているバージョンの正規ソースとして扱いません。Shopify管理(Online Store > Themes > Download theme file)から最新テーマをプルし、GitHubリポジトリに対して差分を作成してから、どのコードがライブであるかについて仮定を立てます。Theme Check(Shopify CLIにバンドルされ、Horizonが自動的に推奨するVS Code拡張として利用可能)を使用してデプロイ前のLiquidを検証します。

Instagramアプリブラウザバグに関する注記(2026年6月)

知る価値のあるライブイシュー。2026年6月14日の週の時点で、複数のHorizonマーチャントはInstagram、Facebook、およびTikTokのアプリブラウザ内での最初のページロード後の追加ナビゲーションが白い空白スクリーンを生成することを報告しました。Shopifyのテーマチームは2026年6月17日にこの問題を確認し、回避策が存在することを確認し、根本原因はテーマ自体ではなくアプリブラウザ動作に関連している可能性があると述べました。これらのアプリブラウザを通じてトラフィックを駆動するソーシャルコマースキャンペーンを実行している場合、完全な修正が進行中の間に、現在の回避策についてShopifyサポートに連絡します。

要約。Horizonカートの正しいメンタルモデル

main-cart-items.liquidを探すのはやめてください。それはDawnのコンセプトです。Horizonのカートは。

• 1つの外側セクション。 main-cart.liquid
• 1つのインタラクティブウェブコンポーネント。 <cart-items-component>がAjax再レンダリングを処理
• 1つのフッターセクション。 main-cart-footer.liquidカート属性とチェックアウトフォーム用
• ブロックディレクトリ。 すべてのカスタム追加が存在する場所

そのモデル内で作業し、プロパーなGitHubアップストリームブランチ経由でユーザーの変更を管理し、すべての週次アップデートを心配することなくHorizonのカートを安全にカスタマイズできます。

Horizonでカスタムカート経験の構築について実践的なヘルプが必要な場合は、Shopifyテーマ開発者として何をしているかを確認するか、カートパフォーマンスが根本的な懸念である場合はShopify速度最適化サービスを確認してください。