スマホカゴ

スマホカゴの特徴

スマホカゴには、以下の様な特徴があります。

  • スマホカゴ専用のHTMLソースをホームページに設置することで、スマホカゴの購入手続き画面と「カゴに入れる」ボタンのご利用が可能となります。シンクロカゴやページ自動生成機能(CMS)をご利用中の方はカゴ貼り替えは不要で、フラグ変更のみで全てのPCカゴがスマホカゴに切り替わります。
    >>シンクロカゴの変更はコチラ    >>CMSの変更はコチラ
  • 購入手続き画面は遷移数が多いと、離脱や購入率低迷の原因となると言われております。e-shopsのスマホカゴは、Ajaxと呼ばれる「非同期通信」を利用して、1つの画面内で購入者情報入力、配送選択、支払方法選択などを行ない、画面遷移をなくし 『ステップゼロ式』を実現させています。
  • Google推奨の常時SSL(WEBサイトをまるごとhttps://から始まるURLで公開する)にも対応しています。
  • レスポンシブ化したことにより、全デバイスで購入しやすい画面構成となっております。
  • 購入完了までのEFO(エントリーフォーム最適化)を施し、入力ミスをなるべく無くせるように、シンプルにしました。
  • 離脱の原因を取り除く施策として、エラーが生じた場合には、どこがエラーとなっているかを赤く目立たせ、エラーの対象項目の近辺まで自動スクロールし、購入時のストレスを軽減できるようにアプローチしました。
  • 郵便番号入力すると、自動で住所入力を補完します。
  • よくある「メールアドレスの誤入力」を軽減させるため、入力中に入力文字をプレビューで大きめに表示しています。
  • 各種ボタンやフォームを、モバイル端末でタップしやすい大きさにしています。
  • 購入手続き画面における各種ボタンカラーの指定、文字色やサイズ変更、文言変更などが行なえるようになっております。(ショップロゴ画像の表示機能は未だご用意がございませんが、今後公開する予定で進めております。)
  • 購入手続き画面内では、画面上部や固定フッダに合計金額が表示されております。この合計金額は、商品追加、ラッピング追加、ポイント利用、クーポン利用したりするとリアルタイムで表示が変動します。
  • スマホカゴ限定の機能として、会員登録や会員ログインについてのボタンやフォームを、表示/非表示化するご設定が行なえます。設定はコチラ

ご利用時の画面遷移

以下は、購入手続き画面の遷移図です。注文確認画面はモーダル表示となりますので、画面遷移せずに注文手続きを完了させることができます。

クレジットカード決済を始めとする外部決済サービスとの連動は、スマホカゴでは以下の表の通り、現在限られたサービスのみ接続可能となっております。

スマホカゴで連動可能な決済サービス一覧

※決済サービスの導入には、必ずサービス提供元の会社様と直接ご契約いただく必要があります。

スマホカゴで連動可能な決済サービス一覧表
No 決済種別 対応状況
1 SBペイメントサービス(トークン式) クレジットカード決済
2 SBペイメントサービス(リンク式) クレジットカード決済,キャリア決済,WEBコンビニ決済
3 NPカード+NPコネクトライト クレジットカード決済
4 NP後払い コンビニ払い
5 Zeus LinkPoint クレジットカード決済
6 りそなPayResort クレジットカード決済,コンビニ決済,銀行決済(Pay-easy),銀行振込決済
7 EC決済ソリューション クレジットカード決済,コンビニ決済,ペイジー決済
8 PayPal クレジットカード決済
9 GMO決済 クレジットカード決済,コンビニ決済,Pay-easy決済,Mobile Edy決済,モバイルSuica決済
10 クロネコWebコレクト(リンク式) クレジットカード決済,コンビニ決済
11 クロネコ代金後払いサービス コンビニ・郵便局払い
12 クロネコwebコレクト トークン方式 クレジットカード決済
13 VeriTrans Air-Direct クレジットカード決済,コンビニ決済

上記以外の従来のPCカゴと連動可能な決済サービスには、2019年上半期中に順次、対応していく予定です。

「トークン式」の決済サービスとスマホカゴを連動したときの画面遷移

以下の決済サービスをお支払方法としてご選択した際の画面遷移です。注文手続きの流れで、決済手続きまで完了できるので、カゴ落ち対策にもなります。

▼トークン式決済サービス一覧

  • SBペイメントサービス(クレジットカード決済/トークン式)
  • クロネコwebコレクト(クレジットカード決済/トークン式)
  • VeriTrans Air-Direct(クレジットカード決済,コンビニ決済/トークン式)

「リンク式」の決済サービスとスマホカゴを連動したときの画面遷移

以下の決済サービスをお支払方法としてご選択した際の画面遷移です。トークン式決済とは大きく異なり、注文確定後に決済手続きを行なうフローとなります。決済手続きが未完了の状態でも、e-shopsカートSの管理画面に受注として入ってきます。

▼リンク式決済サービス一覧

  • SBペイメントサービス
    (クレジットカード決済,キャリア決済,WEBコンビニ決済/リンク式)
  • NPカード+NPコネクトライト
    (クレジットカード決済)
  • Zeus LinkPoint
    (クレジットカード決済)
  • りそなPayResort
    (クレジットカード決済,コンビニ決済,銀行決済(Pay-easy),銀行振込決済)
  • EC決済ソリューション
    (クレジットカード決済,コンビニ決済)
  • PayPal
    (クレジットカード決済)
  • GMO決済
    (クレジットカード決済,コンビニ決済,Pay-easy決済,Mobile Edy決済,モバイルSuica決済)
  • クロネコWebコレクト
    (クレジットカード決済,コンビニ決済/リンク式)
  • クロネコ代金後払いサービス
    (コンビニ・郵便局決済)

動作推奨環境

スマホカゴ購入手続き画面の動作保証環境を以下にご案内します。

モバイル端末

  • iPhone/iPad(OS:iOS9以降、ブラウザ:Safari最新版、GoogleChrome最新版)
  • Android(OS:Android5.0以降、ブラウザ:FireFox最新版、GoogleChrome最新版)
    ※標準ブラウザは動作保証外となります。

PC端末

  • Windows
    OS:Windows7 以降
    ブラウザ:Edge、IE11、GoogleChrome最新版、FireFox最新版
  • Mac
    OS:MacOS X 10.10 以降
    ブラウザ:Safari最新版、GoogleChrome最新版、FireFox最新版

注意事項

  • スタンダードプラン・ビジネスプラン・エキスパートプランにてスマホカゴのご利用が可能です。ベーシックプランのご契約で、スマホカゴに商品を入れるとエラーが表示され、購入手続きを進めることが出来ません。スマホカゴご利用にあたって、e-shopsカートSの月額費用と初期費用以外に別途発生するものはございません。
  • スマホカゴは、定期購入には非対応です。
  • ギフト機能にある「複数配送先へ送る機能」には、非対応です。別送には対応しています。
  • 従来のPCカゴでは連動可能な決済サービスでも、スマホカゴではご利用不可の決済サービスがございます。連動可能な決済サービスはコチラをご参照下さい。
  • スマホカゴは専用のカゴソース(HTMLソース)を管理画面から取得し、ホームページに貼り付けていただくことでご利用可能となります。従来からご用意のあるPCカゴとは別のソースです。
  • 送料や手数料は、確認画面(モーダル)で始めて表示されます。
  • 送料は、確認画面(モーダル)を表示しないと算出できない仕組みのため、「レビューを書いたら送料無料」や「レビューを書いたら送料値引き」の特典も加味した金額は、確認画面(モーダル)でご確認ください。
  • スマホカゴの購入手続き画面内のデザイン設定など、一部を除いて、PCカゴとスマホカゴのご設定は、基本的に管理画面で共通となります。極力、シンプルな構成とするため、スマホカゴでは一部反映されない項目がございます。管理画面の該当する項目にて「*PCカゴのみ表示」と表記されています。ご設定時にご確認下さい。
  • 既にカゴに入れた商品と同じ商品がカゴに入った場合、『既にカゴに入っている商品のため、カゴ内で数量変更して下さい』とのコメントが表示されます。ただ、属性が設定されている商品(単純属性)だけは、同一商品の有無をシステムが判定できないため、別商品がカゴに入る時と同じように表示されます。
  • 購入手続き画面内のセッションは、最後にアクセスしたときから40分保持します。PCカゴや定期購入カゴもセッションの持続時間はスマホカゴと同じですが、それぞれ別セッションとなります。
  • 色やサイズ変更など、ある程度のデザイン指定は行なえますが、購入手続き画面全体のHTMLやCSSを直接編集することは出来ません。
  • 会員マイページ、商品検索フォーム、お問合せフォーム、新規会員登録フォームなどの付属機能については、未だレスポンシブデザインの画面のご用意がございません。

スマホカゴ「カゴに入れる」ボタンHTMLソース取得方法

まずはじめに、PCカゴや定期購入カゴと同様に初期設定商品登録は、何よりも先に行なわなければスマホカゴのHTMLソースは発行されませんので、取得できません。

HTMLソースは「通常カゴ」と「シンクロカゴ」がございます。

シンクロカゴとは?

管理画面における商品属性の変更や在庫数の変更をリアルタイムでネットショップの商品ページに反映する仕組み・機能をシンクロカゴと呼んでいます。シンクロカゴ用でない、通常の「カゴに入れる」ボタンHTMLソースを商品ページに貼り付けた場合、管理画面での商品属性(サイズや色などのバリエーション)変更をした際は「カゴに入れる」ボタンのHTMLソースの貼替が必要になります。シンクロカゴ用の「カゴに入れる」ボタンHTMLソースをご利用いただくとそのような場合でも、商品属性情報がリアルタイムで反映されHTMLソースの貼替作業が不要となるとても便利な機能です。また、リアルタイムで商品在庫を反映表示する事も可能です。

>> シンクロカゴのデザイン設定について

スマホ(通常)カゴの「カゴに入れる」ボタンHTMLソース取得方法

1.商品管理>商品一覧>カゴ をクリックします。

→スマホカゴ タブが選択された状態で表示されます。

2.必要に応じて以下の各項を入力し、「更新」をクリックします。

カゴソース画面 項目表
文字コード設定

Shift-JIS、EUC-JP、UTF-8から選択します。HTMLソースを設置する商品ページの文字コードに合わせてください。

ボタンの色 「カゴに入れる」ボタンの色を選択します。文字色もボタン色に併せて自動で変更します。
ボタンをオリジナル画像に変更する場合には、コチラをご覧ください。
お問い合わせボタン表示 「商品に関するお問い合わせ」ボタンを表示する場合に選択します。
数量指定箇所
テキストフォーム
テキストフィールド形式に数値入力となります 。
プルダウン(セレクター)
プルダウン形式の数値入力となります。
プルダウンの選択肢をオプション数欄に指定ください。
1~100までを選択肢とする場合:1-100    
10,20,30を選択肢とする場合:10,20,30
「カゴに入れる」ボタンで
ひとつだけ商品を入れる
「カゴに入れる」ボタンのみ表示され、数値指定が非表示となります。

→「更新しました。」とメッセージが表示されます。

表示されているHTMLソースを選択しコピーし、商品ページに貼り付けてご利用ください。

スマホ(シンクロ)カゴの「カゴに入れる」ボタンHTMLソース取得方法

1.「買い物カゴソース」画面を表示します。

2.「シンクロカゴ」タブをクリックします。

→HTMLソース(PCカゴ、スマホカゴ共通)が表示されます。

必要に応じて設定を変更し「更新」ボタンをクリックした上で、表示されているHTMLソースを選択しコピーし、商品ページに貼り付けてご利用ください。

シンクロカゴソース画面 項目表
文字コード設定 HTMLソースを設置する商品ページの文字コードに合わせてください。

スマホ(シンクロ)カゴのデザイン設定

設定変更は、全てのシンクロカゴの表示に反映されます。特定商品のみの個別変更は行えません。

1.デザインシンクロカゴ設定をクリックします。

→シンクロカゴ設定画面が表示されます。

設定変更の確定前にプレビューで表示確認出来ます。

最初に「5.カゴタイプ設定」において「スマホカゴ」にし「プレビューを更新」を押下すると、イメージしていただきやすいかもしれません。「1.レイアウト設定」から順にカラー等をご変更のうえ、都度、プレビュー欄の「プレビューを更新」をクリックしてご確認下さい。

サンプル商品選択箇所で、プレビューするサンプル商品の在庫管理や在庫数を変更できます。

→下のプレビュー箇所に、入力した設定が反映されたサンプルが表示されます。

1.レイアウト設定

シンクロカゴのレイアウト設定 項目表
表示項目

シンクロカゴの表示箇所で表示する項目にチェックを入れます。

商品名
商品名の表示
商品コード
商品コードの表示
価格
価格の表示
在庫
在庫数の表示、在庫単位欄在庫数後に表示する単位
質問ボタン
商品に関するお問い合わせボタンの表示
属性の配置 属性(バリエーション)のプルダウンが複数ある場合の表示を選択します。
文字設定 文字サイズ・文字色を指定します。
ボタンの色 「カゴに入れる」ボタンの色を選択します。文字色もボタン色に併せて自動で変更します。

ボタンをオリジナル画像に変更する場合には、コチラをご覧ください。

項目の表記 呼び出される項目の項目名部分を指定します・

2.在庫切れ時のコメント

全半角~20文字

在庫が0になった際の在庫欄の表示文字と文字色を指定します

3.在庫表示のみ利用する

在庫表示のみ利用する場合にチェックします。

属性別在庫管理商品の場合、在庫表が非表示となっていると何も出力されません。

4.受注発注商品用コメント

全半角~20文字

在庫管理しない設定となっている商品の在庫欄の表示文字を指定します。

5.カゴタイプ設定

カゴタイプを切り替えられます。

シンクロカゴはHTMLソースの貼り替えが不要ですので、ホームページに既に貼り付けしてある「カゴに入れる」ボタンは、こちらの設定で一括切り替えできます。

6.各項目を設定し、最下部「設定する」ボタンをクリックします。

従来のカゴ(PCカゴ)からの切り替え

従来のPCカゴからスマホカゴに切り替える場合には、HTMLソースが異なりますので、貼り替えが必要ですが、ホームページの構成によっては、一括変更できる場合がございます。少しでもお手間を軽減できるようにと考え、以下の機能をご提供させていただいておりますので、ご活用下さい。

スマホ(通常)カゴへの切り替え -スマホカゴ一括貼替用JS-

スマホカゴに変更したいページ(HTML)の<head>~</head>の中に、弊社でご用意のある以下の「スマホカゴ一括貼替JS」のコードを貼り付けて頂くことで、一括で切り替えることが出来ます。

  • ・全ての環境での動作を保証するものではございません
  • ・貼り付けたページ内にあるPCカゴは全てスマホカゴとして取り扱います
  • ・旧サービス(e-shopsカート)からの移行で、過去に「カゴのリダイレクト機能」を使用し、カゴソースを貼り替えせずにそのままご利用いただいている場合、スマホカゴ一括JSは動作しません。(カゴソースが旧サービスのものとなっているため。)

WordPressなどで、全ページに共通のヘッダを出力する構成としているホームページでしたら、一ヶ所に当該JSのコードを貼り付けていただくだけで、全ページの「カゴに入れる」ボタンをスマホカゴに切り替えることもできたりします。

1.商品管理>商品一覧>カゴ をクリックします。

→スマホカゴ タブが選択された状態で表示されます。

2.スマホカゴ一括貼替用JS>コード よりコピーし、対象のページの<head>~</head>の中に挿入されるように貼り付けます。

スマホ(シンクロ)カゴへの切り替え

シンクロカゴは、以下のご設定だけで簡単に切り替えられます。通常カゴのように専用のJSコードをご設置いただく必要はありません。

  • ・ホームページに設置のあるPCカゴは全てスマホカゴとして取り扱います
  • ・旧サービス(e-shopsカート)からの移行で、過去に「カゴのリダイレクト機能」を使用し、カゴソースを貼り替えせずにそのままご利用いただいている場合でも、シンクロカゴでしたら、「5.カゴタイプ設定」にて「スマホカゴ」にすることで一括変更できます。

1.デザインシンクロカゴ設定をクリックします。

→シンクロカゴ設定画面が表示されます。

2.カゴタイプ設定

カゴタイプを切り替えられます。シンクロカゴはHTMLソースの貼り替えが不要ですので、ホームページに既に貼り付けしてある「カゴに入れる」ボタンは、こちらの設定で一括切り替えできます。

3.画面最下部「設定する」ボタンをクリックします。

その他

スマホカゴにおけるご設定は、カート内のデザイン設定を除いて、基本は各種管理画面のご設定が従来のPCカゴと共通となります。スマホカゴでは一部反映されない項目がございますが、管理画面の該当する項目にて「*PCカゴのみ表示」と表記されています。ご設定時にご確認下さい。

スマホカゴデザイン設定

購入手続き画面内のデザイン変更は、「カゴに入れる」ボタンの画像変更、コメントや備考欄の追加は、以下のボタンをクリックした先の画面にて、ご操作方法をご確認下さい。

スマホカゴの「カゴの中身を見る」機能

スマホカゴ専用の「カゴの中身をみる」機能のHTMLソースを取得する画面は、以下のボタンをクリックした先にてご操作方法をご確認下さい。

スマホカゴにおけるコンバージョンタグの設定や出力

アフィリエイトについて

注文確定した時の『注文完了(サンクス)画面』にコンバージョンタグが出力されます。なお、アフィリエイトの設定は、「管理画面 > 販売管理 > アフィリエイト」にて行います。対応しているサービスは、A8とバリューコマース、アドリンクの3つです。

コンバージョンタグについて

注文確定した時の『注文完了(サンクス)画面』にコンバージョンタグが出力されます。コンバージョンタグの設定は、「管理画面 > 販売管理 > コンバージョンタグ」 にて行います。対応しているサービスは、Google広告(旧Adwords)とYahoo!リスティング広告のみとなります。

Google Analyticsについて

購入者情報入力画面と注文完了画面にご設定されたトラッキングコードが出力されます。注文完了画面には、e-commerce に対応したトラッキングコードを出力します。

e-shopsでは、グローバルタグ(gtag.js)には非対応ですが、UniversalAnalytics(analytics.js)に対応しております。>>詳しくはコチラ

購入完了画面をコンバージョンとして設定している場合、目標URL の変更や追加が必要です。(目標設定は、Google Analyticsにて、複数ご設定できます。従来のPCカゴ経由のご注文と、スマホカゴ経由のご注文両方をそれぞれコンバージョンとして取得することもできます。)

Google Analyticsの目標設定画面

目標の詳細>到達ページ の設定

e-shopsのスマホカゴを利用した場合は、注文完了画面のURLを以下のように設定します。

目標
先頭が一致 cart.ec-sites.jp/sp_step○/sp-pc/pk04/es_shop_id/○○○/

目標の詳細>目標到達プロセス の設定

e-shopsのスマホカゴを利用した場合は、注文完了までのURLを以下のように設定します。

名前 スクリーン / ページ
ステップ① 購入者情報入力画面 cart.ec-sites.jp/sp_step○/static/cart2/es_shop_id/○○○/

上記、○の部分はショップ様毎に異なります。お手数ですが、実際の購入手続き画面よりURL をご確認ください。なお、Google Analytics の設定は、「管理画面 > 販売管理 > Google Analytics」にて行います。

e-shopsにおける解析タグの各種ご設定方法は、以下よりご確認ください。