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

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

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

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

目次

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

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

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  2. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をクリックしてテーマエディタを開きます。
  3. テーマエディタの歯車アイコンをクリックして、[テーマ設定] にアクセスします。
  4. チェックアウトをクリックします。
  5. [バナー] セクションで [画像を選択] をクリックします。
  6. [画像を追加] をクリックして画像ファイルをアップロードするか、ライブラリーにアップロードしてある画像を選択します。
  7. [保存] をクリック
  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。
  6. [バナー] セクションで [画像を選択] をタップします。
  7. [画像を追加] をタップして画像ファイルをアップロードするか、ライブラリーにアップロードしてある画像を選択します。
  8. [保存] をタップします。
  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。
  6. [バナー] セクションで [画像を選択] をタップします。
  7. [画像を追加] をタップして画像ファイルをアップロードするか、ライブラリーにアップロードしてある画像を選択します。
  8. [保存] をタップします。

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

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  2. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をクリックしてテーマエディタを開きます。
  3. テーマエディタの歯車アイコンをクリックして、[テーマ設定] にアクセスします。
  4. チェックアウトをクリックします。
  5. [ロゴ] セクションで [画像を選択] をクリックします。
  6. [画像を追加] をクリックして画像ファイルをアップロードするか、ライブラリーにアップロードしてある画像を選択します。
  7. ロゴの位置を変更します。
  8. ロゴのサイズを変更します。
  9. [保存] をクリック
  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。
  6. [ロゴ] セクションで [画像を選択] をタップします。
  7. [画像を追加] をタップして画像ファイルをアップロードするか、ライブラリーにアップロードしてある画像を選択します。
  8. ロゴの位置を変更します。
  9. ロゴのサイズを変更します。
  10. [保存] をタップします。
  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。
  6. [ロゴ] セクションで [画像を選択] をタップします。
  7. [画像を追加] をタップして画像ファイルをアップロードするか、ライブラリーにアップロードしてある画像を選択します。
  8. ロゴの位置を変更します。
  9. ロゴのサイズを変更します。
  10. [保存] をタップします。

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

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

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  2. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をクリックしてテーマエディタを開きます。
  3. テーマエディタの歯車アイコンをクリックして、[テーマ設定] にアクセスします。
  4. チェックアウトをクリックします。

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

    • 色を追加する場合、[背景の色] の横にあるボックスをクリックしてカラーピッカーを開き、色を選択するか、16進数のコードを入力します。
    • 画像を追加する場合、[画像を選択] > [画像を追加] をクリックして画像ファイルをアップロードするか、ライブラリーにアップロードしてある画像を選択します。小さい画像は、背景の縦方向や横方向にタイル状に適用されます。

  6. [保存] をクリック

  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。

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

    • 色を追加する場合は、[背景の色] の横にあるボックスをタップしてカラーピッカーを開き、色を選択するか16進数のコードを入力します。
    • 画像を追加する場合、[画像を選択] > [画像を追加] をタップして画像ファイルをアップロードするか、ライブラリーにアップロードしてある画像を選択します。小さい画像は、背景の縦方向や横方向にタイル状に適用されます。

  7. [保存] をタップします。

  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。

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

    • 色を追加する場合は、[背景の色] の横にあるボックスをタップしてカラーピッカーを開き、色を選択するか16進数のコードを入力します。
    • 画像を追加する場合、[画像を選択] > [画像を追加] をタップして画像ファイルをアップロードするか、ライブラリーにアップロードしてある画像を選択します。小さい画像は、背景の縦方向や横方向にタイル状に適用されます。

  7. [保存] をタップします。

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

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

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  2. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をクリックしてテーマエディタを開きます。
  3. テーマエディタの歯車アイコンをクリックして、[テーマ設定] にアクセスします。
  4. チェックアウトをクリックします。
  5. [メインコンテンツエリア] セクションで、[フォームフィールド] ドロップダウンをクリックし、任意の色を選択します。
  6. [保存] をクリック
  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。
  6. [メインコンテンツエリア] セクションの [フォームフィールド] ドロップダウンをタップして、任意の色を選択します。
  7. [保存] をタップします。
  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。
  6. [メインコンテンツエリア] セクションの [フォームフィールド] ドロップダウンをタップして、任意の色を選択します。
  7. [保存] をタップします。

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

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

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  2. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をクリックしてテーマエディタを開きます。
  3. テーマエディタの歯車アイコンをクリックして、[テーマ設定] にアクセスします。
  4. チェックアウトをクリックします。

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

    • 色を追加する場合、[背景の色] の横にあるボックスをクリックしてカラーピッカーを開き、色を選択するか、16進数のコードを入力します。
    • 画像を追加する場合、[画像を選択] > [画像を追加] をクリックして画像ファイルをアップロードするか、ライブラリーにアップロードしてある画像を選択します。小さい画像は、背景の縦方向や横方向にタイル状に適用されます。

  6. [保存] をクリック

  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。

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

    • 色を追加する場合は、[背景の色] の横にあるボックスをタップしてカラーピッカーを開き、色を選択するか16進数のコードを入力します。
    • 画像を追加する場合、[画像を選択] > [画像を追加] をタップして画像ファイルをアップロードするか、ライブラリーにアップロードしてある画像を選択します。小さい画像は、背景の縦方向や横方向にタイル状に適用されます。

  7. [保存] をタップします。

  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。

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

    • 色を追加する場合は、[背景の色] の横にあるボックスをタップしてカラーピッカーを開き、色を選択するか16進数のコードを入力します。
    • 画像を追加する場合、[画像を選択] > [画像を追加] をタップして画像ファイルをアップロードするか、ライブラリーにアップロードしてある画像を選択します。小さい画像は、背景の縦方向や横方向にタイル状に適用されます。

  7. [保存] をタップします。

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

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

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  2. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をクリックしてテーマエディタを開きます。
  3. テーマエディタの歯車アイコンをクリックして、[テーマ設定] にアクセスします。
  4. [チェックアウト] をクリックします。
  5. 置き換えたい画像の下で、[変更] をクリックしてライブラリーから画像を選択するか、無料の画像を探します。
  6. [保存] をクリック
  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。
  6. 置き換えたい画像の下で、[変更] をタップしてライブラリーから画像を選択するか、無料の画像を探します。
  7. [保存] をタップします。
  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。
  6. 置き換えたい画像の下で、[変更] をタップしてライブラリーから画像を選択するか、無料の画像を探します。
  7. [保存] をタップします。

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

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

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

