eコマースの世界において、チェックアウトページは訪問者が大切な顧客へと変わる重要な分岐点です。Shopifyチェックアウトページを効果的にカスタマイズする方法を理解することは、オンラインストアを完璧に仕上げようとするマーチャントにとって大きな転換点となります。この記事では、Shopifyチェックアウトページに対する最も実践的で広く採用されているカスタマイズ方法について、包括的なガイドとしてご紹介します。さらに、カスタマイズされたShopifyチェックアウトページの重要性についても掘り下げ、マーチャントがオンラインビジネスのこの重要な部分に潜むチャンスを十分に理解できるようにします。
1. デフォルトのShopifyチェックアウトページ
現在、デフォルトのShopifyチェックアウトページには、ワンページチェックアウトとマルチページチェックアウト（3ページ構成）という2種類のレイアウトがあります。なお、これらのレイアウトを切り替えられるのはShopify Plusマーチャントのみの特典です。Plusマーチャントは、Shopifyチェックアウトページを自由にフルカスタマイズできる点も、独自のメリットとなっています。Shopify Plus以外のマーチャントは、最近では自動的にワンページチェックアウトへと誘導されるようになりました。
デフォルトでは、Shopifyチェックアウトページはカート、配送情報、支払い、注文確認、注文完了（Thank Youページ）という一連のセクションで構成されています。ワンページチェックアウトでは、これらのセクションがすべて1つのページにまとめられているのに対し、マルチページチェックアウトでは各セクションが別々のページに割り当てられています。Shopifyチェックアウトページを完全にカスタマイズし、さまざまなレイアウトを試すには、Shopify Plusにアップグレードすることで、チェックアウト時の顧客体験をより柔軟に調整できるようになります。
デフォルトのShopifyチェックアウトページは以下のような見た目です（ワンページチェックアウトと3ページチェックアウト）：
2. マーチャントがShopifyチェックアウトページをカスタマイズすべき理由
チェックアウトページは、訪問者が購入を完了させることで実際に顧客へと変わる場所です。販売のループを完結させるその役割は、いくら強調してもし過ぎることはありません。
1つのデフォルトチェックアウトページだけで、Shopifyエコシステム内の数百万にも及ぶストアすべてに最適に機能することはできません。
チェックアウトページからは、次のような課題とチャンスが生まれます：
- かご落ち。 さまざまな理由により、顧客が購入を完了せずに離脱してしまいます。
- ブランドの一貫性がブランドロイヤリティにつながる： チェックアウト体験は、顧客がブランドに対して抱く全体的な印象を形作ります。それは（リピーターを増やすためのマーケティング活動を除けば）ブランドと顧客との、ほぼ最後の接点でもあります。スムーズなチェックアウトプロセスと強い印象は、顧客満足度とロイヤリティの向上につながります。eコマースの競争がますます激化する中、顧客にブランドを覚えてもらうことは非常に重要です。
- 平均注文額の向上： アップセルとクロスセルは、もはやeコマースにおいて目新しい手法ではありません。マーチャントはストア内のさまざまな場所にアップセルやクロスセルを取り入れることができ、チェックアウトページもその例外ではありません。
- Shopifyデフォルトチェックアウトの制約による、注文管理プロセスの複雑化： 場合によっては、スムーズな注文管理プロセスを実現するために、ストアオーナーがチェックアウトページ上で特別な必須情報を求める必要があります。
3. Shopifyチェックアウトページをカスタマイズする方法
チェックアウトページをカスタマイズする手順に入る前に、Shopify Plusマーチャントとその他のShopifyプランとの間で、カスタマイズ機能にどのような違いがあるのかを理解しておくことが重要です。
3.1 Shopify Basicおよびそれ以上のプランのマーチャントの場合
Shopify Basicおよびそれ以上のプランのマーチャントは、Shopify Partnersエコシステムのサードパーティアプリを導入することで、チェックアウトページをカスタマイズできます。これらのアプリを使えば、基本的な要素の一部、支払い方法、配送オプションを柔軟に変更できます。
手順の概要は以下の通りです：
ステップ1： Shopify App Storeを確認し、自社のビジネスニーズに合ったカスタマイズアプリを探します。
ステップ2： 選んだアプリ内で、支払い方法または配送方法をカスタマイズします。
ステップ3： カスタマイズの設定と有効化を行います（支払い方法・配送オプションのどちらのカスタマイズも手順は同じです）
- カスタマイズアプリをインストールしたら、Shopify管理画面に移動します：
- Shopify管理画面 > 設定 > 決済
- 「決済」セクションで「管理」をクリックし、カスタマイズを追加して設定を行い、「有効化」をクリックします。
3.2 Shopify Plusマーチャントの場合
チェックアウトのカスタマイズは、Shopify Plusマーチャントにとって最も特別なメリットの一つです。これはあらゆる要素に及び、ブランディング、フィールド、アップセルやクロスセルの拡張機能、レビューの表示、信頼バッジなど、さまざまなカスタマイズが可能です。Shopify Plusマーチャントがチェックアウトページで利用できる独自のカスタマイズオプションを検討していく中で、専門知識の必要性が明らかになってきます。そこで力を発揮するのがShopify Plusエージェンシーです。フルサービスのShopify Plusエージェンシーを活用することで、企業は高度なカスタマイズ機能を利用でき、チェックアウトプロセスをブランドアイデンティティに合わせるだけでなく、コンバージョン率向上に向けて顧客体験を最適化することができます。
マーチャントはCheckout Extensibilityを通じて、チェックアウトカスタマイズアプリやCheckout Editorを利用しながらチェックアウトページをカスタマイズできます。現時点では、Checkout.liquidを使ってチェックアウトページにコードベースの編集を加えることも可能ですが、Checkout.liquidは2024年8月以降サポートが終了する点に注意が必要です。
そのため、今後のカスタマイズにはCheckout.liquidを使用しないことを強くおすすめします。
チェックアウトカスタマイズアプリを使う場合：
- カスタマイズのニーズに応じて、Shopify App Storeから適切なアプリを選びます。
- 選んだアプリ内ですべてのカスタマイズを行います。
Checkout Editorを使う場合：
- Shopify管理画面からアクセスします：Shopify管理画面 > 設定 > チェックアウト
- 「チェックアウト」セクションで「カスタマイズ」をクリックすると、Checkout Editorに移動します。
4. 目的別に見るShopifyチェックアウトページのカスタマイズ
4.1 ブランディングを強化する
マーチャントはShopifyチェックアウトページをカスタマイズし、細部に至るまで自社のブランドスタイルに合わせることができます。事業成長に直接結びつく決定的な要素ではないものの、このカスタマイズはストアを訪れる顧客に好印象を残すことに貢献します。
例として、上記の画像にあるようなカスタムShopifyチェックアウトとデフォルト版との違いを見てみましょう。競争が日々激化するeコマースの世界では、印象に残る独自の体験を生み出すことが、顧客維持とブランドロイヤリティの向上につながります。タイポグラフィ、色、余白、ボーダーに加え、ボタン、ヘッダー、フォーム、favicon（ファビコン）といったさまざまな要素までカスタマイズできるため、企業は自社ならではのブランドの世界観に合わせてチェックアウトUIを仕上げることができます。
Clay Imports：ブランドカラーとロゴでShopifyチェックアウトページをカスタマイズ。
4.2 信頼を築く
購入プロセス全体を通じて信頼を築くことは、顧客の離脱を防ぎ、かご落ち率を減らす上で非常に重要です。これは、以下のような拡張機能によって実現できます：
信頼バッジとセキュリティアイコン
マーチャントは、支払い方法やストアの保証ポリシー、SSLなどの重要な証明書を表す信頼バッジを戦略的に表示できます。このカスタマイズは、顧客に対して視覚的な安心感を与え、取引プロセスの安全性と信頼性を示す役割を果たします。特に支払いに関連するセクションの近くにこれらのバッジを目立つ形で配置することで、安全な取引へのコミットメントがより一層強調されます。
こうした信頼の指標の見せ方をカスタマイズすることで、セキュリティへのこだわりを伝えられるだけでなく、顧客が安心して購入手続きを進められるような安心感の醸成にもつながります。
チェックアウトページに顧客の声を表示する
これは、購入プロセスにおける信頼と安心感を築くための強力な戦略です。多くの人がすでに同じ商品を購入していることを見込み客が確認できるソーシャルプルーフを活用することで、購買意思決定における確信を後押しします。
こうした拡張機能を取り入れることで、マーチャントはよりパーソナライズされた魅力的なチェックアウト体験を作り出すことができます。これらの顧客の声を、商品詳細と並べたり支払いセクションの近くに戦略的に配置したりすることで、顧客に安心感を与えられます。
このようにShopifyチェックアウトページをカスタマイズすることは、ポジティブなショッピング体験に貢献するだけでなく、顧客が注文を完了する可能性を高めることにもつながります。顧客の声は、これから購入しようとしている商品について、他の人も良い体験をしていることを伝えてくれます。
Valanteは、チェックアウトページに顧客レビューと、サードパーティサイトTrustpilotのアイコンを表示しています。
配送ポリシーや返品ポリシーなど、規約の透明性を確保する
配送や返品に関する情報を透明にし、簡単にアクセスできるようにすることの重要性に取り組むことは、顧客の信頼を築く上で非常に重要です。顧客は購入プロセスにおける分かりやすさを重視しており、配送・返品ポリシーが不明瞭だと、不満やかご落ちにつながる可能性があります。
明確な期待値を設定するために、企業はわかりやすい言葉やビジュアルを使って、チェックアウトページ上のポリシーの見せ方をカスタマイズすべきです。この情報を目立つ位置に配置することで、視認性が高まり、購入プロセス中に予期せぬ驚きが生じる可能性を減らせます。追加料金が発生する可能性がある場合は事前に詳しく説明し、顧客に寄り添った言葉遣いを用いることで、信頼と安心感を育むことができます。効果的で透明性の高いポリシーを実践している企業の実例は、顧客満足度やロイヤリティへのポジティブな影響を示す参考になります。一貫して透明性のある情報を提供することは信頼を築き、購入の判断において十分な情報を得て安心していると感じられるストアへ、顧客がまた戻ってきたいと思うきっかけになります。
5. アップセルとクロスセル
アップセルとクロスセルは、オンラインストア内のさまざまな場所に取り入れることができます。マーチャントはShopifyチェックアウトページを自由にカスタマイズし、おすすめ商品を顧客に提案する拡張機能を組み込むことができます。しっかりとした戦略のもとで徹底して実施すれば、平均注文額の向上につながります。
配置場所は、注文確認セクションや配送情報・支払いのセクションの間など、チェックアウトページ上のどこにでも設定できます。
5.1 アップセル・クロスセルを成功させるための戦略
このストアPurest Coは、カート内の商品よりもさらに高価格帯のおすすめ商品を提案しています。
- 欲張りすぎないこと！ チェックアウトページでアップセルとクロスセルのどちらを選ぶにしても、顧客のカート内商品に基づいた商品を提案するよう注意しましょう。カートの合計金額を大幅に引き上げてしまうような商品を提案するのは避けるべきです。もちろん、注文額を上げられればその分収益も増えます。しかし多くの場合、当初想定していたよりも支払額が大きくなるほど、オファーの拒否率も高くなります。顧客に提案する商品は慎重に選びましょう。
- できる限りパーソナライズする： アップセルやクロスセルのオファーをパーソナライズするには、マーチャントが提案商品のトリガー設定に時間をかけて計画する必要があります。マーチャント側の手間は増えますが、オファーがパーソナライズされているほど、顧客に受け入れられる可能性は高くなります。
- 数多くのテストと失敗を覚悟しておく： アップセル・クロスセル拡張機能のさまざまな要素についてA/Bテストを行い、最も効果的なプランを見つけましょう。提案する商品、トリガー設定、配置場所など、マーチャントがテストすべき項目は数多くあります。
6. 複雑な要件に対応するカスタムフィールド
多くの場合、マーチャントは自社の業務プロセスや顧客の購入体験をスムーズにするために、チェックアウトページに対してより複雑な要件を必要とします。
その理由を理解するために、以下の具体的な事例を見てみましょう。
事例：配送の詳細情報を収集するためにShopifyチェックアウトページをカスタマイズ
enGoldは、重量があり大型の家具を販売するブランドです。同社は、注文に対して階段の段数に応じた追加配送料が発生するかどうかを判断するために、顧客からの情報を必要としていました。たとえ1〜2段の追加であっても、配送料は高くなってしまうためです。そこでenGoldのチームは、チェックアウトページに、顧客が配送の詳細を選択できるカスタムフィールドを設けたいと考えました。しかし、Shopifyのデフォルトチェックアウトページではこれを実現できません。カスタムフィールドがなければ、enGoldは配送指示の詳細を収集するために顧客一人ひとりに個別に連絡を取り、配送料と注文合計金額を再計算しなければなりません。この場合、顧客はストアからの追加連絡を待って最終的な合計金額を知る必要があるため、購入体験にも悪影響が及んでしまいます。
EnGoldは、配送方法に関する追加情報を収集するためのカスタムフィールドを追加しました。
Qikifyのお客様であるEnGoldが、カスタムチェックアウトページによってコストニュートラルに近づいた事例について詳しくご覧ください。
マーチャントは、各ストアの販売戦略や事業形態に応じたさまざまなニーズに合わせて、チェックアウトページにカスタムフィールドを追加できます。チェックアウトページのカスタムフィールドのよくある活用例としては、ギフトメッセージ、配送指示、日付選択といった顧客情報の収集が挙げられます。
7. カスタマイズによるコンバージョン率の向上
チェックアウトページの信頼性を高める拡張機能に加えて、コンバージョン率を向上させるために組み込める拡張機能も存在します。マーチャントはカートのカウントダウンバナーを導入することで緊急性を演出し、顧客に早めの注文完了を促し、かご落ちのリスクを最小限に抑えることができます。このバナーは、配送に関する通知や重要な注意事項を顧客に伝えるコミュニケーションツールとしても活用できます。また、プログレスバーを追加し、プロモーションや割引オファーの達成状況を顧客に伝えるというカスタマイズも、よく利用される手法の一つです。
8. 摩擦を減らすには
チェックアウトページの摩擦を減らすことで、マーチャントは自社ストアのかご落ち率を改善できます。これまでご紹介した、チェックアウトに拡張機能を追加するカスタマイズとは別に、マーチャントはShopifyチェックアウトページをカスタマイズし、情報や手順を減らすことで摩擦を軽減することもできます。マーチャントはカスタムフィールドを追加する一方で、不要なフィールドを削減してチェックアウトページを簡素化することも可能です。さらに、カートセクションをカスタマイズし、顧客がカートページに戻ることなくチェックアウトページ上で直接カート内商品を更新できるようにすることもできます。
まとめ
チェックアウトプロセスを改善することは、重要な購買段階においてポジティブな顧客体験を実現する上で欠かせません。ボタンの色や配置といった細かな要素でさえ、顧客の購買行動に大きな影響を与え、購入完了を後押しすることがあります。だからこそ、マーチャントはShopifyチェックアウトページを正しい方法でカスタマイズする方法を知っておく必要があります。ぜひ試してみてください。チェックアウトオプションを工夫して実装することで、サイト全体のレベルを引き上げ、購入数の増加や全体的な改善につなげられます。コーディング不要のqikify Checkout Customizerを使って、今すぐShopifyチェックアウトページのカスタマイズを始め、売上アップを目指しましょう！
