主要なハイライト
- Unified Design Hub — チェックアウト、ストアフロント、Customer Portal の外観を1つのページから設定
- Pre-Built Themes — 用意されたテーマを選び、そこからカスタマイズ
- Light & Dark Mode — 各モードに個別のカラーパレットを定義
- Live Preview — 保存する前に、すべてのサーフェスで変更内容がどのように表示されるかを確認
- Per-Section Overrides — 他のセクションに影響を与えず、個々のセクションを細かく調整
- Programmatic Control — Checkout Sessions API を介してチェックアウト時にテーマを上書き (
customization.theme_config)。セッションのtheme_configは、ダッシュボードのデザインより優先されます。Checkout SDK のクライアントサイドthemeConfigオプションは非推奨です - Copy Test Design to Live — テストモードで完成させたデザインを、1ステップでライブモードに移行
はじめに
マーチャントダッシュボードで設定 → デザインに移動します。デザインページには4つのタブがあります:一般設定
一般タブでは、ベースとなるブランドアイデンティティとグローバルテーマを管理します。
基本構成
高度な設定
高度な設定を展開すると、詳細なコントロールにアクセスできます：
タイポグラフィ
カラー構成
Light Mode と Dark Mode にそれぞれ異なるカラーパレットを設定できます。各モードでは次の項目を設定できます。ボーダー
事前構築テーマ
Dodo Paymentsでは4つのキュレーションテーマを提供しています。一般タブのテーマドロップダウンから1つ選択すると、チェックアウト、ストアフロント、カスタマーポータル全体に統一されたデザインが即座に適用されます。Dodo Pulses
デフォルトの Dodo Payments テーマ。ライムグリーンのアクセントでエネルギッシュかつフレッシュな雰囲気。余裕のある間隔を持つクリーンなサンセリフタイポグラフィ。- Light Mode
- Dark Mode
Dodo Pulses in light mode
Terminal
等幅タイポグラフィとロイヤルブルーのアクセントを持つ開発者向けテーマ。シャープな角とテクニカルな美学で、開発ツールやAPIファースト製品と相性が良い。- Light Mode
- Dark Mode
Terminal in light mode
Bumblebee
温かみのあるアンバーとゴールドのアクセントに丸みを帯びたモダンなスタイル。太く高コントラストで、プレミアムな印象を与えたいコンシューマー向け製品に最適。- Light Mode
- Dark Mode
Bumblebee in light mode
Bubblegum
遊び心のあるピンクとマゼンタのアクセントに完全な丸み。クリエイティブツール、デザイン製品、ライフスタイルブランドにマッチするモダンで親しみやすいルック。- Light Mode
- Dark Mode
Bubblegum in light mode
セクションごとのオーバーライド
各セクションタブ（チェックアウト、ストアフロント、カスタマーポータル）にはテーマをオーバーライドのトグルがあります。有効にすると、そのセクションの外観をグローバルテーマとは独立してカスタマイズできます。チェックアウトタブ
- 商品情報と価格
- Express checkoutオプション（Apple Pay、Google Pay）
- 支払い方法の選択とカードフォーム
- 割引コード入力と価格の内訳
Storefrontタブ
Customer Portalタブ
- サブスクリプション管理
- 請求履歴
- 支払い方法
- ウォレットとクレジット
テストモードからライブモードにデザインをコピーする
テストモードとライブモードでは、デザイン設定が別々に管理されます。テスト中に作成したテーマは、実際の顧客には自動的に表示されません。手動で再作成する代わりに、1ステップでテストモードからライブモードにデザインをコピーできます。1
Open Design in Test Mode
テストモードに切り替え、Settings → Design に移動します。保留中の変更は先に保存してください。コピーされるのは保存済みのテストデザインのみです。
2
Start the Copy
Copy to Live Mode をクリックします。保存済みのテーマまたは公開済みのテストストアフロントがある場合にボタンが表示され、ライブモードが有効化されている必要があります。
3
Choose What to Copy
Theme & customizations（全体テーマに加え、チェックアウト、ストアフロント、Customer Portal の上書き設定）と、Storefront details（ストア名、ロゴ、バナー）を選択します。テストモードでストアフロントが公開されていない場合、Storefront details は利用できません。
4
Confirm
ダイアログで Copy to Live Mode をクリックします。
関連ページ
Checkout Features
通貨、言語、税金、割引など、チェックアウトの機能。
Overlay Checkout SDK
ページ上にモーダルオーバーレイとしてチェックアウトを埋め込みます。
Inline Checkout SDK
ページレイアウトにチェックアウトを直接埋め込みます。
Storefront
ブランド化したストアフロントを設定、管理します。
Customer Portal
サブスクリプションと請求のための顧客セルフサービスポータル。
Multi-Brand Setup
個別のブランディングを設定して、1つのアカウントで複数のブランドを運用します。