デザインページは、チェックアウト、ストアフロント、カスタマーポータルのすべての顧客向け画面のブランディングを統合管理するハブです。変更は3つすべてに即時適用され、保存前にリアルタイムでプレビューできます。
主要なハイライト
- 統合デザインハブ - チェックアウト、ストアフロント、カスタマーポータルの外観を1ページで設定
- 事前構築テーマ - キュレーションされたテーマからスタートしてカスタマイズ
- ライト＆ダークモード - 各モード用に別個のカラーパレットを定義
- ライブプレビュー - 保存前にチェックアウト、カスタマーポータル、ストアフロントで変更を確認
- セクションごとのオーバーライド - 他を変更せずに個別セクション（チェックアウト、ストアフロント、カスタマーポータル）を微調整
- プログラムによる制御 - API または Checkout SDK を使ってチェックアウト時にテーマをオーバーライド
はじめに
マーチャントダッシュボードのメインサイドバーからデザインに移動します。デザインページには4つのタブがあります：| タブ | 目的 |
|---|---|
| 一般 | ビジネス名、ロゴ、テーマ選択、およびグローバルな高度な設定 |
| チェックアウト | チェックアウトページ専用にテーマ設定をオーバーライド |
| ストアフロント | テーマ設定をオーバーライドし、ストアフロントレイアウトを構成 |
| カスタマーポータル | カスタマーポータル専用にテーマ設定をオーバーライド |
一般設定
一般タブでは、ベースとなるブランドアイデンティティとグローバルテーマを管理します。
基本構成
| 設定 | 説明 |
|---|---|
| ビジネス名 | チェックアウト、ストアフロント、カスタマーポータルに表示される名称 |
| ビジネスロゴ | すべての顧客向けページで表示されるブランドロゴ |
| テーマ | 出発点として事前構築テーマを選択 |
高度な設定
高度な設定を展開すると、詳細なコントロールにアクセスできます：
タイポグラフィ
| 設定 | オプション | 説明 |
|---|---|---|
| プライマリフォント | 任意の Google Font | 見出しと本文のメインフォント |
| セカンダリフォント | 任意の Google Font | ラベルや補助テキスト用のアクセントフォント |
| フォントサイズ | xs, sm, md, lg, xl, 2xl | グローバルベースのフォントサイズ |
| フォントウェイト | normal, medium, bold, extraBold | デフォルトのフォントウェイト |
カラー構成
ライトモードとダークモードで別々のカラーパレットを定義します。各モードは以下のプロパティをサポートします：| プロパティ | 説明 |
|---|---|
| 背景（プライマリ） | メイン背景色 |
| 背景（セカンダリ） | セカンダリ背景（タブ、カード） |
| テキスト（プライマリ） | メインテキスト色 |
| テキスト（セカンダリ） | ミュートされたテキスト色 |
| ボタン（プライマリ） | プライマリボタンの背景 |
| ボタン（プライマリテキスト） | プライマリボタンのテキスト色 |
| ボタン（セカンダリ） | セカンダリボタンの背景 |
| ボタン（セカンダリテキスト） | セカンダリボタンのテキスト色 |
| ボーダー（プライマリ） | メインボーダー色 |
| ボーダー（セカンダリ） | アクセントボーダー色 |
ボーダー
| 設定 | 説明 |
|---|---|
| ボーダー半径 | 入力欄、ボタン、タブ、カードの角丸度を制御（例：0でシャープな角、8pxで丸み、16pxでピル型） |
事前構築テーマ
Dodo Paymentsでは4つのキュレーションテーマを提供しています。一般タブのテーマドロップダウンから1つ選択すると、チェックアウト、ストアフロント、カスタマーポータル全体に統一されたデザインが即座に適用されます。Dodo Pulses
デフォルトの Dodo Payments テーマ。ライムグリーンのアクセントでエネルギッシュかつフレッシュな雰囲気。余裕のある間隔を持つクリーンなサンセリフタイポグラフィ。- Light Mode
- Dark Mode
Terminal
等幅タイポグラフィとロイヤルブルーのアクセントを持つ開発者向けテーマ。シャープな角とテクニカルな美学で、開発ツールやAPIファースト製品と相性が良い。- Light Mode
- Dark Mode
Bumblebee
温かみのあるアンバーとゴールドのアクセントに丸みを帯びたモダンなスタイル。太く高コントラストで、プレミアムな印象を与えたいコンシューマー向け製品に最適。- Light Mode
- Dark Mode
Bubblegum
遊び心のあるピンクとマゼンタのアクセントに完全な丸み。クリエイティブツール、デザイン製品、ライフスタイルブランドにマッチするモダンで親しみやすいルック。- Light Mode
- Dark Mode
セクションごとのオーバーライド
各セクションタブ（チェックアウト、ストアフロント、カスタマーポータル）にはテーマをオーバーライドのトグルがあります。有効にすると、そのセクションの外観をグローバルテーマとは独立してカスタマイズできます。チェックアウトタブ
- 商品情報と価格
- エクスプレスチェックアウトオプション（Apple Pay、Google Pay）
- 支払い方法の選択とカードフォーム
- 割引コード入力と価格内訳
ストアフロントタブ
| 設定 | 説明 |
|---|---|
| ストアURL | ストアフロントのアドレス（例：store.dodopayments.com/your-store） |
| ストア名 | ストアフロントに表示する名称を表示/非表示に切り替え |
| ストアロゴ | ヘッダーに表示するロゴを表示/アップロード |
| ストアバナー | バナー画像を表示/アップロード |
| 商品説明 | カード上の説明文を表示/非表示に切り替え |
| テーマをオーバーライド | ストアフロントのタイポグラフィ、カラー、ボーダーのみをカスタマイズするために有効化 |
カスタマーポータルタブ
- サブスクリプション管理
- 請求履歴
- 支払い方法
- ウォレットとクレジット
関連リソース
Checkout Features
通貨、言語、税金、割引などを含むチェックアウト機能。
Overlay Checkout SDK
チェックアウトをページ上のモーダルオーバーレイとして埋め込む。
Inline Checkout SDK
チェックアウトをページレイアウトに直接埋め込む。
Storefront
ブランド化されたストアフロントを設定および管理。
Customer Portal
サブスクリプションと請求の顧客セルフサービスポータル。
Multi-Brand Setup
別ブランドのブランディングをそれぞれ設定して1つのアカウントで複数ブランドを運用。