Shopifyチェックアウト徹底解説！カスタマイズと抑えるべきポイント
この記事の所要時間：9分
チェックアウトは、顧客が個人情報や、決済情報を入力するページでもあるので、違和感やストレスを感じさせて離脱してしまうと、とてももったいないです。
こういったことが起こらないようにチェックアウトには配慮が必要です。
Shopifyでは、チェックアウトをカスタマイズすることができ、入力項目や追加機能、デザインなども変更することができます。
今回は通常の3プラン(ベーシック・スタンダード・プレミアム)で、できるチェックアウトのカスタマイズの紹介と設定方法について説明します。
チェックアウトのカスタマイズについて
チェックアウトとは決済ページとも言われ、商品を購入するための個人情報や、決済情報を入力するページです。顧客はショップで商品をカートに追加して、最後にチェックアウトで購入を確定します。
Shopify Plus以外のプランではチェックアウトのコードを編集することができませんが、今回は通常の3プランでもできるカスタマイズについてご紹介します。
カスタマイズできること
全プラン共通でカスタマイズできる内容は以下の通りです。
- 背景カラーや文字の変更
- バナーやロゴの設定
- 会員登録の有効化
- 住所の自動入力
- 多言語対応（アプリが必要）
- チップオプションの追加
- 注文内容やギフトカードを注文後に自動送信
- カゴ落ちの通知
チェックアウトのデザインや入力項目の変更など、簡単な編集が可能です。カスタマイズすべきポイントや編集方法については、後ほどご紹介します。
Shopify Plusのみできるカスタマイズ
Shopify Plusはチェックアウトをコード編集することができます。それによって他のプランではできない以下のことが、できるようになります。
- 氏名のカナ文字入力
- すべての入力項目の配置変更
- 配送時間指定の項目を追加
- Google Tag ManagerやKARTEなどのタグの設置
- 配送先の国によって表示や処理を変更する
コードを編集することで、配置変更や項目の追加だけでなく、チェックアウトの細かな分析が可能になります。
また、越境ECなど海外の顧客に向けて販売する際も、それぞれの国に合わせて表示項目を変更したり、言語対応も20ヶ国語まで可能です。
カスタマイズのポイント
次に、チェックアウトをカスタマイズする際の注意すべきポイントを紹介します。
派手にしない
チェックアウトで重要なことは、入力項目がわかりやすく、スムーズに決済を完了させることです。できるだけ落ち着いた配色で、顧客の注意を逸らさないようにしましょう。
ストアポリシーを入れる
ストアポリシーは購入する際の安心感にも繋がります。返金や配送、取得情報に関するプライバシーポリシーなどを記載したストアポリシーを追加しましょう。
多言語に対応する
越境ECの場合、多言語対応アプリを導入しますが、チェックアウトも翻訳されているか、しっかり確認をしましょう。翻訳の精度などもとても重要なので、必要であれば編集を加えてください。
会員登録の有無
チェックアウトでは、購入する顧客に対して、ショップの会員登録を求めることができます。
そうすることで次回購入する際に顧客情報が自動的に入力され、情報を入力する手間がなくなります。また、会員にギフトカードを送り、リピート率を向上させることも可能になります。
テスト注文で確認する
Shopifyには商品購入を自分で体験してテストするテスト注文機能があります。
ショップを公開する前に必ず行うようにしましょう。チェックアウトでのバグやエラーは大きな機会損失になります。方法は後ほどご紹介します。
チェックアウトのカスタマイズ方法
では、チェックアウトのカスタマイズについて説明します。
チェックアウトのスタイルをカスタマイズする
最初はチェックアウトのスタイルを変更します。
Shopifyの管理画面から「設定 > チェックアウト」をクリックします。
スタイルにある「チェックアウトをカスタマイズ」をクリックすると、現在公開されているテーマのチェックアウト編集画面に移動します。画面左にあるメニュー欄の「テーマ設定を編集する > チェックアウト」をクリックします。
すると以下の画像と同じページが表示されます。
①編集メニュー
編集する項目を選択して、編集を加えます
②プレビュー
実際のチェックアウトのプレビューが表示されます
③デバイスの切り替え
プレビューを「デスクトップ/モバイル」に切り替えて確認することができます
④保存する
編集が完了したら必ず「保存する」をクリックしてください
<編集メニューの項目について>
■バナー
バナーに設定された画像はチェックアウトの画面上部に表示されます。
■ロゴ
ロゴはチェックアウト画面の上部に表示されます。バナーが設定されている場合は、バナー内に表示されます。
■メインエリア
メインエリアとは、プレビュー画面左側にある顧客情報を入力する欄です。背景の色や入力フォームのデザインを変更することができます。
■注文内容
注文内容とは、プレビュー画面右側にあるカートに追加した商品が並ぶ欄です。背景の色を変更することができます。
■フォント / 色
フォントと色は、画面に記載されている文字のフォントデザインや色を変更することができます。できるだけ読みやすい配色にして、入力する内容がわかりやすいようにしましょう。
編集が完了したら最後に「保存する」をクリックします。実際にカスタマイズすると以下のようになります。あまり派手ではない配色にしましょう。
チェックアウトのスタイルが完成したら、Shopifyの管理画面から「設定 > チェックアウト」をクリックして、チェックアウト編集の画面に戻ります。
アカウントの有効化
次は会員登録の有効化を設定します。こちらの機能を追加すると、顧客はチェックアウト時に住所などの情報を入力する必要がなくなります。
また、顧客アカウントを管理することができるので、マーチャントも様々なマーケティング施策を行うことができます。
会員登録は「必須・オプション・無効」の3パターンあります。あなたのショップのコンセプトや、考える施策などに合わせて設定しましょう。会員登録のついて詳しく知りたい方は以下の記事を参考にしてください。
非エンジニア必見！Shopifyで会員登録をカスタマイズする方法
連絡先
お客様の連絡先では、注文後に顧客と連絡を取る手段を選択します。電話番号の場合は、SMSで配送状況を知らせることになります。
オプション
フォームのオプションでは、顧客がチェックアウトで入力する項目を編集することができます。例えば、配送業者が配送するために顧客の電話番号が必要な場合は、電話番号を必須項目にしてください。
チップオプションの設定
チェックアウト時に購入した商品や送料のほかにチップを追加することができます。
日本ではあまり馴染みがないですが、顧客は購入金額に対して○%のチップを払うことができます。最大3つのオプションを用意することができ、チップを払うと選択した顧客にだけ表示することも可能です。
注文処理
「お客様のチェックアウト時」の項目は、両方ともチェックボックスにチェックを入れましょう。そうすることで、顧客がチェックアウト時に入力する住所が自動で入力されます。
「注文の支払い後」では、どのように注文を処理するかを選択します。
「注文の項目を自動で発送する」は、デジタル商品やフルフィルメントサービスを使用しているなど、自分で配送処理をしない場合にチェックを入れます。
「注文のギフトカードのみを自動で発送する」は、ギフトカードのみ自動で配送されます。
デジタル商品ではなく、自分で商品の配送を行う場合は、「注文の項目を自動でフルフィルメントしない」を選択し、手動で配送処理を行います。
注文の処理が完了したら、注文内容を自動的にアーカイブすることができます。もし手動でアーカイブしたい場合は、「注文を自動でアーカイブする」からチェックを外してください。
Eメールマーケティング
Eメールマーケティングにチェックを入れると、顧客はチェックアウト時にブランドのメール配信を受け取る登録ができます。
会員登録だと顧客は少しハードルを感じるかもしれませんが、顧客のメールアドレスを管理できると、新商品や限定商品のプロモーションだけでなく、ギフトカードのプレゼントなど、あらゆる施策が可能になります。
カゴ落ち
カゴ落ちした顧客に対して、カゴ落ちを知らせるメールを送ることができます。対象者とメールを送るタイミングを選択します。
また、「メールアドレスをカスタマイズ」をクリックすると、送るカゴ落ちメールの内容を編集することができます。
メールの内容は、コードで書かれていますが、すでに入力されている内容があるので、簡単に編集することができます。
また、カゴ落ちに関して詳しく知りたい方は、以下の記事を参考にしてください。
ストアポリシーの追加
ストアポリシーに入力する内容は「返金ポリシー」「プライバシーポリシー」「利用規約」「配送ポリシー」「特定商取引法に基づく表記」の5つです。
Shopifyの管理画面から「設定 > 法的関連」をクリックし、編集ページで5つのポリシーを入力しましょう。
「特定商取引法に関する表記」以外のテンプレートは英語版しかなく、自分自身で作成することはとても大変です。
ですが法律文書ジェネレーター「KIYAC」を活用すると、これらのポリシーページを簡単に作成することができます。
テスト注文で確認する
最後にテスト注文を行い、不備やエラーなどがないか確かめます。ここが最も重要なので、必ずショップの公開前に行いましょう。
Shopifyの管理画面から「設定 > 決済」をクリックします。Shopify Paymentsの横にある「管理する」をクリックし、画面下部にある「テストモードを使用する」にチェックを入れて保存します。これでテストモードが実行されています。
次に、オンラインストアのプレビューを開き、実際に商品を購入します。決済情報は以下のどれかを入力してください。
| カード名 | カード番号 | 有効期限 | CVC |
|---|---|---|---|
| Visa | 4242 4242 4242 4242 | 将来の日付 | 任意の3桁 |
| Mastercard | 5555 5555 5555 4444 | 将来の日付 | 任意の3桁 |
| American Express | 3782 8224 6310 0005 | 将来の日付 | 任意の3桁 |
決済が完了したら、チェックアウトで入力したメールアドレスに通知が届くので確認しましょう。次に、Shopifyの管理画面に戻り、「注文管理」をクリックします。
注文管理画面で、購入者の情報や配送の状況を確認することができます。「発送済みとしてマークする」をクリックし、追跡番号など必要な情報を入力したら「アイテムをフルフィルメントする」をクリックして完了です。
テスト注文をして問題がなければ、チェックアウトのカスタマイズもこれで完了です。テスト注文に関してより詳しく知りたい方は、以下の記事を参考にしてください。
たった4分で大きな損失を防ぐ！Shopifyでテスト注文をする方法
動的チェックアウトボタンについて
動的チェックアウトボタンやエクスプレスチェックアウト(PayPal)を活用すると、ユーザーは顧客情報の入力することなく、数クリックで商品を購入することができます。
そうすることで、ユーザーはカート画面をスキップして、商品ページから直接決済を行うことができます。
Shopifyのチェックアウトで使用できる動的チェックアウトボタンは、Shop Pay、Apple Pay、Google Pay、Amazon Pay、PayPalなどです。
実際に導入する場合は、Shopifyの管理画面から「設定 > 決済」をクリックし、各決済サービスとアカウント連携を行う必要があります。
連携が完了したら、「オンラインストア > テーマ > カスタマイズ」をクリックし、テーマ編集画面に移動します。画面上部にあるドロップダウンメニューで「商品ページ」を選択します。
メニューの「商品ページ」をクリックし、「動的チェックアウトボタンを表示する」にチェックを入れると、カートの下にチェックアウトボタンが表示されます。
「保存する」をクリックして完了です。
また、同様に「おすすめ商品」のセクションでも動的チェックアウトボタンを表示することができます。
動的チェックアウトボタンは、Amazon PayやPayPalといった決済手段を持っている顧客に対しての機能になります。Shop Payのようにあまり馴染みのないものもあるので、顧客が混乱しないかなどの配慮も必要になります。
ですが利用できるととても便利なので、「エクスプレスチェックアウト」のところの文字を編集するなど工夫して、導入を検討してみてください。
【最後に】必ずショップ公開前にチェックする
チェックアウトページは顧客が商品をカートに入れ、最後に決済するページなので、ここで決済がうまくいかず離脱してしまうのは、とてももったいないです。
ショップを公開する前に、テスト注文でわかりづらい点やエラーがないか、必ず確認しましょう。
また、チェックアウトをよりカスタマイズしたい方や、細かく分析したい方はShopify Plusの利用も検討してみてください。
