デザインとテーマのカスタマイズ

​

主要なハイライト

1. 統合デザインハブ - 1つのページからcheckout、storefront、Customer Portalの外観を設定できます。
2. ビルド済みテーマ - 厳選されたテーマを選び、そこからカスタマイズを始められます。
3. ライトモードとダークモード - 各モードに個別のカラーパレットを設定できます。
4. ライブプレビュー - 保存する前に、checkout、Customer Portal、storefront全体で変更後の表示を確認できます。
5. セクションごとの上書き設定 - 他のセクションに影響を与えずに、各セクション（checkout、storefront、Customer Portal）を細かく調整できます。
6. プログラムによる制御 - APIまたはCheckout SDKを使用して、checkout時にテーマを上書きできます。
7. Test DesignをLiveにコピー - Test modeで完成させたデザインを、1ステップでlive modeに移行できます。

​

はじめに

マーチャントダッシュボードで設定 → デザインに移動します。デザインページには4つのタブがあります:

​

一般設定

一般タブでは、ベースとなるブランドアイデンティティとグローバルテーマを管理します。

​

基本構成

​

高度な設定

高度な設定を展開すると、詳細なコントロールにアクセスできます：

​

タイポグラフィ

​

カラー構成

ライトモードとダークモードで別々のカラーパレットを定義します。各モードは以下のプロパティをサポートします：

​

ボーダー

​

事前構築テーマ

Dodo Paymentsでは4つのキュレーションテーマを提供しています。一般タブのテーマドロップダウンから1つ選択すると、チェックアウト、ストアフロント、カスタマーポータル全体に統一されたデザインが即座に適用されます。

​

Dodo Pulses

デフォルトの Dodo Payments テーマ。ライムグリーンのアクセントでエネルギッシュかつフレッシュな雰囲気。余裕のある間隔を持つクリーンなサンセリフタイポグラフィ。

​

Terminal

等幅タイポグラフィとロイヤルブルーのアクセントを持つ開発者向けテーマ。シャープな角とテクニカルな美学で、開発ツールやAPIファースト製品と相性が良い。

​

Bumblebee

温かみのあるアンバーとゴールドのアクセントに丸みを帯びたモダンなスタイル。太く高コントラストで、プレミアムな印象を与えたいコンシューマー向け製品に最適。

​

Bubblegum

遊び心のあるピンクとマゼンタのアクセントに完全な丸み。クリエイティブツール、デザイン製品、ライフスタイルブランドにマッチするモダンで親しみやすいルック。

​

セクションごとのオーバーライド

各セクションタブ（チェックアウト、ストアフロント、カスタマーポータル）にはテーマをオーバーライドのトグルがあります。有効にすると、そのセクションの外観をグローバルテーマとは独立してカスタマイズできます。

​

チェックアウトタブ

チェックアウト体験専用にタイポグラフィ、カラー、ボーダー設定をオーバーライドします。ライブプレビューには以下が表示されます：

• 商品情報と価格
• エクスプレスチェックアウトオプション（Apple Pay、Google Pay）
• 支払い方法の選択とカードフォーム
• 割引コード入力と価格内訳

​

ストアフロントタブ

ストアフロント固有の設定を構成します：

​

カスタマーポータルタブ

カスタマーポータルのテーマをオーバーライドします。ポータルには以下が含まれます：

• サブスクリプション管理
• 請求履歴
• 支払い方法
• ウォレットとクレジット

​

Copy Design From Test to Live Mode

Test modeとlive modeではデザイン設定が別々に管理されるため、テスト中に作成したテーマが実際の顧客に自動的に表示されることはありません。手作業で作り直す代わりに、1ステップでデザインをTest modeからlive modeにコピーできます。 コピーの対象は、storefrontのブランディングに加えて、すべてのデザイン対象（一般設定、checkout、Customer Portal、storefrontの上書き設定）です。

​

関連リソース