← inaro.devShopify学習ツール
17-06

テーマアプリ拡張を作る

マーチャントがテーマエディタから追加できるアプリブロック/アプリ埋め込みを作れる

最終確認: 2026-09

解説

受託の現場でなぜ必要か: この回では、マーチャントがテーマエディタから追加できるアプリブロック/アプリ埋め込みを作れるようになります。
受託では、アプリのUIをストアフロントに出すとき、テーマを書き換えずに済むテーマアプリ拡張が唯一の正しい道です。

テーマアプリ拡張とは、テーマを書き換えずにUIを足す仕組み

extensions/<name>/blocks/ assets/ snippets/ locales/shopify.extension.tomltype = "theme")を持ちます。
テーマとは独立して配布・更新されます。
テーマを差し替えても残り、アプリを消せば消えます。
ブロックの中身は普通のLiquidなので、テーマ開発の知識がそのまま使えます。

アプリブロックとアプリ埋め込みブロックの違い

アプリブロックはblocks/*.liquid{% schema %}"target": "section"とし、マーチャントがセクションの中に置きます。
設定は{{ block.settings.x }}で読みます。
商品はproduct型の設定に"autofill": trueを付けると、置かれたセクションの商品が自動で入ります。
アプリ埋め込みブロックは"target": "body"(またはhead / compliance_head)です。
テーマ設定の「アプリ埋め込み」でONにすると、ページ全体に差し込まれます(チャットウィジェット・計測タグ向け)。

動的なデータはどう渡すのか

静的な値なら設定値で渡します。
ストアごとのデータならアプリ所有のメタフィールドに入れます。
リアルタイムの値ならアプリプロキシ(/apps/<subpath> → 自サーバー)で取りに行きます。

発展:上限がある

拡張全体の容量・ブロック数・Liquidの合計サイズには上限があります(強制)。
CSSとJSには圧縮後の推奨値もあります。
shopify app buildで検査できます。
数値は公式で確認します。

ステップ1 / 2

ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。