Shopifyのチェックアウトとは?構築からカスタマイズ方法までを徹底解説

Shopifyのチェックアウトとは?構築からカスタマイズ方法までを徹底解説

RuffRuff App RuffRuff App by Tsun

「Shopifyのチェックアウトって何?」
「構築の方法やカスタマイズがわからない」

Shopifyで自社ECを作成する際にこのような悩みを抱えている方に向けてShopifyのチェックアウトのイメージや実際に構築していく手順やカスタマイズの方法について解説していきます。

ぜひ最後まで読んでチェックアウトについて理解を深め、Shopifyの機能を自在に使えるようになりましょう。

Shopify(ショッピファイ)の構築に関する記事も合わせてご覧ください。

DMMチャットブーストforEC

【Shopifyチェックアウト】Shopifyにおけるチェックアウトとは?

チェックアウトとは、いわゆる「フォーム」のことです。
ユーザーはカートに商品を追加した後、チェックアウトを使用して、注文を行う前に連絡先や住所などの配送に関する情報とクレジットカード番号などの決済手段を入力します。

オンライン販売ではShopifyチェックアウトを使用して、どこからでも注文、支払いができます。オンライン販売において、ユーザーは毎回チェックアウト画面を通過するのでチェックアウトページの構築、カスタマイズは重要です。

 

【Shopifyチェックアウト】チェックアウト画面のカスタマイズ手順

まずShopifyのチェックアウト画面のカスタマイズの幅は、プランによって異なります。

以下、全プラン共通でカスタマイズできる項目です。

  • 背景カラーや文字の変更
  • バナーやロゴの設定
  • 会員登録の有効化
  • 住所の自動入力
  • 多言語対応(アプリが必要)
  • チップオプションの追加
  • 注文内容やギフトカードを注文後に自動送信
  • カゴ落ちの通知

Shopifyでは通常プランでも、簡単なカスタマイズであればノーコードで対応可能です。
これからチェックアウトを実際にカスタマイズする手順を解説していきます。

 

手順1|チェックアウトのスタイルをカスタマイズする

チェックアウトページはなるべくデザインをシンプルに保つことが大切です。

お客様は、これらのページを使用して注文の配送情報と支払い情報を入力するため、気が散るような配色や読みづらいフォントは避けましょう。画像についてもコントラストの高い色や、注意を引きすぎてしまうような文字が入っていない画像を選択してください。

 

引用:Shopify管理画面

Shopifyのチェックアウトは、テーマのカスタマイズから編集できます。

Shopify管理画面の「テーマ」>現在のテーマの「カスタマイズ」をクリックし、テーマエディタへ進みます。

 

引用:Shopify管理画面

画面左の「テーマ設定」>「チェックアウト」でチェックアウト画面の編集が行えます。
最初はチェックアウトのスタイルを変更します。

スタイルに関しては以下の5つの設定が主な要素です。

  • バナー
  • ロゴ
  • メインコンテンツエリア
  • 注文内容
  • フォント・色

順番に手順を解説します。

バナー

バナーに設定された画像はチェックアウトの画面上部に表示されます。

  1. 「バナー」 セクションで、「画像をアップロード」 をクリックするか、すでにライブラリにアップロードした画像を選択します。
  2. 「保存」 をクリック

 

ロゴ

ロゴはチェックアウト画面上部に表示されますが、バナー画像を設定している場合、バナー画像の前面に表示されます。バナーエリアの左、右または中央に配置できます。

  1. 「ロゴ」 セクションで、「画像をアップロード」 をクリックするか、すでにライブラリにアップロードした画像を選択します。
  2. ロゴの位置を変更します。
  3. ロゴのサイズを変更します。
  4. 「保存」 をクリック

 

メインエリア

