Shopify チェックアウト画面のスタイルをカスタマイズ

2021.05.03 Category / EC

Shopifyのチェックアウト画面

Shopifyを利用する上で、通常プランではできないことの一つにチェックアウト画面のカスタマイズがあります。Shopify Plusではliquidを扱えるため、カスタマイズも可能ですが、Plus以外のプランではレイアウト等を変更できません。ただし、色やフォント、表示項目のカスタマイズは管理画面から設定可能です。購入離脱を防ぐためにも、ショップにあったチェックアウトのスタイルを変更しておきましょう。

Shopifyのチェックアウト画面を管理者で変更できる内容

  • ストアのロゴを追加
  • ヘッダーの背景画像の変更
  • 背景画像の追加、背景色の変更
  • フォントの変更
  • フォントの色や、ボタンの色の変更
  • 顧客アカウントの要・不要・任意の設定
  • お客様の連絡先をメールのみにするか、メール・電話番号からえらべるようにするか
  • フォームの内容の一部変更
  • カゴ落ちのしたお客様へのアクション

チェックアウト画面のロゴ・ページの色の変更

Shopifyの管理画面左下より、
設定

チェックアウト

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

テーマ設定

チェックアウト

上記まで進んでください。書き出してみると結構深いですね。

ロゴの変更

ショップのロゴを追加可能です。

Shopifyのチェック画面のロゴ・色変更

背景色を変更、または背景画像を追加

背景色か、背景画像かのどちらかを選択できます。背景を使用してもフォームのフィールドがはっきりと読み取れるような色や画像を設定しないと、入力ができなくなりますのでご注意ください。

フォント、リンクカラー等の変更

本文のテキストの色は任意のカラーに設定できません!

リンク色、ボタン、エラー表示の色を変更可能です。

お客様入力情報の項目変更

顧客アカウントの要・不要・任意

購入する際に、アカウトを作成する必要があるか、任意か、アカウントは無しかを選択できます。ほとんどの場合は任意ではないでしょうか。日本のカートシステムではゲストアカウントで購入というものに当たりますが、導線は一つです。

お客様の配情報・連絡先情報

基本的な名前、住所、連絡先を入力できるようになっていますが、お客様の連絡先設定に

・お客様はチェックアウト時に、電話番号かメールアドレスのいずれかを使用できます。
・お客様がチェックアウト時に使用できるのは、メールアドレスのみです。

という項目があります。電話番号か、メールアドレスのいずれかという項目のため、メールアドレスなしで購入できる仕組みなのですが、通常のECサイトの場合は現実的にメールアドレスを利用してもらう方を選択しておく必要があります。

Shopifyのフォーム

また、配送先住所の電話番号も任意、非表示、必須と選べるため、こちらも通常は必須にしておいた方がよいでしょう。

カゴ落ちしたお客様へのアクション

Shopifyでは、カゴ落ちしたお客様へ自動でメールを配信してくれるという機能が、基本機能として搭載されています。効果は絶大のため、漏れなくチェックを入れておきましょう。

Shopifyのかご落ちアクション

まとめ

Shopifyは高機能で、さまざまなカスタマイズも可能ですが、基本の設定は非常に重要です。チェックアウト画面のスタイル変更は、管理画面上から簡単に設定が可能ですが、それぞれの設定項目の意味を理解して、かご落ちのリスクを少しでも減らしましょう。

  • 2021.05.03
  • Category EC
“Menu is opened”