テーマ×アプリの新標準通信層：ストアフロントイベント＆アクション

8月 08, 2026

STOREFRONT EVENTS

テーマ×アプリの新標準通信層
ストアフロントイベント＆アクション

全テーマ共通・追加APIコール不要。1度の実装でテーマとアプリが双方向に連携する新レイヤー登場。

2026年6月17日より、Liquidストアフロントにテーマとアプリ・エージェント間の標準通信レイヤーが提供されます。テーマはDOMイベントを発行し、アプリはアクションを呼び出すことで、あらゆるテーマで動作する実装が一度で完成。アプリ側では追加のAPIコールなしでペイロードデータを直接取得できます。

ARCHITECTURE

01全体の仕組み：EventsとActionsの双方向フロー

上図：左がテーマ（イベント発行者）、右がアプリ／エージェント（イベント購読者兼アクション呼出者）、中央の黒パネルが新たな標準通信レイヤーです。アクションが成功すると対応するイベントも自動発行されます。

EVENTS

02Eventsの仕様：テーマが発行するDOMイベント

主なイベント一覧

shopify:product:view — 商品ページ表示
shopify:cart:lines-update — カート明細の更新
shopify:search:update — 検索結果の更新
その他コマース操作に対応するイベントが用意されている（詳細は公式ドキュメント参照）

イベントの特徴

通常の DOM イベントとして設計されているため、addEventListener で購読可能
ペイロードデータがイベントオブジェクトに含まれるため、追加の API コール不要
テーマ開発者がテーマコードに実装する責務を持つ
全テーマ共通の仕様なので、アプリは1度の実装で対応

ACTIONS

03Actionsの仕様：アプリがテーマを動かす

アクション	用途	デフォルト動作	テーマオーバーライド
`Shopify.actions.updateCart`	カートの内容を更新する	Storefront API 呼出 + ページリロード	リロードをスキップしてUIを直接更新
`Shopify.actions.getCart`	カート情報を取得する	Storefront API 呼出	テーマ側のキャッシュなどで処理
`Shopify.actions.openCart`	カートドロワーを開く	ページリロード	テーマのドロワーUIを直接制御

アクションはすべてのLiquidストアフロントで利用可能。成功時には対応するイベントが自動で発行されます。テーマ開発者がオーバーライドすることでリロードなしのSPA的UXを実現できます。

USE CASES

04業務に活かせるユースケース

課題: カスタムアプリがカートに商品追加された瞬間を検知するために独自ポーリングや ajax フックを自作していた
打ち手: document.addEventListener('shopify:cart:lines-update', e => { ... }) を1行追記するだけでカート更新を検知し、ペイロードから更新後の明細データを即取得
効果: ポーリング廃止でサーバー負荷削減。追加APIコール不要なので表示遅延も最小化
技術メモ: テーマ側が shopify:cart:lines-update を実装している必要あり。利用前にテーマの実装状況を確認すること

課題: マーケティングアプリがカートドロワーを開く処理をテーマごとに異なるDOM操作で実装しており、テーマ更新のたびに壊れていた
打ち手: Shopify.actions.openCart() を呼び出すだけで、テーマ依存のDOM操作が不要に。テーマ開発者がアクションをオーバーライドしてドロワー制御を担う
効果: テーマ更新時のアプリ修正コスト激減。全テーマ共通のAPIで動作するためサポート範囲が拡大
技術メモ: テーマがオーバーライドしていない場合はデフォルトでページリロードが走る。ユーザー体験のためテーマ側のオーバーライド実装を推奨

課題: AIエージェントがストアを操作する際、カート状態の取得・更新を行うAPIが標準化されておらず、テーマごとに個別対応が必要だった
打ち手: Shopify.actions.getCart / updateCart を呼び出すことでエージェントが標準的にカートを操作可能。成功時のイベントを購読して処理完了を確認
効果: テーマ非依存のエージェント実装が実現。Shopifyが「エージェントもアクションを呼び出す」と明記しており、将来のAIコマース基盤になる可能性
技術メモ: 「agents」との併用は元記事に明示されている。アクションとイベントはセットで実装・テストすること

DEV NOTES