Shopifyのチェックアウトカスタマイズ注意点とやり方

こんにちは。中川瞬(@shun01224)です。

中川
Shopifyのチェックアウトカスタマイズについて知りたい
という方のために、シーン別のカスタマイズ法について解説をします。

この記事を読むことで、

  1. Shopifyのチェックアウトカスタマイズ法がわかる
  2. ブランドデザインに合わせることができる
  3. お客様が使いやすいデザインにできる

この記事を書かせて頂いている私は、現在、

輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、

忙しくても副業で収入を得てもらっています。

それではShopifyのチェックアウトカスタマイズについて解説していきます。

 

Shopifyのチェックアウトカスタマイズの注意点

Shopifyのチェックアウトをカスタマイズする前に、注意点をチェックしてみましょう。

事前の確認が必要なのは、コードのカスタマイズが可能なのは

Shopifyの特定のプランだけだからです。

コードのカスタマイズができるのはShopify Plusのみ

Shopifyでコードを使ったチェックアウトのカスタマイズは、Shopify Plusのみで使えます。

月額2,000米ドルと費用が高いため、

大規模なショップしかコードを使ったチェックアウトカスタマイズはできないでしょう。

小規模のショップが使えるShopifyの月額料金は3種類です。

• ベーシック:月額29米ドル
• スタンダード:月額79米ドル
• プレミアム:月額299米ドル

一方で、Shopify Plusの月額利用料金は2,000米ドルです。

基本的なプランで最も月額料金が高いプランと比較しても、

Shopify Plusはかなり料金の差が出てしまいます。

ただし、基本の3プランでも以下のカスタマイズは可能です。

• バナーやロゴの変更
• 多言語対応
• 背景カラーや文字の変更
• 住所の自動入力
• カゴ落ち通知
• 会員登録の有効化
• 注文内容の自動送信

コードを変更する場合は、Shopify Plusの利用を検討してください。

会社のロゴを追加しデザインを統一させる

Shopifyのチェックアウトとは、カートの次から注文完了までのページのことです。

チェックアウトは、別名「決済ページ」ともいいます。

お客様が商品をカートに入れて決済するため、

住所や支払い方法などを入力するページのことです。

チェックアウトページはショップの印象に影響を及ぼすため、

ショップデザインと統一させましょう。

会社のロゴを追加すれば、

お客様は一目でどこのショップのチェックアウトページなのかわかります。

お客様の安心感にもつながるため、チェックアウトページはロゴや色などを調節してください。

使いやすくするためシンプルにする

チェックアウトページは、お客様の離脱を防ぐ工夫をしましょう。

ページはシンプルにすることで、どのお客様も使いやすくなります。

Shopify Plusプランではチェックアウトカスタマイズに対応しますが、

カスタマイズできるからといって、使いづらくなっては意味がありません。

シンプルなページとは、お客様がわかりやすいページのことです。

文章は読みづらくないのか?気が散るデザインではないか?確認してください。

チェックアウトページが複雑であればあるほど、お客様は注文に迷います。

操作が面倒になり離脱されないよう、シンプルなデザインがおすすめです。

Shopifyのチェックアウトカスタマイズ方法

続いて、Shopifyのチェックアウトカスタマイズ方法を紹介します。

ロゴやフォントなどの見た目の変更から、

お客様の使いやすさの面での変更をしていきましょう。

紹介するカスタマイズは、基本の3プランでも対応できる方法です。

ロゴの変更

Shopify管理画面の設定から、チェックアウトをクリックします。

スタイルにある「チェックアウトをカスタマイズ」を選択。

続いて、テーマ設定から「チェックアウト」をクリックするとロゴを変更できます。

ロゴのセクションで「画像をアップロード」をクリック。

または、すでにライブラリにアップロードをしたロゴ画像を選択してください。

ロゴ画像を選択したら、ロゴの位置を変更します。

チェックアウトページのロゴは、バナーエリアの左、または右や中央に配置できます。

ロゴのサイズを変更したら、プレビューで表示を確認しましょう。

表示はデスクトップ・モバイルを切り替えて確認することができます。

希望のロゴに調節できたら、「保存」をクリックしてください。

背景画像の変更

同じようにShopify管理画面から「チェックアウトをカスタマイズ」に進み、

背景画像や色を変更します。

選べるのは、背景画像か色のどちらかです。

背景画像と色の両方の変更はできませんので、どちらか1つを選んでください。

なお、背景画像と色の変更は、お客様が見やすくなるよう配慮する必要があります。

背景画像や色を変更しても、お客様はフィールドが見えやすいか確認しましょう。

メインコンテンツエリアセクションで、背景画像または色を追加します。

背景画像を追加するときは、「画像をアップロード」をクリック。

または、すでにライブラリにアップロードしている画像を選択することもできます。

小さな画像を選択すると、縦または横に繰り返し表示されます。

