DOCS

Checkoutデザイン

Checkoutデザイン

ブランドのロゴ、ファビコン、カラーを追加しましょう。

ロゴ、ファビコン、ブランドカラーで国際的なcheckoutページをカスタマイズし、よりパーソナライズされたcheckout体験を提供しましょう。

ロゴのアップロード

checkoutページにロゴをアップロードするには:

  1. ダッシュボード -> 設定 -> Checkout -> 外観 に移動します。
  2. 新しいロゴをアップロードをクリックします。
  3. コンピューターからファイルを選択し、開くをクリックします。

ファビコンのアップロード

checkoutページにファビコンをアップロードするには:

  1. ダッシュボード -> 設定 -> Checkout -> 外観 に移動します。
  2. 新しいファビコンをアップロードをクリックします。
  3. コンピューターからファイルを選択し、開くをクリックします。

保存するファビコンファイルの取得方法

コンピューターにファビコンファイルがない場合は、アップロード前にウェブサイトから取得するために以下の手順を行ってください。

  1. ウェブサイトにアクセスします。
  2. ウェブサイトのページ上で右クリックし、ドロップダウンからページのソースを表示を選択します。
  3. ctrl+f(Macの場合はcommand+f)を押して「favicon」という単語を検索し、ファビコンを見つけます。
  4. 表示されたファビコンのリンクをクリックして画像を表示します。
  5. 画像を右クリックし、ICO形式で保存します。
    1. 画像がICO形式で保存できない場合は、現在の形式で保存しConvertioなどのプログラムを使ってICOファイルに変換してください。

カラーの変更

checkoutページのカラーをカスタマイズするには:

  1. ダッシュボード -> 設定 -> Checkout -> 外観 に移動します。
  2. カラーの下で変更したい色をクリックします。
  3. プリセットカラーを選択するか、希望の色の16進カラーコードを入力します。

ブランドカラーの16進カラーコードの見つけ方がわからない場合は、ブラウザのカラーピッカー拡張機能を使ってウェブサイトからカラーコードを取得できます。

カラーをカスタマイズできる要素

checkoutページでは最大3色をカスタマイズできます:

  • プライマリーカラー(ラジオボタン、チェックボックス、入力欄、リンク用)
  • ボタンカラー(注文を確定するcheckoutボタンの色)
  • ヘッダーの背景色

checkoutデザインのプレビュー

checkoutデザインをプレビューするには、テスト注文を作成します。手順は以下の通りです:

  1. ダッシュボード注文に移動します。
  2. テストモードに切り替え、テスト注文を作成をクリックします。
  3. テスト注文の詳細を入力し、注文を作成をクリックします。

すると、checkout外観セクションで設定したデザインを表示します。

このページは役に立ちましたか?