ECの世界において、チェックアウトページは訪問者が大切なお客様へと変わる重要な分岐点です。Shopifyのチェックアウトページを効果的にカスタマイズする方法を理解することは、オンラインストアを理想の形に仕上げたいマーチャントにとって大きな転機になります。本記事は、Shopifyのチェックアウトページで最も実用的で広く使われているカスタマイズについての知見をまとめた総合ガイドです。さらに、チェックアウトページを自社に合わせてカスタマイズすることの重要性を掘り下げ、オンラインビジネスのこの重要な部分に眠るチャンスをマーチャントが十分に理解できるようにします。
1. Shopifyの標準チェックアウトページ
現在、Shopifyの標準チェックアウトページには2つのレイアウトがあります。1ページチェックアウトと、複数ページ（3ページ）のチェックアウトです。なお、これらのレイアウトを切り替えられるのはShopify Plusのマーチャントだけです。Plusのマーチャントは、特典としてShopifyのチェックアウトページを完全にカスタマイズすることもできます。Shopify Plus以外のマーチャントは、最近自動的に1ページチェックアウトに移行されました。
Shopifyの標準チェックアウトページは、カート、配送情報、支払い、注文確認、注文完了／サンクスページという順番のセクションで構成されています。1ページチェックアウトではこれらのセクションがすべて1つのページにまとめられ、複数ページのチェックアウトでは各セクションが別々のページに分かれています。Shopifyのチェックアウトページを完全にカスタマイズし、さまざまなレイアウトを試すには、Shopify Plusにアップグレードすることで、チェックアウト時のお客様の体験をより柔軟に調整できます。
Shopifyの標準チェックアウトページは次のようになっています（1ページチェックアウトと3ページチェックアウト）。
2. なぜマーチャントはShopifyのチェックアウトページをカスタマイズすべきなのでしょうか？
チェックアウトページは、訪問者が購入を完了して実際にお客様になる場所です。販売のサイクルを締めくくるその役割は、いくら強調してもしすぎることはありません。
1つの標準チェックアウトページが、Shopifyエコシステムの何百万ものストアすべてにとって最適に機能することはありません。
チェックアウトページからは、次のような課題とチャンスが生まれます。
- かご落ち。さまざまな理由で、お客様が購入を完了せずに離れてしまいます。
- ブランドの一貫性がブランドロイヤルティにつながる：チェックアウトの体験は、お客様がブランドに対して抱く全体的な印象を形づくります。チェックアウトは、ブランドとお客様の最後の接点とも言えます（リピーターを増やすためのマーケティング活動を除けば）。スムーズなチェックアウトのプロセスと強い印象は、顧客満足度とロイヤルティを高めます。ECの競争が激しさを増す中、お客様にブランドを覚えてもらうことは欠かせません。
- 客単価を上げる：アップセルとクロスセルは、ECではもはや新しい手法ではありません。マーチャントはストアのさまざまな場所にアップセルやクロスセルを組み込めますが、チェックアウトページも例外ではありません。
- Shopifyの標準チェックアウトの制約による、注文管理の複雑さ：場合によっては、注文管理をスムーズに進めるために、チェックアウトページで特別な必須情報が必要になることがあります。
3. Shopifyのチェックアウトページをカスタマイズする方法
チェックアウトページをカスタマイズする手順に入る前に、Shopify Plusのマーチャントとそのほかのプランのマーチャントで、カスタマイズできる範囲が異なることを理解しておくことが大切です。
3.1 Basicプラン以上のShopifyマーチャントの場合
Shopify Basicプラン以上のマーチャントは、Shopify Partnerエコシステムのサードパーティ製アプリを導入することで、チェックアウトページをカスタマイズできます。これらのアプリを使えば、一部の基本要素、決済方法、配送オプションを柔軟に変更できます。
手順の概要は次のとおりです。
ステップ1：Shopify App Storeで、自社のニーズに合ったカスタマイズアプリを探します。
ステップ2：選んだアプリで、決済方法や配送方法をカスタマイズします。
ステップ3：カスタマイズを設定して有効にします（決済方法と配送オプションのカスタマイズの手順は同じです）
- カスタマイズアプリをインストールしたら、Shopifyの管理画面に移動します。
- Shopifyの管理画面 > 設定 > 決済
- 「決済」セクションで「管理」をクリックし、カスタマイズを追加・設定してから「有効にする」をクリックします。
3.2 Shopify Plusのマーチャントの場合
チェックアウトのカスタマイズは、Shopify Plusのマーチャントだけの特典の中でも最たるものです。あらゆる要素を超えて、ブランディング、入力項目、アップセルやクロスセルの拡張機能、レビューの表示、信頼バッジなどをカスタマイズできます。Shopify Plusのマーチャントがチェックアウトページで使える独自のカスタマイズを検討していくと、専門的な知見の必要性が明らかになってきます。そこで大きな違いを生むのがShopify Plus代理店です。フルサービスのShopify Plus代理店を活用すれば、高度なカスタマイズ機能を取り入れ、チェックアウトのプロセスをブランドのアイデンティティに合わせるだけでなく、顧客体験を最適化してコンバージョン率を高めることができます。
マーチャントは、チェックアウトのカスタマイズアプリやチェックアウトエディターを使い、Checkout Extensibilityを通じてチェックアウトページをカスタマイズできます。現在はCheckout.liquidを使ってコードでチェックアウトページを編集することもできますが、Checkout.liquidは2024年8月以降サポートされなくなる点に注意が必要です。
そのため、今後のカスタマイズにCheckout.liquidを使うことは強くおすすめしません。
チェックアウトのカスタマイズアプリを使う場合：
- カスタマイズのニーズに合わせて、Shopify App Storeから適切なアプリを選びます。
- すべてのカスタマイズを、選んだアプリの中で行います。
チェックアウトエディターを使う場合：
- Shopifyの管理画面からアクセスします：Shopifyの管理画面 > 設定 > チェックアウト
- 「チェックアウト」セクションで「カスタマイズ」をクリックし、チェックアウトエディターに入ります。
4. 目的別のShopifyチェックアウトページのカスタマイズ
4.1 ブランドの強化
マーチャントはShopifyのチェックアウトページをカスタマイズし、細部に至るまでブランドのスタイルに合わせることができます。ビジネスの成長に直結する決定的な要因ではありませんが、このカスタマイズは、ストアを訪れたお客様に長く残る良い印象を与えることに貢献します。
たとえば、上の画像のように、カスタマイズしたShopifyのチェックアウトと標準版の違いを考えてみてください。日々競争が激しくなるECの世界では、記憶に残る独自の印象を与えることが、顧客の維持とブランドロイヤルティにつながります。フォント、色、余白、枠線、そしてボタン、ヘッダー、フォーム、ファビコンなどのさまざまな要素までカスタマイズできるため、チェックアウトの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. カスタマイズでコンバージョン率を高める
チェックアウトページで信頼を高める拡張機能のほかにも、コンバージョン率を高めるために組み込める拡張機能があります。カートのカウントダウンバナーを導入すれば、緊急性を演出してお客様にすぐ注文を確定するよう促し、かご落ちのリスクを最小限に抑えられます。このバナーは、配送に関するお知らせや重要な注意事項をお客様に伝えるツールとしても使えます。よく使われるカスタマイズとしてはほかに、進捗バーを追加して、キャンペーンや割引の適用までの進み具合をお客様に知らせる方法もあります。
あわせて読みたい：チェックアウトページの事例：成約につながる6つのパターン
8. 摩擦を減らす
チェックアウトページの摩擦を減らすことで、マーチャントはストアのかご落ち率を改善できます。チェックアウトに拡張機能を追加する前述のカスタマイズのほかに、Shopifyのチェックアウトページをカスタマイズして、入力情報やステップを減らし、そこから摩擦を減らすこともできます。カスタム項目を追加する一方で、不要な項目を減らしてチェックアウトページをすっきりさせることもできます。さらに、カートのセクションをカスタマイズすれば、お客様はカートページに戻らなくても、チェックアウトページで直接カート内の商品を変更できます。
まとめ
チェックアウトのプロセスを改善することは、買い物の重要な段階で良い顧客体験を提供するために欠かせません。ボタンの色や配置といった細かな要素でさえ、お客様に大きな影響を与え、購入の確定を後押しします。だからこそ、マーチャントはShopifyのチェックアウトページを正しい方法でカスタマイズする方法を知っておく必要があります。ぜひ試してみてください。チェックアウトのオプションをよく考えて導入すれば、サイトの価値が高まり、購入の増加と全体的な改善につながります。Qikify Checkout Customizerなら、プログラミングのスキルは不要です。今日からShopifyのチェックアウトページをカスタマイズして、売上を伸ばしましょう！
