【Shopify】チェックアウトページの制作・構築、カスタマイズ方法や重要なポイントを解説

Shopifyでは、チェックアウトページの文字フォントや色、表示項目などの設定を変更することができます。ですが、通常プランでできる変更には制限があります。

たとえば、レイアウト等を変更などは、Shopify Plusでは自由にカスタマイズできますが、Plus以外のプランではできないといったことなどです。

そこで、ここでは、Shopifyのチェックアウトページの構築方法や、成功するカスタマイズ方法やポイントなどをまとめました。ショップ運営の肝ともいえるチェックアウトページでお客様を離脱させたくない人は、是非この続きをお読みください。

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

チェックアウトページとは

チェックアウトページとは、支払いやお届け先情報を入力する画面のことで、商品をカート入れた次のページから注文完了ページまでの、いわゆる『決済ページ』のこと。

お客様は、カートに商品を追加したあとにチェックアウトページに進み、配送情報や決済の詳細などを入力してから決済ボタンを押します。ですから、オンライン販売においてお客様は商品購入時に必ず、そして毎回チェックアウト画面を見ることになります。

また、チェックアウトページは、お客様みずから『個人情報』や『決済情報（クレジットカード情報）』などの重要事項を入力するページですから、違和感やストレスなどを与えないようにしなければなりません。

というもの、チェックアウトページで離脱を招いてしまうと、お客様は二度と商品購入をしてくれないかもしれないから。離脱は、お客様にとっても、ショップ運営者にとっても不幸なことですから、このようなことを起こらないように、チェックアウトページの構築やカスタマイズは重要なのです。

Shopifyのチェックアウトページもまた、お客様が商品をカートに入れて購入のための決済を行う最終場面です。なので、ここでの操作がうまくいかずにお客様を離脱させてしまうのは、大きな損失になります。

つまり、チェックアウトページには、お客様に商品をスムーズに購入をしてもらうとともに、購入離脱を防ぐ役割もあるということ。お客様の気の迷いによる購入離脱を少なくするためにも、ショップに合ったチェックアウトページに仕上げるべく、常により良い改善をして構築しなければなりません。

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

【Shopify】チェックアウトページの構築方法

Shopifyのチェックアウトページで、全プラン共通で修正できる内容は次のとおりです。

1. 背景カラーや文字の変更
2. バナーやロゴの設定
3. 会員登録の有効化
4. 住所の自動入力
5. 多言語対応（アプリが必要）
6. チップオプションの追加
7. 注文内容などを注文後に自動メール送信
8. カゴ落ちの通知

以上のような、簡単なデザインや入力項目の変更などができます。

また、上位プランのShopify Plusだと、チェックアウトページのコード編集ができるようになりますから、次のようなカスタマイズも可能になります。

• 氏名のカナ文字入力指定
• すべての入力項目の配置をカスタマイズ変更
• 配送時間指定を追加
• Google Tag ManagerやKARTEなどのタグの設置
• 配送先の国によって表示や処理を変更する

このようなコード編集ができると、配置変更や項目の追加にとどまらず、チェックアウトページにおけるお客様の動線などを分析することも可能になります。

また、海外のお客様に向けて販売したい場合も、20ヶ国語まで言語対応させることができたり、それぞれの国に合わせて表示項目を変更したりすることもできます。

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

【Shopify】チェックアウトページを構築する際の４つの注意点

チェックアウトページを構築する際、注意点を押さえておかないと離脱率が増える原因になることがあります。
注意ポイントは、以下のとおりです。

• 会員登録の有無を設定する
• スタイルを統一させる
• 多言語対応に設定する
• ストアポリシーを作成する

それぞれのポイントを確認しましょう。

注意点① 会員登録の有無を設定する

チェックアウトページにおける会員登録の有無を設定しましょう。

