>> 運営者プロフィールはこちら

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

使い方
記事内に広告が含まれています。

Shopifyのチェックアウト画面をカスタマイズ(編集)したい。
ロゴを追加したり、ゲスト購入を許可したり、入力フォームの調整をしたいので、やり方を教えて欲しい。

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

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

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

Shopify飯店

Shopify飯店

>> 運営者の詳しいプロフィールはこちら

\当サイトのおすすめ記事はこちら👇/

■■Shopifyを学ぼう■■

人気記事 4万文字で徹底解説!Shopifyおすすめスクールまとめ!🏫
人気記事 1.5万文字でデイトラShopifyコース!を徹底解説!口コミはこちら📺
人気記事 2万文字で忍者CODEShopifyコース!を徹底解説!口コミはこちら📺
人気記事 Shopifyのおすすめ学習方法まとめ!👩‍💻
人気記事 筆者の経験談!独学ロードマップ決定版!🖥
人気記事 Shopifyを学べるおすすめの書籍まとめ!📚
人気記事 日本語のみを厳選!おすすめのUdemy動画教材🎦
人気記事 コピペでOK!カスタマイズパーツ販売中📝

 

スポンサーリンク

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

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

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

Shopify チェックアウト

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

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

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

 

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

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

Shopify チェックアウト

すると、以下の画面が表示されます。ここに載っているのがカスタマイズ項目の一覧です。上から順番にカスタマイズしていきます。

Shopify チェックアウト

 

「スタイル」の設定

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

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

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

Shopify チェックアウト

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

Shopify チェックアウト

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

Shopify チェックアウト

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

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

Shopify チェックアウト

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

Shopify チェックアウト

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

Shopify チェックアウト

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

Shopify チェックアウト

決済画面で使うカラーも変更できます。

ここを変更することでボタンカラーやアクセントカラーを変えることができます。ブランドカラーと同じ色にすることが多いですね。

Shopify チェックアウト

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

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

などを考慮して行います。

今回は試しに「ロゴ」の登録をしてみます。「ロゴ」を設定した状態は以下です。黒い四角形がロゴだと思ってください。

Shopify チェックアウト

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

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

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

 

「顧客アカウント」の設定(アカウント必須か?ゲスト購入OKか?)

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

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

Shopify チェックアウト

この設定にすると、

・ゲスト購入もできる(会員登録をしなくても購入できる)
・会員登録して購入することもできる

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

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

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

 

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

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

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

Shopify チェックアウト

 

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

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

日本向けストアの場合、基本的には名前は「姓名を必要とする」になるはずです。配送に関わる電話番号は必須をおすすめします。To Bのサイトでなければ会社名は任意です。

Shopify チェックアウト

 

「チップ」の設定

海外ECならではの項目ですね。商品購入時にチップを追加できるオプションを表示するか否かを選択します。基本はチェックを外します。

Shopify チェックアウト

 

「注文処理」の設定

Shopify チェックアウト

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

お客様のチェックアウト時」の項目では「デフォルトでは配送先住所を請求先住所として使用する」にチェックを入れます。配送先に入れた住所がそのまま請求先住所に登録されるので、お客さんの入力の手間が省けます。

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

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

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

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

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

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

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

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

【注文を自動でアーカイブする】
チェックを入れる。
フルフィルメントされた注文は、オープン注文リストから自動的に削除されます。

 

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

Shopify チェックアウト

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

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

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

 

「カゴ落ち」の設定

Shopify チェックアウト

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

通称「カゴ落ちメール」です。

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

【カゴ落ちメールを自動的に送信する】
チェックを入れます。
【次の人に配信】
「チェックアウトを放置しているメール購読者」にすることが多いです。

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

ユーザーからすれば、

メルマガの許可もしていないのにメールが勝手に届いた・・・

という現象が起きます。

トラブルに発展する可能性もあります。

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

【後で送信】
こちらは公式がおすすめする10時間でOKです。

 

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

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

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

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

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

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

Shopify チェックアウト

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

Shopify チェックアウト

 

スポンサーリンク

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

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

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

 

スポンサーリンク

参考:Shopifyを学ぶ方法まとめ|オンラインスクール・本・動画

Shopifyを本格的に学ぶためにはネットの情報だけは足りません。
そこで、仕事でShopifyを扱っている筆者が、おすすめの学習方法をまとめました。

オンラインスクール、本(参考書)、動画教材(Udemy)を活用して、効果的に学習しましょう。思い切って有料の教材を買って体系的に学ぶことで、操作に悩む時間が減りますし、より高度なカスタマイズや提案ができるようになり、仕事の幅が広がります。

\当サイトのおすすめ記事はこちら👇/

■■Shopifyを学ぼう■■

人気記事 4万文字で徹底解説!Shopifyおすすめスクールまとめ!🏫
人気記事 1.5万文字でデイトラShopifyコース!を徹底解説!口コミはこちら📺
人気記事 2万文字で忍者CODEShopifyコース!を徹底解説!口コミはこちら📺
人気記事 Shopifyのおすすめ学習方法まとめ!👩‍💻
人気記事 筆者の経験談!独学ロードマップ決定版!🖥
人気記事 Shopifyを学べるおすすめの書籍まとめ!📚
人気記事 日本語のみを厳選!おすすめのUdemy動画教材🎦
人気記事 コピペでOK!カスタマイズパーツ販売中📝

\初回購入で最大90%OFF👇/

■■Udemyは初回購入がお得■■

Udemy Shopify
Point Udemyは初回購入がお得!
Point 通常1万〜2万円の商品が80%OFF〜90%OFF程度の値段で購入できる!
Point ランチ1回分の値段でShopifyを学べます!

 

スポンサーリンク

まとめ

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

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

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

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

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

この記事を書いた人
Shopify飯店店主

自分の仕事の経験を記事にしています。東証一部のEC企業で5年→個人事業主→法人化。サイト構築実績80社以上、ECコンサル・分析実績40社以上。コンサルにおいては、EC売上3倍、キャンペーン応募者数1.7倍などの実績があります。

Shopify飯店店主をフォローする
使い方
スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました