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

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

オンラインストアを使用して商品を販売している場合は、テーマエディタでチェックアウトページのスタイルをカスタマイズできます。会社ロゴを追加、色を変更または新しいフォントを選択してチェックアウトとビジネスを一致させます。

チェックアウトページに多くの色や関心を加えたいと思われるかもしれませんが、このページではデザインをシンプルに保つことが最適です。お客様は、これらのページを使用して注文の配送情報と支払い情報を入力します。そのため、気が散ったり情報が読みにくくなったりないようにする必要があります。コントラストの高い色と、ページ上の単語から注意を引かない画像を選択してください。

バナー用の背景画像をアップロードします。

チェックアウトページの一番上のバナーにストア名が表示されます。そのバナーの背景画像は変更できます。ブランドと一致する画像を選択します。たとえば、ジュエリーを販売している場合はカラフルなビーズの画像が適しているでしょう。バナー画像は1000 x 400ピクセルの解像度が一番魅力的に見えます。

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。

  1. [スタイル] セクションで、[チェックアウトのカスタマイズ] をクリックしてテーマエディタを開きます。

  2. [バナー] セクションで、[画像をアップロード] をクリックするか、すでにライブラリにアップロードした画像を選択します。

  3. [保存] をクリック

チェックアウトページにロゴを追加する

チェックアウトページにストアロゴを追加できます。バナー画像を使用している場合、ロゴは一番上に表示されます。チェックアウトページのバナーエリアの左、右または中央にロゴを配置できます。

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。

  1. [スタイル] セクションで、[チェックアウトのカスタマイズ] をクリックしてテーマエディタを開きます。

  2. [ロゴ] セクションで、[画像をアップロード] をクリックするか、すでにライブラリにアップロードした画像を選択します。

  3. ロゴの位置を変更します。

  4. ロゴのサイズを変更します。

  5. [保存] をクリック

メインコンテンツエリアに背景画像または色を追加する

チェックアウトページのメインコンテンツエリアに背景画像または色を追加できます。これは、お客様が出荷および支払い情報を入力する領域です。したがって、その背景を使用してもフィールドがはっきりと読み取れるようにしてください。背景画像と色の両方を追加することはできません。

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。

  1. [スタイル] セクションで、[チェックアウトのカスタマイズ] をクリックしてテーマエディタを開きます。

  2. [メインコンテンツエリア] セクションで、背景色または画像を追加します。

  • 色を追加する場合、[背景の色] の横にあるボックスをクリックしてカラーピッカーを開き、色を選択するか、16進数のコードを入力します。

  • 画像をアップロードする場合、[画像をアップロード] をクリックするか、すでにライブラリにアップロードした画像を選択します。小さな画像は、タイルのように背景に縦方向または横方向に繰り返されます。

  1. [保存] をクリック

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

フィールドの色を白または透明に変更できます。背景画像が透けて見えるよう、フィールドを透明にすることができます。フィールドのテキストがはっきり見えるようにしてください。

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。

  1. [スタイル] セクションで、[チェックアウトのカスタマイズ] をクリックしてテーマエディタを開きます。

  2. [メインコンテンツエリア] セクションで、[フォームフィールド] ドロップダウンをクリックし、希望する色を選択します。

  3. [保存] をクリック

注文概要に背景画像または色を追加する

お客様がチェックアウトページで [注文概要を表示] をクリックすると、購入しようとしている商品のリストが表示されます。注文概要には、背景画像または色を追加することができます。選択した内容をプレビューして、注文の概要がどのように見えるかを確認してください。テーマエディタのプレビューで、[注文概要を表示] をクリックできます。

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。

  1. [スタイル] セクションで、[チェックアウトのカスタマイズ] をクリックしてテーマエディタを開きます。

  2. [ご注文概要] セクションで、背景色または画像を追加します。

  • 色を追加する場合、[背景の色] の横にあるボックスをクリックしてカラーピッカーを開き、色を選択するか、16進数のコードを入力します。

  • 画像をアップロードする場合、[画像をアップロード] をクリックするか、すでにライブラリにアップロードした画像を選択します。小さな画像は、タイルのように背景に縦方向または横方向に繰り返されます。

  1. [保存] をクリック

チェックアウトページの画像を変更または削除する

チェックアウトページに追加した画像はどれでも変更または削除できます。

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。

  1. [スタイル] セクションで、[チェックアウトのカスタマイズ] をクリックしてテーマエディタを開きます。

  2. 置き換えたい画像の下で、[更新] をクリックして画像をアップロードするか、ライブラリから選択します。

  3. [保存] をクリック

画像を削除するには、画像の下の [削除] をクリックします。この操作を行っても、Shopifyから画像が削除されることはありません。

画像の代替テキストを追加する

チェックアウトページの画像に満足したら、画像の代替テキストを追加するとよいでしょう。このテキストは、アクセシビリティとSEOに役立ちます。検索エンジンの最適化について詳しくはこちら。

手順:

  1. 画像の下で [更新] をクリックしてから、[画像を編集] を選択します。

  2. 画像の代替テキストを入力します。画像に短い説明的なタイトルを選択します。

  3. [保存] をクリック

チェックアウトページのフォントを変更する

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

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。

  1. [スタイル] セクションで、[チェックアウトのカスタマイズ] をクリックしてテーマエディタを開きます。

  2. [文字体裁] セクションで、[見出し] ドロップダウンまたは [本文] ドロップダウンをクリックしフォントを選択します。

  3. [保存] をクリック

チェックアウトページのボタンおよびアクセントの色を変更する

チェックアウトページのボタン、エラーメッセージ、リンクなどのアクセントの色を変更することができます。色を変更する場合は、メインコンテンツエリアと注文概要の背景に対し、テキストがはっきりと読めることを確認してください。

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。
  1. Shopifyアプリから、[ストア] > [設定] に移動します。
  2. [ストアの設定] で、[チェックアウト] をタップします。

  1. [スタイル] セクションで、[チェックアウトのカスタマイズ] をクリックしてテーマエディタを開きます。

  2. [色] セクションで [アクセント]、[ボタン]、[エラー] の横にあるカラーボックスをクリックしてカラーピッカーを開き、色を選択するか、16進コードを入力します。

  3. [保存] をクリック

外部アプリを使用してチェックアウトに購入後の勧誘商品を追加する

購入後の勧誘商品は、お客様が決済を完了した後、注文の確認ページの前にチェックアウト時に表示されるプロンプトです。プロンプトがお客様に対して表示され、お客様は注文に商品を追加するよう勧められます。

お客様が決済処理を完了する前でもオファーを提示できますが、購入後にオファーを提示することにより、ストア全体の注文量増加を期待できる次のようなメリットがあります。

  • お客様が取引を完了した後に勧誘商品が表示されるため、カゴ落ちのリスクが低くなります。
  • 勧誘商品は、お客様が購入した後にのみ表示されるため、タイムリーで関連性があり、お客様にとってぴったりのものとなります。
  • お客様は、クリック一回で商品を追加購入できます。また、情報を再度入力する必要はありません。

購入後の勧誘商品に対応する外部アプリを使用して、勧誘商品をオンラインストアで有効にする必要があります。Shopify アプリストアの「購入後の勧誘商品アプリ」をご覧ください。

外部アプリについてのサポートが必要な場合は、アプリ開発者にお問い合わせください。

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

無料体験を試す