チェックアウトブランディングを設定する

このページはMar 23, 2023に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/checkout-settings/checkout-extensibility/checkout-brandingをご覧ください。

チェックアウトエディタを使用して、チェックアウトページのブランディングをカスタマイズできます。ブランドのロゴの追加、背景画像の追加、色の変更、新しいフォントの選択を行い、ビジネスにマッチしたチェックアウトページを作成できます。チェックアウトブランディングの高度なカスタマイズについては、「Checkout Branding API」を参照してください。

お客様は、チェックアウトページで注文の配送先情報と支払い情報を入力します。多くのビジネスでは、読みやすく、お客様を混乱させないチェックアウトページにするために、デザインをシンプルなものにしています。コントラストの高い配色を選択します。ページ上の文章から注意をそらすような画像は選択しないようにします。

チェックアウトのヘッダーにロゴを追加する

チェックアウトのヘッダーにロゴを追加できます。ロゴのサイズ、アラインメント、位置を調整できます。

手順：

  1. 管理画面から、[設定] > [チェックアウト] に移動します。
  2. [チェックアウトのブランディングとカスタマイズ] セクションで、編集するチェックアウトの横にある [カスタマイズ] をクリックします。
  3. 絵筆アイコンをクリックします。

  4. [ロゴ] エリアで、ロゴを追加します。

    1. [画像を選択する] をクリックします。
    2. [画像を追加] をクリックして、新しい画像をアップロードするか、ライブラリーにアップロード済みの画像を選択します。
    3. [完了] をクリックします。

  5. [ロゴの最大幅] エリアで、ロゴのサイズを調整します。

  6. [ロゴアラインメント] エリアで、ロゴを左揃え、中央揃え、右揃えにするか選択します。

  7. [ロゴの位置] エリアで、チェックアウトフォーム、注文サマリー、ロゴの最大幅の位置を選択します。

  8. [保存] をクリックします。

チェックアウトフォームに背景画像または色を追加する

チェックアウトフォームに背景色か画像を追加できます。背景色か画像のどちらかだけを追加できます。

背景色または画像を追加した後で、チェックアウトフィールドがはっきりと読み取れるか確認してください。

手順：

  1. 管理画面から、[設定] > [チェックアウト] に移動します。
  2. [チェックアウトのブランディングとカスタマイズ] セクションで、編集するチェックアウトの横にある [カスタマイズ] をクリックします。
  3. 絵筆アイコンをクリックします。
  4. [チェックアウトフォーム] セクションで、背景画像または色を追加します。
    • 背景画像を追加するには、次の操作を実行します。
      1. [画像を選択する] をクリックします。
      2. [画像を追加] をクリックして、新しい画像をアップロードするか、ライブラリーにアップロード済みの画像を選択します。
      3. [完了] をクリックします。

- 背景色を追加するには、以下の操作を実行します。 1. [背景色] の横の色がついた円をクリックして、カラーピッカーを開きます。 2. 色を選択するか、16進数カラーコードを入力します。

  1. [保存] をクリックします。

注文サマリーに背景画像または色を追加する

注文サマリーに背景色または画像を追加できます。背景色か画像のどちらかだけを追加できます。

背景色または画像を追加した後で、チェックアウトフィールドがはっきりと読み取れるか確認してください。

手順：

  1. 管理画面から、[設定] > [チェックアウト] に移動します。
  2. [チェックアウトのブランディングとカスタマイズ] セクションで、編集するチェックアウトの横にある [カスタマイズ] をクリックします。
  3. 絵筆アイコンをクリックします。
  4. [注文サマリー] セクションで、背景画像または色を追加します。
    • 背景画像を追加するには、次の操作を実行します。
      1. [画像を選択する] をクリックします。
      2. [画像を追加] をクリックして、新しい画像をアップロードするか、ライブラリーにアップロード済みの画像を選択します。
      3. [完了] をクリックします。

- 背景色を追加するには、以下の操作を実行します。 1. [背景色] の横の色がついた円をクリックして、カラーピッカーを開きます。 2. 色を選択するか、16進数カラーコードを入力します。

  1. [保存] をクリックします。

チェックアウトの色をカスタマイズする

チェックアウトボタン、エラーメッセージ、アクセントの色を変更できます。チェックアウトフィールドを白または透明にすることもできます。

チェックアウトページの色を変更した後、注文入力エリアと注文サマリーエリアの背景に対してテキストがはっきりと読み取れるか確認してください。

アクセント、ボタン、エラーの色を変更する

  1. 管理画面から、[設定] > [チェックアウト] に移動します。
  2. [チェックアウトのブランディングとカスタマイズ] セクションで、編集するチェックアウトの横にある [カスタマイズ] をクリックします。
  3. 絵筆アイコンをクリックします。

  4. [色] セクションで、色を選択します。

    1. [アクセント]、[ボタン]、または [エラー] の横の色のついた円をクリックして、カラーピッカーを開きます。
    2. 色を選択するか、16進数カラーコードを入力します。

  5. [保存] をクリックします。

フォームフィールドの色を変更する

  1. 管理画面から、[設定] > [チェックアウト] に移動します。
  2. [チェックアウトのブランディングとカスタマイズ] セクションで、編集するチェックアウトの横にある [カスタマイズ] をクリックします。
  3. 絵筆アイコンをクリックします。
  4. [色] セクションで、[フォームフィールド] ドロップダウンメニューをクリックして、白または透明を選択します。Checkout Branding APIを使用して、フォームフィールドのカスタム値を設定した場合、追加の [カスタム (API経由で設定)] オプションが表示されます。
  5. [保存] をクリックします。

チェックアウトのフォントをカスタマイズする

フォントのリストから選択し、チェックアウトページをカスタマイズできます。

手順：

  1. 管理画面から、[設定] > [チェックアウト] に移動します。
  2. [チェックアウトのブランディングとカスタマイズ] セクションで、編集するチェックアウトの横にある [カスタマイズ] をクリックします。
  3. 絵筆アイコンをクリックします。

  4. [タイポグラフィー] セクションで、チェックアウトテキストの見出しと本文のフォントを変更します。

    1. [見出し] エリア、または [本文] エリアで、フォント名をクリックしてドロップダウンメニューを開きます。
    2. チェックアウトに適用するフォントを選択します。

  5. [保存] をクリックします。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す