メインエリアとは、プレビュー画面左側にあるお客様が実際に住所や支払い情報を入力する場所です。背景の色や入力フォームのデザインを変更することができますが、フォームが読みにくい色や画像は避けましょう。背景色と画像を両方入れることはできません。

  1. 「メインエリア」 セクションで、背景色または画像を追加します。
    a. 色を追加する場合、「背景の色」 の横にあるボックスをクリックしてカラーピッカーを開き、色を選択するか、16進数のコードを入力します。
    b. 画像をアップロードする場合、「画像をアップロード」 をクリックするか、すでにライブラリにアップロードした画像を選択します。小さな画像は、タイルのように背景に縦方向または横方向に繰り返されます。
  2. 「保存」 をクリック

 

注文内容

注文内容とは、プレビュー画面右側にあるカートに追加した商品が並ぶ欄です。背景の色を変更することができます。

  1. 「注文内容」 セクションで、背景色または画像を追加します。
    a. 色を追加する場合、「背景の色」 の横にあるボックスをクリックしてカラーピッカーを開き、色を選択するか、16進数のコードを入力します。
    b. 画像をアップロードする場合、「画像をアップロード」 をクリックするか、すでにライブラリにアップロードした画像を選択します。小さな画像は、タイルのように背景に縦方向または横方向に繰り返されます。
  2. 「保存」 をクリック

 

フォント

フォントのリストから、チェックアウトページに使用される文字のフォントをブランドイメージと沿ったものにします。チェックアウトページのテキストの色は変更できないので注意しましょう。

  1. 「チェックアウト」 セクションで、「フォント」 エリアまでスクロールダウンします。
  2. 「見出し」 ドロップダウンまたは 「本文」 ドロップダウンをクリックして、フォントを選択します。
  3. 「保存」 をクリック

 

手順2|顧客アカウントの有効化

顧客アカウントの有効化とは、ユーザーが商品を購入する際に会員登録を必須にするかどうかの設定です。
会員登録は「必須・任意・無効」の3パターンあり、ブランドや商品の特性によって設定するか決めましょう。

Shopifyのチェックアウト機能を最大限利用するためには、顧客アカウントの有効化を必須または任意にしておくことをおすすめします。
その理由は2つあり、1つ目は顧客情報を資産としてストックしておけるからです。長期的な視点で売上を伸ばしていくためには既存顧客リストからのマーケティングが必須になります。

2つ目はリピートしたお客様に再度情報入力をする手間をかけさせないためです。アカウントの有効化をすると次回購入時にフォームの自動入力が行われるため、お客様自身の負担を軽減し、顧客満足度の向上に貢献します。

引用:Shopify管理画面

顧客アカウントの有効化設定は、
Shopify管理画面の「設定」>「チェックアウト」>「顧客アカウント」から行えます。

 

手順3|お客様への連絡方法

お客様への連絡方法では、SMSやメールなどユーザーに対するチェックアウト時の連絡方法を選択します。

 

手順4|お客様情報

お客様情報では、ユーザーがチェックアウトで入力する項目の詳細を設定することができます。例えば、名前を姓のみで設定したり、配送先の住所の電話番号を表示させることが可能です。

 

手順5|チップ

チップとは海外のウェイトレスのサービスに対して支払うお金のことで、日本では一般的ではない文化です。
Shopifyでは購入金額の○%をチップとして3パターン設定でき、お客様が選択できる仕組みになっています。

越境ECなどの海外に住んでいるお客様がターゲットになる商品を扱っている事業者は設定してみると良いでしょう。

 

手順6|注文処理

「お客様のチェックアウト時」の項目は、両方ともチェックボックスにチェックを入れましょう。そうすることで、お客様がチェックアウト時に入力する住所が自動で入力されます。

「注文の支払い後」では、どのように注文を処理するかを選択します。
「注文の項目を自動で発送する」は、デジタル商品やフルフィルメントサービスを使用しているなど、自分で配送処理をしない場合にチェックを入れます。

