Shopifyでは、すべてのマーチャントに標準のチェックアウトプロセスが提供されています。これは迅速かつ安全に動作し、特別な設定は不要です。しかし、ストアのデザインに合わせてチェックアウトを調整したり、摩擦を解消したり、特典を追加したりしたい場合もあるでしょう。
すべてのECプラットフォームには、注文へのメモやギフトメッセージの追加など、主要なソリューション（WooCommerce、Squarespace、Ecwidなど）であれば標準で備わっているカスタムチェックアウト項目があります。しかし、Shopifyはカスタム開発なしでチェックアウトを柔軟に変更できる点で、おそらく最も優れています。
本記事では、Shopifyでどのようなチェックアウトのカスタマイズが可能か、そしてその実装方法について解説します。
Shopifyのチェックアウトはどこまでカスタマイズ可能か？
Shopifyストアのチェックアウトページは、どれもほぼ同じ構成です。ページは左右に分かれており、左側で顧客が配送先や支払い情報を入力し、右側に注文の概要が表示されます。
この構造やチェックアウトのロジック自体を変更することはできません。可能なのは、ページの外観変更や項目の追加です。しかし、わずかな見た目の変更であっても、チェックアウト体験に大きな影響を与え、コンバージョン率を向上させることができます。
チェックアウトの構造を変更したい場合はどうすればよいでしょうか？
❗ 現在、チェックアウトのロジックに影響を与えられるのはShopify Plusプランのマーチャントのみで、checkout.liquidテンプレートを編集する必要があります。しかし、これにはリスクが伴い、Shopify側も推奨していません。チェックアウトのコードを編集すると、以下のようなリスクが生じます。
- Webサイトの動作に不具合が生じ、顧客が注文を完了できなくなる可能性があります。
- サードパーティ製コードの統合は複雑で、多大な労力を要します。
- 追加されたサードパーティ製JavaScriptが機密データにアクセスし、セキュリティ上の問題を引き起こす可能性があります。
これに対処するため、Shopifyは開発者がチェックアウトカスタマイズアプリを作成できるチェックアウト拡張機能アーキテクチャを構築しています。現在でも様々なShopifyアプリを使用して多くの調整が可能ですが、チェックアウト拡張機能の登場により、さらに多くのカスタマイズ機会が期待できます。Shopifyが提供するUIコンポーネントとブランディングAPIに基づき、これらの拡張機能は既存のチェックアウト要素の拡張や置き換え、さらには全く新しい機能の追加を可能にします。
ShopifyはShopify Editions Winter 2023において、ワンページチェックアウトの導入を発表しました。
Shopifyにおけるチェックアウトカスタマイズの種類
本記事では、利用可能な2つの主要なチェックアウトカスタマイズについて解説します。1つ目はご自身で簡単に実装できるテーマの変更、2つ目はShopifyアプリを使用して組み込む追加機能です。
1. Shopifyチェックアウトの非常に簡単な視覚的カスタマイズ
まずは、外部の助けを借りずにテーマエディターで何ができるかを見ていきましょう。現在のテーマの横にある「カスタマイズ」をクリックし、上部メニューで「チェックアウト」を選択します。次に、左側の「テーマ設定」内にある「チェックアウト」セクションへ進みます。
ここでは、多くのシンプルなチェックアウトカスタマイズが可能です。
- チェックアウトページにロゴを追加しましょう。ロゴは顧客がページを移動しても表示され、一貫したブランドイメージを構築します。チェックアウトページにストア名を表示するだけでなく、ロゴを掲載するようにしてください。
- ページセクション、テキスト、リンク、ボタンの色を変更できます。デフォルトの色のままにするのではなく、ブランドの要素に合わせた色を設定しましょう。メインページコンテンツや注文概要に背景画像を設定することも可能ですが、情報の視認性が低下するため、あまり推奨されません。
Shopifyでは複数のフォントも用意されています。ブランドイメージに合うものを選んで、チェックアウト画面をカスタマイズしましょう。
- ブランドバナーや関連画像などをヘッダーとして追加しましょう。小さな要素ですが、画像ヘッダーがあるだけでチェックアウトページの印象は大きく変わります。
Shopify管理画面の「チェックアウトとアカウント」セクションから、以下の項目も変更可能です：
- マーケティング登録の編集。メールやSMSの登録項目を追加したり、デフォルトの「ニュースや特典に関するメールを受け取る」という文言を変更したりできます。文言を変更するには、「チェックボックスのラベルをカスタマイズ」をクリックし、各フィールドに任意のフレーズを入力してください。
ただし、これらのフィールドに特別なデザインを施して目立たせたり、表示場所を細かく制御したりしたい場合、デフォルト設定では不十分です。その場合は、Shopifyアプリやカスタムコーディングを利用して登録ボックスをカスタマイズしましょう。
- 顧客のログインオプションと必須入力フィールドの設定。管理画面の設定では、ゲストチェックアウトの許可やMultipassの設定など、注文方法を決定できます。さらに、住所の2行目を含めるか除外するかなど、どの入力フィールドを必須にし、どれを任意にするかを調整することも可能です。
- チップ機能の有効化。ビジネスの性質上適している場合は、チェックアウト時にチップを有効にすることで、顧客が感謝の気持ちを伝えられるようにできます。
2. アプリやその他のツールによるShopifyチェックアウトのカスタマイズ
さまざまなアプリを活用することで、チェックアウトプロセスを完璧なものにし、コンバージョンを向上させることができます。活用例をいくつか紹介します：
- デフォルトのパンくずリストをプログレスバーに置き換える。チェックアウト用に自動生成されるパンくずリストは小さすぎて目立ちません。注文完了までにあと何ステップあるのかを顧客に明確に伝えたい場合は、プログレスバーを追加するのが効果的です。
- 送料無料の条件を表示する。送料無料の条件は、購入プロセスの各段階で繰り返し表示するのが効果的です。ストアのヘッダーに追加したり、カートページやカートドロワーで強調したりするほか、チェックアウト画面（送料無料の条件を満たしていない場合のみ）にも表示させることができます。
- 購入特典として無料ギフトを追加する。「Gift Box」のような無料ギフトを提供できるアプリを使用すれば、指定した条件（購入金額など）を満たした際に、注文概要へ自動的にギフトが表示されます。
- アップセルおよびクロスセル商品の提案。 アップセルの手法は、チェックアウトを含むファネルのさまざまな段階で有効です。「Candy Rack」を使えば、サンクスページで事後購入オファーを追加できます。チェックアウト時やチェックアウト後のアップセル手法やソリューションについて詳しく知りたい方は、おすすめのShopifyアップセルアプリのまとめ記事をご覧ください。
- チェックアウトタイマーの追加。緊急性は、顧客の購入を後押しする強力な動機付けになります。カウントダウンタイマーを表示して、商品が人気であることを伝えましょう。
- メールやSMSの更新情報に顧客が登録できるようにしましょう。 この機能はShopifyの管理画面設定でも利用可能ですが（前述の通り）、アプリを活用すれば、登録オプションの表示方法をより柔軟にカスタマイズできます。
マーケティングキャンペーン用や配送状況の更新用など、複数の登録フォームを組み込むことができます。後者については、AfterShipのようなアプリが役立ちます。
- 信頼バッジを追加しましょう。 Trust Meのようなアプリを使えば、対応している決済方法やその他の信頼性を示すバッジを簡単に表示できます。
- 連絡先や役立つ情報を表示しましょう。 空白のままにするのではなく、商品のメリットを顧客に思い出してもらうのはいかがでしょうか。注文概要の下に特別なセクションを作成できます：
また、連絡先情報を表示しておくことも有効です。顧客が抱える疑問をすぐに解決できるため、カゴ落ち率の低下につながります。
- 顧客がコメントを残せるようにしましょう。 Apps like Checkout Commentsのようなアプリを使えば、チェックアウト画面に項目を追加し、フィードバックを求めたり、パーソナライズの要望を受け付けたりすることが可能です。
- 注文概要を追従（スティッキー）させましょう。 配送先や支払い情報を入力する際、注文内容が常に目に入るように、スクロールに合わせて動くスティッキーな注文概要を利用するのがおすすめです。
- Create a single-page checkout. There are third-party tools like Checkify that will help you design a checkout experience that includes all the steps on a single page.
今回ご紹介した機能が、魅力的なチェックアウト画面を作るヒントになれば幸いです。その他のヒントについては、Shopifyチェックアウト最適化ガイドをご覧ください。
