Checkout / Customer Account / Admin UI拡張
3種類のUI拡張の置き場所（ターゲット）を理解し、最小の拡張を作って表示できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、3種類のUI拡張の置き場所（ターゲット）を理解し、最小の拡張を作って表示できるようになります。
受託では、テーマのHTMLが届かないチェックアウト・顧客アカウント・管理画面にUIを足す唯一の手段がUI拡張です。
UI拡張とは、Shopify提供の部品だけで組む画面
Preact（Reactに似た小さなライブラリ）でコンポーネントを書きます。
使えるのは<s-banner> <s-text> <s-stack> <s-button>などShopify提供のコンポーネントだけで、任意のHTML / CSSは書けません。
安全のための制約で、デザインの自由度と引き換えです。
書き方は3種類とも同じで、違うのは「ターゲット名」だけです。
React版の書き方（reactExtension）の記事は世代が古いので混ぜません。
Checkout UI拡張はどこに出せるか
チェックアウト内（purchase.checkout.block.renderなど）はPlus限定です。
サンクスページ・注文状況ページ（purchase.thank-you.block.renderなど）は全プランで使えます。
配置はチェックアウトエディタで運用者が行います。
Customer Account UI拡張とAdmin UI拡張の違い
Customer Account UI拡張は、新しい顧客アカウントのページ（注文詳細・注文一覧・プロフィール）にブロックや独自ページを足します（customer-account.order-status.block.renderなど）。
Admin UI拡張は、商品詳細などにアクション（admin.product-details.action.render）やブロック（admin.product-details.block.render）、一括操作（admin.order-index.selection-action.render）を足します。
スタッフ向けの小機能に向きます。
発展：プレビューとターゲット名の確認
shopify app devから、開発ストアのチェックアウトエディタや管理画面で確認します。
ターゲット名はAPIバージョンで変わるので、リファレンスで確認します。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。