Shopifyのチェックアウト画面のカスタマイズ方法を解説します

お金 money

Shopifyのチェックアウト画面をカスタマイズ(編集)したい。

ロゴを追加したり、ゲスト購入を許可したり、入力フォームの調整をしたいので、やり方を教えて欲しい。

こんなことを考えている方へ。

この記事を読むことで以下がわかります。

Shopifyのチェックアウト画面(決済画面)のカスタマイズ方法・編集方法

この記事を書いている私は大阪在住のweb制作フリーランスです。

東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。

Shopifyのチェックアウト画面のカスタマイズ(編集)方法

Shopifyのチェックアウト画面のカスタマイズ方法を解説します。

チェックアウト画面とは以下です。

Shopify チェックアウト 決済画面

チェックアウト画面はメールアドレスや配送先住所、支払い方法を入力して購入を確定するページです。いわゆる決済画面ですね。

チェックアウト画面のカスタマイズは、Shopifyの管理画面から行うことができます。カスタマイズ項目は以下の9種類です。

順番に解説していきます。

設定項目名内容
スタイルチェックアウト画面にストアのロゴを入れたり、フォントやキーカラーを変える設定です
顧客アカウント商品購入時にお客様がアカウントを作る必要があるのか(ゲスト購入を許容するか)を設定します。
お客様の連絡先お客様が、電話番号(SMS)、メールアドレスのどちらの連絡方法(もしくは両方)を購入時に使用できるかを選択します。
フォームのオプション購入時の入力フォーム(名前、住所など)の非表示・必須・任意を編集できます。
チップお客様が購入時にチップを払えるオプションを追加するかどうかを選択します。
注文処理配送先住所を請求先住所としてそのまま使うか、注文商品を自動で発送済扱いにするか、等の注文処理に伴う内容を編集します。
Eメールマーケティングメールマガジンの同意についての編集項目です。
カゴ落ちカートに商品を入れたままで注文を完了していないお客様にメールを送信(通称:カゴ落ちメール)するかどうか、送信するならサイト離脱後何時間後に送信するか、を設定します。
チェックアウト言語決済画面の言語を設定します。日本人向けサイトなら日本語です。

【関連記事はこちら】
Shopifyを使ったECサイト参考事例まとめ【国内海外】を読む >>

カスタマイズ項目を確認する

Shopifyにログイン > 管理画面 > 設定 > チェックアウト へと進みます。

Shopify チェックアウト 決済画面

すると、以下の画面が表示されます。

ここに載っているのがカスタマイズ項目の一覧です。

上から順番にカスタマイズしていきます。

Shopify チェックアウト 決済画面

【関連記事はこちら】
Shopifyでプライバシーポリシーなどの法務関連ページを作る方法を読む >>

「スタイル」の設定

「スタイル」は、チェックアウト画面にストアのロゴを入れたり、フォントやキーカラーを変える設定項目です。

今回は「Venue」という有料テーマを例にとります。

・参考:Shopify有料テーマVenue Theme – Morning – Ecommerce Website Template >>

まず「チェックアウトをカスタマイズ」を押下します。

Shopify チェックアウト 決済画面

遷移先画面の下の方にある「テーマ設定」を押下します。

Shopify チェックアウト 決済画面

「チェックアウト」を押下します。

Shopify チェックアウト 決済画面

すると、カスタマイズできる項目が一覧で表示されます。

「バナー」エリアに画像を入れる項目。

Shopify チェックアウト 決済画面

「ロゴ」を入れる項目。位置やサイズも調整できます。

Shopify チェックアウト 決済画面

「メインエリア」に背景画像を入れる項目。入力フォームの色も調整できます。

Shopify チェックアウト 決済画面

続いて「フォント」

見出し(h1とかh2とか)、本文のフォントを変更できます。

Shopify チェックアウト 決済画面

決済画面のキーカラーも変更できます。

Shopify チェックアウト 決済画面

実際の案件では、カラーやフォントなどは、

  • クライアントのブランドの世界観
  • クライアントのブランドのキーカラー
  • サイト全体のデザインとの調和(デザイナーと相談)

を考慮して行います。

今回は「ロゴ」の登録のみ行います。

「ロゴ」を設定した状態は以下です。

Shopify チェックアウト 決済画面

位置は左上が綺麗ですね。

サイズが大きすぎるのも不恰好なので「中」を選択。右半分がプレビューになっていて、表示を確認できます。

問題なければ保存して終了です。

【関連記事はこちら】
Shopifyでインスタ連携する方法【フィードを埋め込み表示】を読む >>

「顧客アカウント」の設定

商品購入時にお客様がアカウントを作る必要があるのか(ゲスト購入を許容するか)を設定します。

通常は「アカウントを任意にする」で問題ないです。

Shopify チェックアウト 決済画面

この設定にすると、

  • ゲスト購入もできる
  • 会員登録して購入もできる

という状態にすることができます。

ECでの会員登録にハードルを感じているユーザーも多いので、ゲスト購入できる導線は確保すべきです。

もし「会員登録しないと買えないようにしたい」という場合は「アカウントを必要とする」にチェックをつければOKです。