上記に限らず、自分で商品の配送を行う場合は、「注文の項目を自動でフルフィルメントしない」を選択し、手動で配送処理を行います。「注文のギフトカードのみを自動で発送する」は、ギフトカードのみ自動で配送されます。
注文の処理が完了したら、注文内容を自動的にアーカイブすることができます。もし手動でアーカイブしたい場合は、「注文を自動でアーカイブする」からチェックを外してください。

 

手順7|Eメールマーケティング

Eメールマーケティングを設定すると、取引後、お客様に対してメール配信がスタートします。
ただ、メールの開封率は年々下がっています。

その代替サービスとしてLINE公式アカウントを利用しながら、顧客と接点を持つ工夫をするEC事業者が増えてきています。
通常LINE公式アカウントとShopifyにおいて、顧客情報や商品販売を連携できませんが「DMMチャットブースト」を利用することでそれらが可能になり、売上を最大化することができます。

 

手順8|カゴ落ち

カゴ落ちとは、カートに商品を追加した後、何かしらの理由で離脱してしまったお客様のことです。
カゴ落ちした顧客に対して、カゴ落ちを知らせるメールを送ることができます。対象者とメールを送るタイミングを選択します。タイミングのおすすめは10時間後です。

また、「メールアドレスをカスタマイズ」をクリックすると、送るカゴ落ちメールの内容を編集することができます。
メールの内容は簡単に変更可能なので、開封される可能性を高められるよう工夫しましょう。

 

手順9|ストアポリシーの追加

ストアポリシーに入力する内容は

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

の5つです。

Shopifyの管理画面から「設定 > 法的関連」をクリックし、編集ページで5つのポリシーを入力しましょう。
「特定商取引法に関する表記」以外は英語版のテンプレートなので、テンプレートを探す手間がかかることを覚えておきましょう。

 

手順10|テスト注文で確認する

Shopifyの管理画面から「設定 > 決済」をクリックします。Shopify Paymentsの横にある「管理する」をクリックし、画面下部にある「テストモードを使用する」にチェックを入れて保存します。これでテストモードが実行されています。

このテストモードでは最終的にチェックアウト機能が動いているか確認するために行います。公開後にエラーがおきてしまうとせっかく購入しようと思ってくれたお客様の期待を裏切ることになるので必ず実行してください。

次に、オンラインストアのプレビューを開き、実際に商品を購入します。決済情報は以下のどれかを入力してください。

カード名 カード番号 有効期限 CVC
Visa 4242 4242 4242 4242 将来の日付 任意の3桁
Mastercard 5555 5555 5555 4444 将来の日付 任意の3桁
American Express 3782 8224 6310 0005 将来の日付 任意の3桁

 

決済が完了したら、チェックアウトで入力したメールアドレスに通知が届くので確認しましょう。
次に、Shopifyの管理画面に戻り「注文管理」をクリックします。

注文管理画面で、購入者の情報や配送の状況を確認することができます。
「発送済みとしてマークする」をクリックし、追跡番号など必要な情報を入力したら「アイテムをフルフィルメントする」をクリックして完了です。テスト注文をして問題がなければ、チェックアウトのカスタマイズもこれで完了です。

 

【Shopifyチェックアウト】チェックアウトページを構築する際のポイント

ここではShopifyのチェックアウトページを構築する際のポイントについて解説していきます。
チェックアウトページを構築する際のポイントは大きく5つです。

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

Shopifyでチェックアウトページを構築する際のポイント①「チェックアウトのスタイルをカスタマイズする」

チェックアウトのスタイルをカスタマイズすることを簡単に言うと、フォームの見た目をブランドや商品に合ったものにすることです。
当たり前だと思われるかもしれませんが、見た目をよりよいものにすることは非常に重要です。なぜなら、ここに注力できないと商品を購入するまであと一歩のところまで来ているお客様が離脱してしまう可能性が高まるからです

そして、チェックアウトページができた後も改善し続けることをおすすめします。定期的に離脱しているユーザーがいないか。
いるとしたら原因を突き止め、少しでも離脱するユーザーを減らしていきましょう。

 

Shopifyでチェックアウトページを構築する際のポイント②「多言語対応に変更する」