設定を有効にすると、ユーザーのIDやパスワードはもちろんのこと、注文履歴や注文状況などの情報がShopifyに保存されます。チェックアウト時に保存された情報は事前入力されるので、ユーザー自身が情報を入力する手間が省けます。よりスムーズに買い物を楽しめるのです。

注意点② スタイルはシンプルにまとめる

チェックアウトページのデザインは、シンプルにまとめるのが一番です。

ユーザーはチェックアウトページを利用して情報を入力します。そのため、チェックアウトページのデザインが過度だったり文章が読みづらかったりすると、離脱されることもあるかもしれません。離脱を避けるためにも、スタイルはシンプルにまとめるように意識しましょう。

注意点③ 多言語対応に設定する

海外に対して商品を販売している場合は、多言語に設定することも忘れず行いましょう。せっかく商品に興味を持ったユーザーが現れたとしても、チェックアウトページが多言語に対応していなければ購入に至ることはないかもしれません。

ただし、一部テーマは複数言語の翻訳が含まれる場合があります。

注意点④ ストアポリシーを作成する

チェックアウトページを構築するときは、ストアポリシーを作成しましょう。ストアポリシーとは、サービスを利用するためにユーザーが従う必要があるルールのことです。

例えば、返品やプライバシー、利用規約、配送に関するストアポリシーを作成します。ユーザーが安心して買い物できる要素にもなるので、きちんと用意しておくことが大事です。

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

【Shopify】チェックアウトページのカスタマイズ方法

次のようなカスタマイズができます。

なお、管理画面の『チェックアウトの設定』のチェックアウト項目を変更する画面は、プランを選択して最初の商品を作成するまで表示されませんから注意してください。

1. バナー背景画像の登録・変更

チェックアウトページに表示される一番上のバナーの背景画像を登録・変更する方法です。
なお、画像サイズは『1000 x 400ピクセル』だと解像度が良いようです。

1. 管理画面の『設定』＞『チェックアウト』へ
2. 『スタイル』＞『チェックアウトのカスタマイズ』でテーマエディタを開く
3. 『バナー』で『画像をアップロード』をクリック、もしくはライブラリにアップロード済み画像を選択し『保存』

2. チェックアウトページのロゴ追加

チェックアウトページのロゴは、次のように追加します。　
バナーの左右、もしくは中央にロゴを配置でき、すでに画像を配置しているときは一番上に表示されます。

1. 管理画面の『設定』＞『チェックアウト』へ
2. 『スタイル』＞『チェックアウトのカスタマイズ』でテーマエディタを開く
3. 『ロゴ』で『画像をアップロード』をクリックするか、ライブラリにアップロード済み画像を選択
4. ロゴの位置を変更
5. ロゴのサイズを変更し『保存』

3. メインコンテンツの背景画像もしくは色を追加

チェックアウトページのメインエリアに背景画像もしくは色を追加する方法です。なお、背景画像と色のどちらかしか追加はできません。

1. 管理画面の『設定』＞『チェックアウト』へ
2. 『スタイル』＞『チェックアウトのカスタマイズ』でテーマエディタを開く
3. 『メインコンテンツエリア』で背景色、もしくは画像を追加
4. ライブラリにアップロード済み画像を選択し『保存』

4. フォームフィールドの色変更

フィールドの色を『白』または『透明』に変更する方法です。

1. 管理画面の『設定』＞『チェックアウト』へ
2. 『スタイル』＞『チェックアウトのカスタマイズ』でテーマエディタを開く
3. 『メインコンテンツエリア』で『フォームフィールド』をクリックし、希望する色を選択し『保存』

5. 注文概要に背景画像、色を追加

チェックアウトページで お客様が『注文概要を表示』をクリックしたときに表示される商品リストの注文概要に、背景画像または色を追加する方法です。

1. 管理画面の『設定』＞『チェックアウト』へ
2. 『スタイル』＞『チェックアウトのカスタマイズ』でテーマエディタを開く
3. 『ご注文概要』で背景色または画像を追加し『保存』

6. チェックアウトページの画像を変更または削除

チェックアウトページに配置した画像を変更・削除する方法です。

1. 管理画面の『設定』＞『チェックアウト』へ
2. 『スタイル』＞『チェックアウトのカスタマイズ』でテーマエディタを開く
3. 置き換えたい画像の下で、『更新』を選び画像をアップロードするか、ライブラリにアップロード済み画像から選択し『保存』
4. 画像の削除は画像の下の 『削除]』をし『保存』

7. 画像の代替テキスト追加

チェックアウトページに配置した画像の代替テキストを追加する方法で、SEO的に役立ちます。

1. 画像の下で 『更新]』をクリックし『画像を編集]』を選ぶ
2. 画像の代替テキストを入力し『保存』

8. チェックアウトページのフォント変更

チェックアウトページに表示される文字フォントを変更する方法です。

1. 管理画面の『設定』＞『チェックアウト』へ
2. 『スタイル』＞『チェックアウトのカスタマイズ』でテーマエディタを開く
3. 『文字体裁』で『見出し』もしくは『本文』でドロップダウンから好きな文字フォントを選択し『保存』

9. チェックアウトページのボタン変更、アクセントカラーの変更

チェックアウトページのボタン、リンクやエラーメッセージなどのアクセントカラーを変更する方法です。

1. 管理画面の『設定』＞『チェックアウト』へ
2. 『スタイル』＞『チェックアウトのカスタマイズ』でテーマエディタを開く
3. 『色』＞『アクセント』『ボタン』『エラー』の横にあるカラーボックスでカラーピッカーから色を選択、もしくは16進コードを入力し『保存』

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

チェックアウトページをカスタマイズする際の５つのポイント

カスタマイズする際に注意すべきポイントは、次のとおりです。

派手にしすぎない

チェックアウトページで大事なのは、

• 入力項目がわかりやすい
• スムーズに決済を完了させる

といったシンプルであることがポイントです。
なので、できるだけ文字や背景画像、背景色などを落ち着いた配色にし、お客様の注意が他に向かないように工夫しましょう。

ストアポリシーを入れる

ストアポリシーはお客様が購入を決意するときの安心感を演出することができます。
ですから、

• 返金対応の有無
• 配送方法
• 取得情報に関するプライバシーポリシー

などをしっかりと記載したストアポリシーを必ず入れておくようにしましょう。

多言語対応

日本語以外のテーマを利用する場合は、多言語対応のアプリを導入してチェックアウトページが日本語として思いが伝わる翻訳となっているかを事前に確認しましょう。

特に日本語訳の精度はとても重要ですから、必要があれば編集をしておきましょう。

会員登録の有無

チェックアウトページでは、購入してくれたお客様に対してオンラインショップの会員登録を勧めることもできます。
たとえば、

• 会員登録をすれば、次回購入時にお客様情報が自動的に入力されて手間がなくなる

といったアピールをすれば、スムーズに会員登録を促すこともできます。

また、登録いただいた会員にメールなどでセール情報などを送り、リピート率を向上させることも可能です。

テスト注文で確認する

Shopifyには商品購入を自ら試すというテスト注文機能がついていますから、オンラインショップを公開する前に必ず行っておきましょう。

チェックアウトページでのバグやエラーは、大きな機会損失になるので、事前にテストをして不具合をなくすようにしてください。

Shopifyやその他ECの制作・運用・保守について、お気軽にご相談ください。
連絡は問い合わせ・無料相談・無料お見積りよりどうぞ。

まとめ

以上が、Shopifyのチェックアウトページの構築方法や、成功するカスタマイズ方法やポイントです。

チェックアウトページでお客様に離脱されてしまうのは、大きな損失でしかありません。なので、いかにスムーズにお客様のお買い物を完了させられるかの一点に注力しましょう。

また、無事購入できたお客様に、その喜びをSNSでシェア投稿しやすい画面を用意すると更に効果的ですよ。