【関連記事はこちら】
Shopifyの有料テーマを紹介します【実際に案件で使用】を読む >>

「お客様の連絡先」の設定

お客様が、電話番号(SMS)、メールアドレスのどちらの連絡方法(もしくは両方)を購入時に使用できるかを選択します。

決済の連絡手段が電話番号(SMS)というのは、日本では一般的でないと思うので「お客様がチェックアウト時に使用できるのは、メールアドレスのみです」を選択します。

Shopify チェックアウト 決済画面

【関連記事はこちら】
【Shopify】通貨表示¥円マークの後ろに付いているJPYを消すを読む >>

「フォームのオプション」の設定

注文時の入力フォームの任意・必須の設定を行います。

日本向けストアの場合、基本的には名前は「姓名を必要とする」になるはずです。

配送に関わる電話番号は必須をおすすめします。

To Bのサイトでなければ、会社名は任意です。

Shopify チェックアウト 決済画面

【関連記事はこちら】
【Shopify】Powered by Shopifyの表示を消す方法を読む >>

「チップ」の設定

海外ECならではの項目ですね。

商品購入時にチップを追加できるオプションを表示するか否かを選択します。

基本はチェックを外します。

Shopify チェックアウト 決済画面

【関連記事はこちら】
Shopifyのサイト内検索機能をカスタマイズする方法【実案件で使用】を読む >>

「注文処理」の設定

注文処理の項目では、決済画面での設定、支払いや発送後の設定のカスタマイズを行います。

「お客様のチェックアウト時」の項目では「デフォルトでは配送先住所を請求先住所として使用する」にチェックを入れます。

配送先に入れた住所がそのまま請求先住所に登録されるので、お客さんの入力の手間が省けます。

配送先と請求先の違いは、たとえばギフト(お中元やお歳暮)で重要になってきます。領収書の送り先は配送先住所ではなく、請求先住所に送ってほしい、というニーズはかなりあります。

「住所自動入力を有効化する」にもチェックを入れます。これを入れることで、郵便番号を入れたら住所が自動で設定されるようになります。便利です。

設定項目名説明
デフォルトでは、配送先住所を請求先住所として使用するチェックアウト時に記入が必要な箇所を減らすことができます。請求先住所を編集することもできます。
住所自動入力を有効化するお客様が配送先住所と請求先住所を入力した際に住所の候補を表示する。

「注文の支払い後」は「注文の項目を自動でフルフィルメントしない」にチェックを入れます。

「注文の項目を自動で発送する」にチェックを入れると、支払い完了と同時に商品の発送通知が送られてしまいます。

購入完了と同時に発送する商材はデジタル商材くらいです。電子書籍とか。それらの商材を扱っていないストアの場合は「注文の項目を自動でフルフィルメントしない」にチェックを入れます。

設定項目名説明
注文の項目を自動で発送する注文を自動的にフルフィルメントするように設定すると、注文は支払い後に自動的に発送済みとしてマークされます。
デジタルダウンロードまたはデジタルギフトカードを限定的に販売する場合、自動フルフィルメントを使用できます。
デジタル商品を購入するお客様には、ダウンロードリンクが自動的にメールで送信され、注文は発送済みとしてマークされます。
注文のギフトカードのみを自動で発送するデジタルダウンロードまたはデジタルギフトカードを限定的に販売する場合、自動フルフィルメントを使用できます。
デジタル商品を購入するお客様には、ダウンロードリンクが自動的にメールで送信され、注文は発送済みとしてマークされます。
注文の項目を自動でフルフィルメントしない注文を手動でフルフィルメントするように設定すると、注文を開いて項目を発送する必要があります。

「注文のフルフィルメントと支払いが終了した後」は「注文を自動でアーカイブする」を選択します。これにより、支払完了かつ発行完了した注文はアーカイブ(作業済)のフラグが立ちます。

Shopify チェックアウト 決済画面

【関連記事はこちら】
Shopifyの無料テーマDebut(デビュー)を実際に使ってみた感想を読む >>

「Eメールマーケティング」の設定

決済画面内でマーケティング用のメールの購読フォームを作るかどうかを選択できます。両方ともチェックを入れることで、メルマガ会員を増やすことができます。

ただ、顧客のメールアドレスを活用する際には、プライバシーポリシーにてその利用範囲を明確に規定しましょう。

設定項目名説明
チェックアウト時に登録オプションを表示するチェックアウト時に登録チェックボックスが追加されます。
登録オプションをあらかじめ選択するアカウントを持っていないお客様のために、チェックアウト時にメールマーケティングの登録用チェックボックスをあらかじめ選択できます。
また、メール購読者のお客様リストに含まれるお客様のアカウントのチェックボックスも、あらかじめ選択します。
メールマーケティングをオプトアウトしたアカウントや、メール購読者のお客様リストに含まれていないアカウントのお客様に関しては、チェックアウト時にチェックボックスがあからじめ選択されることはありません。
Shopify チェックアウト 決済画面

【関連記事はこちら】
Shopifyで作ったECサイトに商品レビュー機能を導入する方法を読む >>

