カスタマイズ概要
カスタムロゴ、カラー、テーマで、チェックアウトページをあなたのブランドに合わせましょう。チェックアウト設定へのアクセス
- ダッシュボード → 設定に移動
- 「チェックアウト」タブを選択
- カスタマイズしてプレビュー
- 保存して適用
ブランドオプション
ロゴ
チェックアウトヘッダーに表示するブランドロゴをアップロード。| 設定 | 仕様 |
|---|---|
| フォーマット | PNG, JPG, SVG |
| 推奨サイズ | 200 × 50 px |
| 最大ファイルサイズ | 2 MB |
| 背景 | 透明推奨 |
バナー画像
チェックアウトページを強化するバナー画像を追加。| 設定 | 仕様 |
|---|---|
| フォーマット | PNG, JPG |
| 推奨サイズ | 1200 × 300 px |
| 最大ファイルサイズ | 5 MB |
| アスペクト比 | 4:1 |
テーマ設定
カラーモード
ライトテーマ
- 白い背景
- 暗いテキスト
- ほとんどのブランドに適合
- プロフェッショナルな外観
ダークテーマ
- 暗い背景
- 明るいテキスト
- モダンな美学
- 目の疲れを軽減
カスタムカラー
チェックアウトの配色をカスタマイズ：| カラー設定 | 説明 | デフォルト |
|---|---|---|
| アクセントカラー | ボタン、リンク、フォーカス状態 | #6366F1 |
| ホバーカラー | ボタンホバー状態 | #4F46E5 |
| テキストカラー | メインテキスト | #1F2937 |
| 背景カラー | ページ背景 | #FFFFFF |
カラーピッカー
各カラー設定について：- カラースウォッチをクリック
- カラーピッカーを使用またはHEXコードを入力
- 変更をリアルタイムでプレビュー
- 満足したら保存
アクセシビリティのために、テキストと背景色の間に十分なコントラストがあることを確認してください。WCAGでは最低4.5:1のコントラスト比を推奨しています。
プレビューモード
変更を保存する前に：- 右側のプレビューパネルを使用
- デスクトップとモバイルビューを切り替え
- 異なるプロダクトでテスト
- すべての要素が読みやすいことを確認
カスタマイズ例
テック系スタートアップ
Eコマース
クリエイティブエージェンシー
その他の設定
ストア情報
チェックアウトページに追加情報を表示：| オプション | 説明 |
|---|---|
| ストア名 | ヘッダーに表示 |
| サポートメール | 顧客問い合わせ用 |
| 利用規約リンク | 利用規約へのリンク |
| プライバシーリンク | プライバシーポリシーへのリンク |
法的リンク
法的ページへのリンクを追加：- 利用規約（必須）
- プライバシーポリシー（必須）
- 返金ポリシー（オプション）
メールブランディング
チェックアウトのブランディングはトランザクションメールにも拡張されます：| メールタイプ | 適用されるブランド |
|---|---|
| 注文確認 | ロゴ、カラー |
| 支払い領収書 | ロゴ、カラー |
| サブスクリプションリマインダー | ロゴ、カラー |
| 支払い失敗 | ロゴ、カラー |
ベストプラクティス
ブランドの一貫性
ブランドの一貫性
- ウェブサイトの見た目に合わせる
- メインサイトと同じロゴを使用
- 一貫した配色で信頼を構築
信頼のシグナル
信頼のシグナル
- プロフェッショナルで高品質な画像を使用
- 連絡先情報を含める
- セキュリティバッジを表示
- 支払い方法ロゴを表示
モバイル最適化
モバイル最適化
- モバイルデバイスでテスト
- ロゴが正しくスケールすることを確認
- 小さい画面でのカラーコントラストを確認
- タッチターゲットが十分な大きさか確認
アクセシビリティ
アクセシビリティ
- 十分なカラーコントラスト
- 読みやすいフォントサイズ
- 画像の代替テキスト
- キーボードナビゲーション対応
デフォルトにリセット
すべてのカスタマイズをリセット：- チェックアウト設定に移動
- 「デフォルトにリセット」をクリック
- 操作を確認
- デフォルトのWaffo Pancakeブランドに戻ります