【2024】Shopify(ショッピファイ)の「チェックアウト」のカスタマイズ方法をわかりやすく解説

ECサイトの運営において、お客様が最終的に決済を確定するチェックアウトの画面はとても大切です。サイトのデザイン面に気を取られて、チェックアウト画面の確認がおろそかになってはいませんか？

チェックアウトの画面で最も大切なものは、信頼感です。チェックアウト画面のテキストがおかしな日本語だったり誤字や脱字があったりすると、お客様からの不審に思われて信頼感を損ない、最悪の場合は購入直前でサイトを離脱してしまうというリスクを背負うことにもなります。

Shopify（ショッピファイ）では、デフォルトでもシンプルかつ機能的なチェックアウト画面が生成されますが、OS2.0ではカスタマイザーから簡単にチェックアウトのカスタマイズが可能になりました。Shopifyのチェックアウト画面を少しカスタマイズして、より信頼感を得られるようにしたり、ブランディングにも役立つようにしたりしていきましょう。

チェックアウト画面のカスタマイズとは？

チェックアウト画面とは、ストアに訪れて商品を選び、購入するというお客様の購入フローの最後に位置しています。ここまで到達したお客様に、スムーズにそしてわかりやすく必要事項の入力といった操作をしてもらえるように、細心の注意を払ってカスタマイズするようにしましょう。

良いチェックアウト画面とは？

上の画像は、カスタマイズする前のShopify（ショッピファイ）のデフォルトのチェックアウトの画面です。

チェックアウトのカスタマイズができるとなると、チェックアウトページのカラーを変更したり画像を挿入したり、さまざまなデザインの変更をして目を引きたいと思うようになるかもしれません。しかし、チェックアウト画面の役割は、お客様がこのページを使用して、

• 注文の配送情報
• 支払い情報

などを入力することです。そのため、デザイン的にはシンプルで見やすく保つことが大切です。入力フォームが見えにくくなったり、説明が読みにくくなったりならないように、文字と背景のコントラストを高めたり、あまり派手で目を引く画像は配置しないようにしたりしてください。

チェックアウトで最も重要なことは、スムーズに決済を完了させることです。この点を忘れなければ、カスタマイズに失敗することはないでしょう。

さらに、ストアポリシーを表示しておくことで、お客様が実際に購入する際の安心感にもつながります。返金や配送、プライバシーポリシーなどを記載したストアポリシーがすぐに見られるようにしておきましょう。Shopifyのチェックアウト画面では、これらのポリシーはデフォルトで画面の下の方にリンクテキストとして設置されるようになっています。

OS2.0対応 Shopify（ショッピファイ）のチェックアウト画面のカスタマイズ方法

Shopify（ショッピファイ）のチェックアウトのカスタマイズ方法には2通りあります。

まず、Shopifyの管理画面から「設定>チェックアウト」をクリックし、表示された「チェックアウトをカスタマイズ」をクリックすると、現在公開されているテーマのチェックアウト編集画面に移動します。この画面の左にあるメニューの「テーマ設定>チェックアウト」をクリックすると、カスタマイズ可能な項目が表示されます。

もう一つは、「テーマ>カスタマイズ」で直接カスタマイザーに行き、同様に「テーマ設定>チェックアウト」をクリックします。

OS2.0でカスタマイズできる部分

Shopifyには「Lite」「ベーシック」「Shopify Plus」3つのプランがありますが、どのプランでも共通でカスタマイズできる内容は次のとおりです。

次に一つずつカスタマイズ方法を詳しく解説していきます。

バナー

バナーの項目では、チェックアウトページの一番上にバナー画像の設置ができます。ストアで使用しているバナー画像と同一、もしくは共通する画像を設定しておくことで、信頼されるチェックアウト画面になります。

ただし、ここではあまり大きな画像を設置することは、お客様にとっては画面スクロールの操作が必要になったり、画面が見にくくなったりとデメリットになります。バナー画像のサイズは1,000 x 400ピクセルの解像度が最適です。

ロゴ

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

メインエリア

メインエリアの項目では、チェックアウトページのメインコンテンツエリアのカスタマイズができます。このエリアに背景画像または色を追加することができますが、ここにはお客様が配送先情報や支払い情報を入力するためのフォームがあります。

背景に画像か色のどちらか一方のみが追加できますが、入力フォームがはっきりと見てすぐにわかるような設定にしましょう（背景画像と色の両方を追加することはできません）。

注文内容

お客様がチェックアウトページで 「注文概要を表示」をクリックすると、カートに入っている商品のリストが表示されます。ここで表示される商品リストにはメインエリアと同じように背景画像、または色を追加することができます。

