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

このページはJul 26, 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. [保存] をクリック

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

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

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

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

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

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

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

手順:

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

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

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

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

手順:

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

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

無料体験を試す