メインコンテンツへスキップ

Documentation Index

Fetch the complete documentation index at: https://docs.waffo.ai/llms.txt

Use this file to discover all available pages before exploring further.

​
カスタマイズ概要

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

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

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

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

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

ウェブサイトURLを入力

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

抽出をクリック

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

確認して調整

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

​
仕組み

スタイル抽出は最高の精度を得るために3層戦略を使用します：
層方法抽出内容
1CSS変数--primary、--brand、--accent などのCSSカスタムプロパティ
2CSSルール解析ボタン背景、見出しカラー、bodyスタイルなどの実際のCSSルール
3AIフォールバック層1-2で十分な結果が得られない場合、AIモデルがHTML/CSSコンテキストを分析してブランドカラーを特定

​
抽出されるプロパティ

プロパティソース
プライマリカラーボタンやCTAのブランド/アクセントカラー
背景カラーページ背景色
カードカラー背景カラーから派生（やや明るい/暗い）
テキストカラー本文テキストカラー
角丸サイトで最も一般的なborder-radius
ロゴサイトのファビコン（base64に変換）
ストア設定でウェブサイトURLがすでに設定されている場合、自動的に入力されます。
AI支援による抽出は1ストアあたり1日10回に制限されています。CSSベースの抽出（層1-2）には制限はありません。

​
ロゴ

チェックアウトページに表示するブランドロゴをアップロード。
設定仕様
フォーマットPNG, JPG, SVG
推奨サイズ200 × 50 px
最大ファイルサイズ2 MB
背景透明推奨
横長のロゴが最も効果的です。ウェブサイトURLからインポートする際、サイトのファビコンが自動的にロゴとして使用されます。

​
テーマモード

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

ライトテーマ

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

ダークテーマ

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

​
カラー設定

現在のテーマモードのチェックアウト配色をカスタマイズ：
設定フィールド名デフォルト（ライト）デフォルト（ダーク）
プライマリカラーcheckoutColorPrimary#7CCB02#ADFF85
背景カラーcheckoutColorBackground#FFFFFF#0A1A1F
カードカラーcheckoutColorCard#F3F4F6#0A1A1F
テキストカラーcheckoutColorText#111827#FFFFFF
カラースウォッチをクリックしてカラーピッカーを開くか、HEXコードを直接入力します。
アクセシビリティのために、テキストと背景色の間に十分なコントラストがあることを確認してください。WCAGでは最低4.5:1のコントラスト比を推奨しています。

​
角丸

checkoutBorderRadius 設定でUI要素の丸みを制御します。
値スタイル
0px直角
4pxわずかな丸み
8px標準（デフォルト）
12px大きな丸み
16px特大の丸み

​
ライブプレビュー

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

​
APIリファレンス

チェックアウト設定はストアの checkoutSettings オブジェクトとして保存されます： 
{
  "checkoutSettings": {
    "light": {
      "checkoutLogo": "https://...",
      "checkoutColorPrimary": "#7CCB02",
      "checkoutColorBackground": "#FFFFFF",
      "checkoutColorCard": "#F3F4F6",
      "checkoutColorText": "#111827",
      "checkoutBorderRadius": "8px"
    },
    "dark": {
      "checkoutLogo": null,
      "checkoutColorPrimary": "#ADFF85",
      "checkoutColorBackground": "#0A1A1F",
      "checkoutColorCard": "#0A1A1F",
      "checkoutColorText": "#FFFFFF",
      "checkoutBorderRadius": "8px"
    }
  }
}
API リファレンス で checkoutSettings の更新方法を確認できます。

​
ストア情報

オプション説明
ストア名チェックアウトヘッダーに表示
サポートメール顧客問い合わせ用
利用規約リンク利用規約へのリンク（必須）
プライバシーリンクプライバシーポリシーへのリンク（必須）

​
ベストプラクティス

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

​
デフォルトにリセット

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