手順:

  1. 代替テキストを追加する画像で、[編集] をクリックします。
  2. [代替テキスト] の下で、画像の代替テキストを入力します。画像に短い説明的なタイトルを選択します。
  3. [保存] をクリック

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

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

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  2. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をクリックしてテーマエディタを開きます。
  3. テーマエディタの歯車アイコンをクリックして、[テーマ設定] にアクセスします。
  4. チェックアウトをクリックします。
  5. [タイポグラフィー] セクションで、[見出し] ドロップダウンまたは [本文] ドロップダウンをクリックしてフォントを選択します。
  6. [保存] をクリック
  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。
  6. [タイポグラフィー] セクションで、[見出し] ドロップダウンまたは [本文] ドロップダウンをタップしてフォントを選択します。
  7. [保存] をタップします。
  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。
  6. [タイポグラフィー] セクションで、[見出し] ドロップダウンまたは [本文] ドロップダウンをタップしてフォントを選択します。
  7. [保存] をタップします。

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

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

手順:

  1. 管理画面から、設定 > チェックアウトに移動します。
  2. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をクリックしてテーマエディタを開きます。
  3. テーマエディタの歯車アイコンをクリックして、[テーマ設定] にアクセスします。
  4. チェックアウトをクリックします。
  5. [色] セクションで [アクセント]、[ボタン]、[エラー] の横にあるカラーボックスをクリックしてカラーピッカーを開き、色を選択するか、16進コードを入力します。
  6. [保存] をクリック
  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。
  6. [色] セクションで、[アクセント]、[ボタン]、[エラー] の横にあるカラーボックスをタップしてカラーピッカーを開き、色を選択するか16進コードを入力します。
  7. [保存] をタップします。
  1. Shopifyアプリで [...] ボタンをタップし、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [チェックアウトのスタイル] セクションで、[チェックアウトをカスタマイズ] をタップしてテーマエディタを開きます。
  4. テーマエディタの歯車アイコンをタップして、[テーマ設定] にアクセスします。
  5. [チェックアウト] をタップします。
  6. [色] セクションで、[アクセント]、[ボタン]、[エラー] の横にあるカラーボックスをタップしてカラーピッカーを開き、色を選択するか16進コードを入力します。
  7. [保存] をタップします。

チェックアウト時に表示される購入後ページに機能を追加する

お客様のチェックアウト時に、購入後アプリを使用してお客様アンケートやアップセルオファーなどの機能を追加できます。これらのアプリを使用すると、お客様が決済を完了した後に、お客様に対して注文の確認ページが表示される前にコンテンツを追加できます。

購入後ページに機能を追加するには、チェックアウトアプリをインストールして設定し、チェックアウト設定の購入後ページで使用するアプリを選択する必要があります。

一度に1つのみのチェックアウトアプリを使用して、購入後の機能を追加できます。購入後の機能を備える複数のアプリをインストールしている場合は、チェックアウト設定で使用するアプリを選択できます。

チェックアウトアプリをインストールして購入後の機能を追加する

購入後ページに機能を追加するには、チェックアウト時に表示される購入後機能に対応する外部アプリを使用する必要があります。

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

手順:

  1. Shopify App Storeに進み、あなたのビジネスに合った購入後アプリを検索します。
  2. [アプリを追加する] をクリックします。Shopifyアカウントにログインしていない場合は、ログインするよう求められます。
  3. [アプリをインストール] をクリックします。
  4. 管理画面の [アプリ] セクションに移動し、チェックアウトアプリの名前をタップします。
  5. 必要な設定を入力します。

購入後ページで使用するアプリを選択する

チェックアウトアプリをインストールして設定した後、チェックアウト設定の購入後ページで使用するアプリを選択する必要があります。

チェックアウト設定で使用を希望するアプリを変更することもできます。

手順:

  1. 管理画面で、[設定] をクリックします。
  2. チェックアウトをクリックします。
  3. [購入後ページ] セクションで、使用を希望するチェックアウトアプリを選択します。

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

無料体験を試す