「カゴ落ち」の設定

カートに商品を入れたままで注文を完了していない状態を「カゴ落ち」といいます。このカゴ落ちの状態になったお客様に送るメールの設定ができます。通称「カゴ落ちメール」です。

ECのカゴ落ち率は60%〜70%と言われており、大きな機会損失が起きています。カゴ落ちメールは配信した方が良いです。

「カゴ落ちメールを自動的に送信する」にチェックを入れます。

「次の人に配信」では「チェックアウトを放置しているメール購読者」にすることが多いです。

「チェックアウトを放置している人」にした方が、リーチできるユーザーは多くなりますが、メルマガの受信許諾をしていない人にも届きます。

ユーザーからすれば「会員登録もしていないのにメールが勝手に届いた!」という現象が起きます。トラブルに発展する可能性もあります。

なので私は「チェックアウトを放置しているメール購読者」にしています。時間はオススメの10時間です。

Shopify チェックアウト 決済画面

【関連記事はこちら】
【2021年】Shopifyの最新版「ストア開設ガイド」の魅力を紹介を読む >>

「チェックアウト言語」の設定

決済画面の言語を設定します。

日本のサイトなら間違いなく日本語ですね。

私は過去に「多言語サイト(日・英)」「英語サイト」「台湾サイト(繁体字の中国語)」の制作経験があります。

海外ユーザー向けの場合は、その国の言語を設定します。多言語の場合は、翻訳アプリを導入することで自動で言語が切り替わります。

「チェックアウト言語を管理」を押下すると、言語設定のページに移動します。

Shopify チェックアウト 決済画面

アクション > テーマ言語を変更する より、表示させたい言語を選択すればOKです。

【関連記事はこちら】
Shopifyでの商品登録のやり方【分かりやすく解説します】を読む >>

「checkout.liquid」のカスタマイズはShopify Plusプランから

htmlやcss、liquidなどのテンプレートのコードまでカスタマイズしたい場合は「Shopify Plus」というプランに加入している必要があります。

この「Shopify Plus」というプランですが、月額$2000という高額なプランです。多くのストアが利用しているであろうBasicプランが$29なので、約70倍の金額ですね。

Shopifyでのサイト構築を学ぶおすすめの方法

Shopifyのリファレンスは基本的には英語です。自己学習をする際には言語の壁にブチあたります。不安な思いを抱えながら自己学習で時間を浪費するより、世の中の優良な教材を活用する方が良いです。

  • オンラインスクールで学ぶ

TechAcademy(テックアカデミー)に、専属のパーソナルメンターがマンツーマンでサポートする「Shopifyコース」が誕生しました。
安い買い物ではないので、TechAcdemyの講座を無料体験で試してみるのがおすすめです。

  • 本で学ぶ

商品売るならShopify 世界標準かつ最先端のECサイト構築入門」がおすすめです。shopifyとは?という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。
実際に読んだ私のレビューはこちらの記事をご覧ください。

  • 動画で学ぶ

Udemyの「Shopifyでクライアントのストアを作る人のための講座 」がオススメです! 私も買いましたがShopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。
実際に購入した私のレビューはこちらの記事をご覧ください。

【Udemyがセール中(6月11日(金)まで)】
対象コースが ¥1,610から。
2021年6月11日(金)まで!【Udemy】セール中のShopifyの講座一覧を見る >>

まとめ

この記事のポイントをまとめます。

チェックアウト画面はメールアドレスや配送先住所、支払い方法を入力して購入を確定するページです。いわゆる決済画面です。

チェックアウト画面のカスタマイズは、Shopifyの管理画面から行うことができます。カスタマイズ項目は以下の9種類です。

設定項目名内容
スタイルチェックアウト画面にストアのロゴを入れたり、フォントやキーカラーを変える設定です
顧客アカウント商品購入時にお客様がアカウントを作る必要があるのか(ゲスト購入を許容するか)を設定します。
お客様の連絡先お客様が、電話番号(SMS)、メールアドレスのどちらの連絡方法(もしくは両方)を購入時に使用できるかを選択します。
フォームのオプション購入時の入力フォーム(名前、住所など)の非表示・必須・任意を編集できます。
チップお客様が購入時にチップを払えるオプションを追加するかどうかを選択します。
注文処理配送先住所を請求先住所としてそのまま使うか、注文商品を自動で発送済扱いにするか、等の注文処理に伴う内容を編集します。
Eメールマーケティングメールマガジンの同意についての編集項目です。
カゴ落ちカートに商品を入れたままで注文を完了していないお客様にメールを送信(通称:カゴ落ちメール)するかどうか、送信するならサイト離脱後何時間後に送信するか、を設定します。
チェックアウト言語決済画面の言語を設定します。日本人向けサイトなら日本語です。

今回の記事はここまでです。

この記事を書いた人

hiro

美味しいご飯とお酒と一人旅が好き。EC企業に5年▶︎web制作フリーランスへ。ECサイト制作、デザイン、コーディング、サイト分析、CVR改善、ブログ書いたりして生活しています。

旅行ブログ「アジアをひとりで旅してみたら」も運営中。