背景色を変更する場合は、「背景の色」の横にあるボックスをクリック。

カラーピッカーから色を選ぶか、16進数のコードを入力してください。

最後にプレビューで表示を確認したら、保存で完了です。

フォントの変更

Shopifyチェックアウトページでは、

リンク・ボタン・エラーのフォントの色を変更できます。

本文のフォントの色を変更することはできません。

フォントの色は派手な色を選ばず、できるだけ見やすい色を選びましょう。

同じように、Shopify管理画面から「チェックアウトのカスタマイズ」に進みます。

テーマエディタを開いたら、「文字体裁」セクションで、

見出しや本文のフォント変更ができます。

最後に「保存」をクリックして変更は完了です。

顧客アカウントの設定

「顧客アカウント」の設定では、お客様がチェックアウトするときに会員登録をするか、

またはログイン要求をするかを選ぶことができます。

アカウントの設定では、以下の3つから選ぶことが可能です。

• アカウントを無効化する
• アカウントを任意にする
• アカウントを必要とする

ショップからすると、お客様に会員登録してもらうと、マーケティング施策ができます。

お客様にとっても、会員登録機能があれば、次回から住所等の入力がいらないため便利です。

ただし、お客様の中には会員登録が面倒な人もいるかもしれません。

ショップやお客様にとって使いやすいのは、一般的に「任意」です。

お客様の使いやすさやショップの施策によって、それぞれ合う設定にしてください。

カゴ落ちの通知設定

Shopifyのチェックアウトページでは、カゴ落ち設定ができます。

カゴ落ちとは、お客様がカートに商品を入れたまま決済に進まなかった場合のことです。

商品の注文は完了しておらず、ショップにとって機会損失となります。

ネットショップでは10人中7人がカゴ落ちとなっているデータもあるため、

機会損失にならないためにカゴ落ち設定をしておきましょう。

カゴ落ちのセクションで、「カゴ落ちメールを自動的に送信する」にチェック。

チェックアウトを放置している人、

またはチェックアウトを放置しているメール購読者から選んでください。

メール送信のタイミングは、以下の時間から選択が可能です。

• 1時間後
• 6時間後
• 10時間後(おすすめ)
• 24時間後

さらに「メールアドレスをカスタマイズ」をクリックすると、

送信するメールの内容を編集できます。

多言語設定

Shopifyショップを海外向けにしているなら、

チェックアウトページを多言語化しましょう。

テーマの中には、多言語翻訳が含まれるものがあります。

ただし、公式テーマストア以外で販売しているテーマは、

多言語に対応していない場合があるので注意してください。

Shopify管理画面の設定から、「ストア言語」をクリック。

「言語を追加する」をクリックして、対応したい言語を追加してください。

Shopifyショップを多言語にするには、翻訳アプリが必要です。

翻訳アプリを使って、チェックアウトページを翻訳してください。

ストアポリシーの追加

Shopifyショップでは、ストアポリシーの追加ができます。

ストアポリシーは、どんな人がショップを運営しているかわかるページのことです。

お客様に信用してもらい、安心して買い物を楽しんでいただくため、

ストアポリシーの追加はとても重要です。

ストアポリシーは、以下の項目を追加しましょう。

• 返金ポリシー
• プライバシーポリシー
• 利用規約
• 配送ポリシー
• 特定商取引法に基づく表記

それぞれ、HTMLが使えます。

Shopify管理画面の設定から、「法的関連」をクリック。

編集ページで5つのポリシーページを入力できます。

入力が完了したら「保存」をクリック、

するとチェックアウトのフッターにストアポリシーが追加されます。

最後にテスト注文をする

チェックアウトの設定が完了したら、最後にテスト注文をしましょう。

テスト注文をしないでショップを公開してしまうと、不備やエラーがわかりません。

お客様が商品をカートに入れても、決済まで進むことができない恐れがあるため、

必ずテスト注文してください。

テスト注文は、テスト用のクレジットカード番号を使って行います。

Shopify管理画面の設定から「決済」をクリック。

続いて、Shopify Paymentsの横の「管理」をクリック、

「テストモードを使用する」にチェックを入れ保存してください。

テストモードが起動したら、テスト用クレジットカード番号を使って注文しましょう。

無事に注文が完了すると、入力したメールアドレスに確認のメールが届きます。

さらに、Shopify管理画面の「注文管理」から発送状況を確認します。

Shopifyのチェックアウトをカスタマイズしよう

Shopifyのチェックアウトは、ショップごとにカスタマイズしましょう。

基本の3つのプランでも、

チェックアウトページの見た目や使いやすさをカスタマイズ可能です。

さらに、コードの変更が必要なときは、Shopify Plusプランに申し込むことになります。

コードの変更では、入力項目の配置変更や、配送時間指定の項目を追加できます。

ショップの規模により、チェックアウトのカスタマイズを使い分けてみてください。

物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、

下の記事ぜひ読んでください。