CHECKOUT / CUSTOMER ACCOUNTS

統合ブランディングAPI:チェックアウト・アカウント画面を一元管理

Checkout And Accounts Configuration API(2026-04)で3画面のブランド体験を統合

Checkoutsurfaces.checkoutCustomerAccountssurfaces.customerAccountsSign-insurfaces.signInCheckout AndAccounts Config APISingle API / Plus only

API バージョン 2026-04 から利用可能な Checkout And Accounts Configuration API は、チェックアウト・カスタマーアカウント・サインインの3画面のブランド設定を単一APIで統合管理できる新機能です。Shopify Plus 加盟店限定で提供され、旧来の Checkout Profile API・Checkout Branding API は両方ともこのリリースをもって非推奨(deprecated)となります。

1Before / After:何が変わったのか

BEFORE(〜2026-01)Checkout Profile API(チェックアウト設定)Checkout Branding API(チェックアウト外観)❌ アカウント・サインイン非対応❌ カラースキーム数が限定的AFTER(2026-04〜)Checkout And AccountsConfiguration API✅ 3画面統合 ✅ HEX直接指定 ✅ マーケット別新APIの主要機能✅ 共有 designTokens / components✅ サーフェス別オーバーライド✅ HEX値 / パレットカラーで直接指定✅ 最大20色の編集可能パレット✅ セクションスタイル(余白・影・角丸等)✅ マーケット別ブランドカスタマイズ

2業務ユースケース

課題
チェックアウトのブランドカラーとカスタマーアカウントページの配色が異なり、購入後の体験に統一感がない
打ち手
新APIの共有 designTokens にブランドカラーを一度設定し、checkout・customerAccounts・signIn の3サーフェスに同時適用する
効果
全画面で一貫したブランド体験を提供でき、顧客の離脱感を低減。設定変更も1箇所で完結するため運用工数を削減できる
技術メモ
共有設定は designTokenscomponents で定義。サーフェスごとの差分は surfaces.checkout / surfaces.customerAccounts / surfaces.signIn で個別オーバーライド可能
課題
複数マーケットに展開しており、地域ごとにチェックアウトのロゴや配色を切り替えたいが、従来のAPIでは対応できなかった
打ち手
新APIのマーケット別カスタマイズ機能を使い、市場ごとに独自のブランド設定(ロゴ・カラー・セクションスタイル)を適用する
効果
グローバル展開するブランドが地域ごとのデザイン要件を満たしつつ、コードベースを統一できる
技術メモ
元記事には「Customize branding per market」と記載あり。具体的なマーケットIDの指定方法は公式ドキュメントを参照のこと
課題
チェックアウトのカラー設定が限られたカラースキームにしばられ、ブランドガイドラインに厳密に合わせられなかった
打ち手
HEX値での直接指定と最大20色の編集可能パレットを活用。パレット色を更新するだけで、参照している全箇所の色が自動的に変わる
効果
ブランドリニューアル時の色変更作業が大幅に短縮。デザイナーとの色の齟齬もHEX値で解決できる
技術メモ
パレットカラーは最大20色まで保存可能。各セクション(main・header・orderSummary等)に対してHEX値またはパレット参照で直接指定できる

3技術者が押さえるべきポイント

Breaking Change

旧APIの非推奨化

Checkout Profile API と Checkout Branding API は 2026-04 をもって deprecated となった。既存の実装は新APIへの移行が必要。移行スケジュールは公式ドキュメントを確認すること。

Plus Only

対象プラン限定

本APIは Shopify Plus 加盟店のみ利用可能。StandardプランやAdvancedプランでは使用できない点に注意。

API Version

最低バージョン: 2026-04

API バージョン 2026-04 以降でのみ利用可能。既存のアプリやカスタム実装で旧バージョンを指定している場合はバージョンアップが必要。

New Feature

セクションスタイルの拡張

パディング・シャドウ・カラー・ボーダー・ボーダー半径のスタイル設定が、従来のチェックアウト専用からカスタマーアカウントページにも適用可能になった。

Architecture

サーフェス別オーバーライド構造

共有設定で一括適用しつつ、surfaces.checkout / surfaces.customerAccounts / surfaces.signIn の各キーで画面固有の差分設定を上書きできる設計。

Docs

公式ドキュメントを要確認

マーケット別カスタマイズの具体的なパラメータ構造、パレットカラーの参照方法、旧APIからの移行手順については元記事のリンク先の開発者ドキュメントを参照のこと。

比較項目 旧API(Checkout Branding API) 新API(Checkout And Accounts Configuration API)
対象画面 チェックアウトのみ チェックアウト・カスタマーアカウント・サインイン
カラー指定 限られたカラースキーム経由 HEX直接指定 or パレット参照(最大20色)
マーケット別設定 記載なし 対応(マーケットごとに独自ブランド設定)
セクションスタイル チェックアウトのみ カスタマーアカウントにも適用可能
利用条件 Shopify Plus Shopify Plus(変更なし)
ステータス Deprecated(2026-04〜) Available(2026-04〜)

チェックアウト・カスタマーアカウント・サインインの3画面を単一APIで統一ブランド管理できるようになり、Shopify Plus加盟店のブランド体験の一貫性と開発・運用効率が大幅に向上します。

Source: https://shopify.dev/changelog/checkout-and-accounts-configuration-api-for-unified-branding-across-checkout-customer-accounts-and-sign-in | 公開日: 2026年5月13日