カスタマイズ概要
チェックアウトページをあなたのブランドに合わせましょう。手動でカラーをカスタマイズするか、ウェブサイトのURLからスタイルを直接インポートできます。チェックアウト設定へのアクセス
- ダッシュボード → 設定に移動
- 「チェックアウト」タブを選択
- リアルタイムでカスタマイズとプレビュー
- 保存してライトテーマとダークテーマの両方に適用
ウェブサイトURLからインポート
最速のブランドカスタマイズ方法 — ウェブサイトのURLを貼り付けるだけで、Waffo Pancakeがブランドカラー、角丸、ファビコンを自動抽出します。1
ウェブサイトURLを入力
チェックアウト設定パネルの「ウェブサイトからインポート」セクションに、ウェブサイトのURL(例:
https://yoursite.com)を貼り付けます。2
抽出をクリック
抽出ボタンをクリック。システムがウェブサイトのCSSを分析してブランドカラーを抽出します。
3
確認して調整
抽出されたカラーが現在のテーマモードに適用されます。ライブプレビューを確認し、必要に応じて微調整します。
仕組み
スタイル抽出は最高の精度を得るために3層戦略を使用します:抽出されるプロパティ
AI支援による抽出は1ストアあたり1日10回に制限されています。CSSベースの抽出(層1-2)には制限はありません。
ロゴ
チェックアウトページに表示するブランドロゴをアップロード。テーマモード
各テーマは独立したカラー値を維持します。モードを切り替えてそれぞれを個別にカスタマイズできます。ライトテーマ
白い背景、暗いテキスト。ほとんどのブランドに適合。プロフェッショナルな外観。
ダークテーマ
暗い背景、明るいテキスト。モダンな美学。目の疲れを軽減。
カラー設定
現在のテーマモードのチェックアウト配色をカスタマイズ:
カラースウォッチをクリックしてカラーピッカーを開くか、HEXコードを直接入力します。
アクセシビリティのために、テキストと背景色の間に十分なコントラストがあることを確認してください。WCAGでは最低4.5:1のコントラスト比を推奨しています。
角丸
checkoutBorderRadius 設定でUI要素の丸みを制御します。
ライブプレビュー
プレビューパネルは変更に応じてリアルタイムでチェックアウトページを表示します。- デスクトップビュー — フル幅のチェックアウトレイアウト
- モバイルビュー — スマートフォンサイズのチェックアウトレイアウト
- プロダクト選択 — ストアの異なるプロダクトでプレビュー
APIリファレンス
チェックアウト設定はストアのcheckoutSettings オブジェクトとして保存されます:
checkoutSettings の更新方法を確認できます。
ストア情報
ベストプラクティス
ブランドの一貫性
ブランドの一貫性
- ウェブサイトからインポート機能でサイトのカラーを自動的にマッチ
- メインサイトと同じロゴを使用
- 一貫した配色で信頼を構築
両方のテーマをカスタマイズ
両方のテーマをカスタマイズ
- 多くの顧客がダークモードを使用 — ライトとダークの両テーマをカスタマイズ
- ロゴがライトとダークの両方の背景で正常に表示されることを確認
- 両方のモードでカラーコントラストをテスト
モバイル最適化
モバイル最適化
- モバイルプレビューでレイアウトを確認
- 小さい画面でロゴが正しくスケールすることを確認
- タッチターゲットが十分な大きさか確認
アクセシビリティ
アクセシビリティ
- 十分なカラーコントラストを維持(最低4.5:1)
- 読みやすいフォントサイズ
- 異なる色覚プロファイルでテスト
デフォルトにリセット
現在のテーマモードをデフォルトにリセット:- チェックアウト設定で「リセット」をクリック
- 現在のモード(ライトまたはダーク)がデフォルトのWaffo Pancakeカラーに戻ります