エディター上でも「注文概要を表示」をクリックすることで表示されますので、内容をプレビューしてどのように見えるかを確認しながら作業してください。

フォント

フォントではクリックすると表示されるフォントのリストの中からフォントを選択し、チェックアウトページのフォントをカスタマイズできます。ただし、チェックアウトページのテキストの色は変更できませんので、表示を確認して背景などをできるだけ読みやすい配色にし、テキストが見やすくなるように調整してください。

また、Shopifyで選択できるフォントは日本語には対応していません。日本語として反映されるのはゴシック体か明朝体か、太さは太字かという程度です。

わかりやすいように少し極端にカスタマイズしてみました。やや見づらくて良いカスタマイズではありませんが、Shopifyのチェックアウトはこのようなカスタマイズができます。個性を出したりロゴを表示して信頼性を高めたりして、ブランディングに役立てると良いでしょう。

Shopify（ショッピファイ）でコードを編集してカスタマイズする方法

3つあるShopify（ショッピファイ）のプランのうち、Shopify Plusではチェックアウト画面のコード編集ができます。コードを編集することで、他のプランではできない次のことが、できるようになります。

プログラミングの知識が必要になりますが、チェックアウトをコード編集することで、入力項目の配置の変更や追加だけでなく、タグマネージャーによる細かな分析も可能になります。

Shopify（ショッピファイ）でのチェックアウトの設定方法

Shopify（ショッピファイ）では、チェックアウト画面のカスタマイズだけでなく、お客様が購入する際に必要な情報や注文処理に関する設定をすることができます。チェックアウトの設定をするには、Shopifyの管理画面の「設定→チェックアウト」から行っていきます。

顧客アカウントの有効化

ここでは3つの表示があります。

これらを選択することで、お客様が購入する際に、会員登録（アカウントの作成）を「必要」「任意」「不要」の設定ができます。

「アカウントを無効化する」にチェックマークを入れた場合、ストアから商品を購入する際に、「アカウントの作成」もしくは「ログインする」を促すオプションは表示されません。この場合、アカウントの登録がないため、お客様情報の自動入力もされず、お客様はチェックアウトするときに毎回手動で情報を入力する日があります。

「アカウントを任意にする」にチェックマークを入れておくと、お客様は商品購入時にアカウントの作成を自分で選択できるようになります。お客様にとっては、会員登録することで住所や支払い情報の入力が自動で行われるというメリットがあります。

この場合、チェックアウト画面の入力フィールドに「Shopifyのアカウントをすでに持っていますか? ログイン」の表示が出るようになりますので、ここから「ログイン・アカウントの新規作成・アカウント登録なしでゲストとして購入する。」の選択ができます。

「アカウントを必要とする」にチェックマークを入れておくと、会員登録もしくは作成したアカウントでログインしなければ購入することはできません。会員限定のストアの運営時には、ここにチェックマークを入れておきましょう。

アカウントの作成には、氏名、メールアドレス、パスワードが必要になります。お客様はアカウント登録をすることで、決済時に個人情報が自動で入力されたり、ストアの最新情報やキャンペーン・割引きクーポンをメールで受け取ったりすることができますし、ストア側にとってもEメールマーケティングが可能になります。

一方で、アカウント登録を必須とすると、お客様の中には煩わしく感じて離脱してしまう方もいます。ストアの運営方針にもよりますが、アカウントの有効化は慎重に行ってください。

「お客様が [次回のためこの情報を保存する] チェックボックスをオンにすると、ブラウザーのCookieを使用して、そのストアに関するお客様の情報だけを保存します。お客様が注文すると、住所フィールドが事前入力されます。[アカウント作成を必須にする] を選択する場合、お客様がアカウントを作成するオプションは削除されません。ストアへのアクセスを制限するには、ストアのテーマをカスタマイズする必要があります。

お客様への連絡方法

お客様への連絡方法の項目では、お客様がshopifyのストアで購入手続きを終えた後の連絡方法を選びます。

お客様はチェックアウト時に、「電話番号かメールアドレスのいずれかを選択できます。」にチェックマークを入れると、発送のお知らせなどをSMSでも受け取れるようになります。

お客様情報

お客様がチェックアウトの時に入力するフォームの内容を変更することができます。

• フルネーム：お客様に、姓のみの入力をしてもらう、または名と姓の両方を入力してもらうのかを選択します。
• 会社名：会社名を入力するフォームを表示させるか、表示させないかを選択します。
• 住所2（アパート、ユニットなど）：住所の2行目の入力フォームを表示させない場合は「含めない」を選択します。任意か必須の入力フォームを表示させたい場合は、任意・必須のどちらかをチェックしてください。
• 配送先住所の電話番号：電話番号を入力するフォームを含めるか、または非表示にします。

