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

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

チェックアウトページ用に選択するブランディングの一部は、新しいお客様アカウントページにも適用されます。

チェックアウトのスタイルをカスタマイズする際の考慮事項

チェックアウトのスタイルをカスタマイズする前に、以下の考慮事項を確認してください。

  • 管理画面にある [チェックアウトの設定] セクションの [設定] エリアは、プランを選択して最初の商品を作成するまで表示されません。
  • Shopify Plusを利用しているのであれば、Checkout Branding APIを利用して、高度なチェックアウトブランディングのカスタマイズを行うことができます。
  • カートおよびチェックアウトのスタイルのカスタマイズに関するサポートが必要な場合は、Shopifyパートナーを雇うことができます。Shopifyパートナーを雇うことについて詳しくはこちらをご覧ください。

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

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

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

手順

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

手順

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

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

背景画像と色の両方を追加することはできません。

手順

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

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

手順

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

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

手順

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

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

手順

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

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

チェックアウトページに画像を追加した後で、画像のalt属性を追加できます。このテキストは、アクセシビリティとSEOに役立ちます。検索エンジンの最適化 (SEO) について、詳しくはこちらをご覧ください。

手順

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

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

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

手順

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

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

手順

チェックアウトのレイアウトを変更する

ストアのチェックアウトのレイアウトは、デフォルトでワンページチェックアウトに設定されています。管理画面で、ワンページチェックアウトとスリーページチェックアウトを切り替えることができます。チェックアウトのレイアウトを変更する前に、ワンページチェックアウトとスリーページチェックアウトの違いを確認してください。

チェックアウトのレイアウトを切り替えると、チェックアウト・アカウントエディタのプレビューはリアルタイムで表示されません。変更を保存した後、ストアフロントチェックアウトに移動して新しいチェックアウトレイアウトを表示します。

手順

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

アプリブロックを使用することにより、カスタムバナーやロイヤリティ報酬などの機能をお客様のチェックアウト体験に追加できます。チェックアウトの情報ページ、配送ページ、決済ページをカスタマイズするアプリなど、一部のチェックアウトアプリは、Shopify Plusプランのマーチャントのみが利用できます。チェックアウトに追加するアプリを選択する際は、「利用可能なチェックアウトアプリ」を参照してください。

アプリでのチェックアウト設定のカスタマイズについて、詳しくはこちらをご覧ください。

手順

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

無料体験を試す