Skip to main content

カスタマイズ概要

チェックアウトページをあなたのブランドに合わせましょう。手動でカラーをカスタマイズするか、ウェブサイトのURLからスタイルを直接インポートできます。

チェックアウト設定へのアクセス

  1. ダッシュボード → 設定に移動
  2. 「チェックアウト」タブを選択
  3. リアルタイムでカスタマイズとプレビュー
  4. 保存してライトテーマとダークテーマの両方に適用

ウェブサイトURLからインポート

最速のブランドカスタマイズ方法 — ウェブサイトのURLを貼り付けるだけで、Waffo Pancakeがブランドカラー、角丸、ファビコンを自動抽出します。
1

ウェブサイトURLを入力

チェックアウト設定パネルの「ウェブサイトからインポート」セクションに、ウェブサイトのURL(例:https://yoursite.com)を貼り付けます。
2

抽出をクリック

抽出ボタンをクリック。システムがウェブサイトのCSSを分析してブランドカラーを抽出します。
3

確認して調整

抽出されたカラーが現在のテーマモードに適用されます。ライブプレビューを確認し、必要に応じて微調整します。

仕組み

スタイル抽出は最高の精度を得るために3層戦略を使用します:

抽出されるプロパティ

ストア設定でウェブサイトURLがすでに設定されている場合、自動的に入力されます。
AI支援による抽出は1ストアあたり1日10回に制限されています。CSSベースの抽出(層1-2)には制限はありません。

ロゴ

チェックアウトページに表示するブランドロゴをアップロード。
横長のロゴが最も効果的です。ウェブサイトURLからインポートする際、サイトのファビコンが自動的にロゴとして使用されます。

テーマモード

各テーマは独立したカラー値を維持します。モードを切り替えてそれぞれを個別にカスタマイズできます。

ライトテーマ

白い背景、暗いテキスト。ほとんどのブランドに適合。プロフェッショナルな外観。

ダークテーマ

暗い背景、明るいテキスト。モダンな美学。目の疲れを軽減。

カラー設定

現在のテーマモードのチェックアウト配色をカスタマイズ: カラースウォッチをクリックしてカラーピッカーを開くか、HEXコードを直接入力します。
アクセシビリティのために、テキストと背景色の間に十分なコントラストがあることを確認してください。WCAGでは最低4.5:1のコントラスト比を推奨しています。

角丸

checkoutBorderRadius 設定でUI要素の丸みを制御します。

ライブプレビュー

プレビューパネルは変更に応じてリアルタイムでチェックアウトページを表示します。
  • デスクトップビュー — フル幅のチェックアウトレイアウト
  • モバイルビュー — スマートフォンサイズのチェックアウトレイアウト
  • プロダクト選択 — ストアの異なるプロダクトでプレビュー
変更は保存せずにプレビューに即座に反映されます。

APIリファレンス

チェックアウト設定はストアの checkoutSettings オブジェクトとして保存されます:
API リファレンスcheckoutSettings の更新方法を確認できます。

ストア情報


ベストプラクティス

  • ウェブサイトからインポート機能でサイトのカラーを自動的にマッチ
  • メインサイトと同じロゴを使用
  • 一貫した配色で信頼を構築
  • 多くの顧客がダークモードを使用 — ライトとダークの両テーマをカスタマイズ
  • ロゴがライトとダークの両方の背景で正常に表示されることを確認
  • 両方のモードでカラーコントラストをテスト
  • モバイルプレビューでレイアウトを確認
  • 小さい画面でロゴが正しくスケールすることを確認
  • タッチターゲットが十分な大きさか確認
  • 十分なカラーコントラストを維持(最低4.5:1)
  • 読みやすいフォントサイズ
  • 異なる色覚プロファイルでテスト

デフォルトにリセット

現在のテーマモードをデフォルトにリセット:
  1. チェックアウト設定で「リセット」をクリック
  2. 現在のモード(ライトまたはダーク)がデフォルトのWaffo Pancakeカラーに戻ります
リセットは取り消せません。そのテーマモードの現在のカスタマイズが失われます。

チェックアウトの言語

チェックアウトの言語はここで設定する必要はありません —— 購入者のブラウザー言語に自動で追従し、購入者自身で切り替えることもできます。対応する 19 言語と優先順位は多言語サポートをご覧ください。