商品によっては多言語対応のチェックアウトページにした方が良いものもあります。
例えば、日本の製品を海外で売る越境ECなどはその代表例です。

日本の製品はmade in Japanと呼ばれているように、信頼性が高いため、家電や漫画、食料品やアパレルなどの商品は海外で売られることが多いです。そのような商材を取り扱っているEC事業者は、時期や海外ニーズを見て多言語対応に変更することが売上をさらに伸ばす秘訣です。

Shopifyでチェックアウトページを構築する際のポイント③「ストアポリシーを追加する」

オンラインショップは今でこそ当たり前ですが、依然としてお客様の事業者に対する不安感は残っています。
そこでShopifyストアでは「返金ポリシー」「プライバシーポリシー」「利用規約」「配送ポリシー」「特定商取引法に基づく表記」を記載し、知名度がなくとも安心して購入してもらえるようにしておく必要があります。

 

Shopifyでチェックアウトページを構築する際のポイント④「テスト注文を行う」

チェックアウトの設定が一通り完了したら、テストを走らせて不備がないかを確認します。
この工程を飛ばしてサイトを公開してしまい、後々エラーが発生した場合、大きな機会損失になり、お客様の信頼を失いかねません。

そうならないためにも、チェックアウトページのテスト注文は必ず行いましょう。

Shopifyでチェックアウトページを構築する際のポイント⑤「お客様アカウントの有効化もしくは無効化を行う」

アカウントの有効化とはすなわち「会員登録」を必須にするかを決めることです。
会員登録を必須にすると、手間を嫌うお客様や個人情報の提供に否定的なお客様の離脱率が上がるというデメリットがあります。

一方で、顧客情報を活用したマーケティング活動ができることや次回購入時に登録した情報を元にした自動入力がされ手間が省けるというメリットがあります。リピートに至るお客様の満足度を高めるためには、アカウントの有効化をし、会員登録で得た情報からマーケティング活動を行うことが重要です。

Shopify事業者のマーケティング活動はこのリピートをしてくれるお客様をいかに増やすかが課題になります。

DMMチャットブーストではshopifyの構築に関する記事もございますので、ぜひご覧ください。

Shopifyチェックアウトに関するQ&A

Shopifyのチェックアウトとは?

チェックアウトとは、購入を確定し支払いを完了するフォームのことです。

ユーザーはカートに商品を追加した後、チェックアウト画面を使用して、連絡先・住所などの配送に関する情報と、クレジットカード番号などの決済手段を入力します。

Shopifyのチェックアウト画面はカスタマイズできる?

Shopifyのチェックアウト画面でカスタマイズできる項目は、プランによって異なります。

全プラン共通でカスタマイズできる項目には、「背景カラーや文字の変更」「バナーやロゴの設定」などが挙げられます。

チェックアウトのスタイルをカスタマイズする方法は?

Shopify管理画面の「テーマ」>「カスタマイズ」>「テーマ設定」>「チェックアウト」から、バナー・ロゴ・フォント・色などの設定が可能です。

【Shopifyチェックアウト】 機能を活用して快適なショップ運営を目指そう

今回はShopifyのチェックアウトページの構築からカスタマイズ方法、構築の際の注意点を解説してきました。また、お客様に快適にショップを利用してもらい、離脱を防ぐためにチェックアウトのカスタマイズや管理の仕方については必ず理解しておくべきであるとお伝えしました。

またShopifyを利用する際は、機能を色々と自動化できるDMMチャットブーストの利用がおすすめです。一度購入に至ったお客様に対して効果的なアプローチが可能です。メルマガの数倍のメッセージ開封率が特徴のLINE公式アカウントとShopifyを繋ぐサービスになります。

気になる方は14日間無料でお試しできるため、ぜひ詳しく見るボタンをクリックして見てください。 

DMMチャットブーストではshopifyで導入できるAmazon Payに関する記事もございますので、ぜひご覧ください。

DMMチャットブーストforEC