この電話番号に関しては、たとえば、配送業者が配送するために配送先の電話番号が必要な場合、決済サービスにおいて必要な場合などは電話番号を必須項目にしましょう。チェックアウトのときに、電話番号の入力をしたくないという理由で離脱してしまうお客様が考えられる場合には、電話番号を任意として設定できます。

チップ

チップは、日本ではあまり馴染みがありません。チップの設定をすると、お客様は購入金額に対して一定の割合、もしくは任意の金額のチップを払うことができます。

チップの説明文を変更することもできますので、ストア運営の目標に合わせて設定するのも良いかもしれません。

注文処理

注文処理では、まずお客様がチェックアウトする時の入力についての設定をします。

• 配送先住所を請求先住所として使用する。
• 住所自動入力を有効にする。

どちらもチェックマークを入れておいた方が良いでしょう。こうしておくことで、配送先として入力した住所がチェックアウトの際に、自動で請求先の情報として入力されます。

続いて、注文後にストア側での処理についての設定ができます。Shopifyで注文を発送すると、注文をお客様に発送するプロセスが開始されます。お客様は、その商品を配送したことを知らせるメールを受け取り、注文のフルフィルメント状況が注文ページに配送済として表示されます。

発送の必要のないデジタル商品やShopifyと連携しているフルフィルメントサービスで自動的に発送される場合は、「注文の項目を自動で発送する」を選択しておくことで、注文のステータスが即座に発送済みになります。

「注文のギフトカードのみを自動で発送する」は、ギフトカードのみが自動で発送されます。発送手続きを自分で行う場合は「注文の項目を自動でフルフィルメントしない」を選択します。配送業者の手続きをしたり、自分で発送したりしたら、注文をフルフィルメントすることで発送済みにステータスが変わります。

最後に、注文の発送処理が完了したら、注文内容を自動的にアーカイブすることもできます。こちらもアーカイブを手動で行いたい場合は、「注文を自動でアーカイブする」のチェックを外してください。

カゴ落ちメール

お客様がカートに商品を入れたままで放置するいわゆる「カゴ落ち」商品に対して、Shopifyでは自動でお知らせのメールを送ることができます。カゴ落ちメールは送信する対象と、送るタイミングの設定ができます。

追加スクリプト

コード編集による大幅なカスタマイズはできませんが、ベーシックプランでも追加スクリプトにコードを追加してできることがあります。

HTMLやトラッキングスクリプトを追加することで、画像やテキスト、クーポンなどをチェックアウト画面に表示させたり、コンバージョンのトラッキングもしたりできるようになります。

Shopify（ショッピファイ）でのチェックアウト画面のテスト方法

チェックアウトのカスタマイズが完了したら、必ずテスト決済をして画面や機能の確認をするようにしてください。不備やエラーがあると、お客様が離脱してしまったり、決済ができずに購入に至らなかったりするケースもあります。Shopifyのテスト注文機能を使ってチェックアウトや管理画面にちゃんと反映されるかなど、その後の挙動までしっかりと確認しておきましょう。

テスト注文も方法は、Shopifyの管理画面から「設定 > 決済」をクリックします。Shopifyペイメントの上にある「管理する」をクリックして、画面の下の方の「テストモードを使用する」にチェックを入れて保存します。これで決済はテストモードになり、実際には支払いが行われないテスト注文が実行できます。

まとめ

Shopify（ショッピファイ）では、ベーシックプランでもカスタマイズして個性的なチェックアウト画面を作ることができます。ですが、デザイン的にはシンプルで違和感のないようにする必要があります。

そして、お客様が決済をするページでもあるため、さまざまな配慮をしておくことで、スムーズに購入フローを完了できるようにしておきましょう。

今回は主にベーシックプランでも簡単にカスタマイズする方法をお伝えしましたが、Shopify Plusではさらにさまざまなカスタマイズが可能です。

カスタマイズの最後には、テスト決済をすることも忘れないでください。ご自身で実際の運営における購入フローを体験でき、お客様目線になることもできますし、Shopifyからお客様に届けられるメールなども確認できます。

このように、Shopifyで売り上げを伸ばしていくには、マーケティングをしっかりと行い、取得できたデータを分析して改善していくことが重要です。Shopify Guideは、メディアの運営によってShopifyに関する幅広く情報を得ているため、ECサイトの運営ノウハウを共有することができます。ECサイトの運営や管理などに関してお困りの方は、こちらの問い合わせフォームからお気軽にお問い合わせください。