2019年7月より、以下2つのショッピングカートの名称変更をしました。一部のページにて、旧名称が残っている箇所がありましたら、申し訳ございません。随時変更していきます。
①変更前:スマホカゴ → 変更後:ゼロステップカート
②変更前:PCカゴ → 変更後:3ステップカート
- ゼロステップカートの特徴
- ご利用時の画面遷移図
- 動作推奨環境
- 注意事項
- 「カゴに入れる」ボタンHTMLソース取得方法
- 通常のHTMLソース取得方法
- シンクロHTMLソース取得方法
- シンクロHTMLソースのデザイン設定
- 従来の「3ステップカート」からの切り替え
- 「ゼロステップカート」の通常HTMLソースへの切り替え
- 「ゼロステップカート」のシンクロHTMLソースへの切り替え
- その他
- 「ゼロステップカート」デザイン設定
- 「ゼロステップカート」の「カゴの中身を見る」機能
- コンバージョンタグの設定や出力について
目次
ゼロステップカートの特徴
ゼロステップカートには、以下の様な特徴があります。
- ゼロステップカート専用のHTMLソースをホームページに設置することで、ゼロステップカートの購入手続き画面と「カゴに入れる」ボタンのご利用が可能となります。シンクロカゴやページ自動生成機能(CMS)をご利用中の方はカゴ貼り替えは不要で、フラグ変更のみで全ての3ステップカートがゼロステップカートに切り替わります。
>>シンクロカゴの変更はコチラ
>>CMSの変更はコチラ - 購入手続き画面は遷移数が多いと、離脱や購入率低迷の原因となると言われております。e-shopsのゼロステップカートは、Ajaxと呼ばれる「非同期通信」を利用して、1つの画面内で購入者情報入力、配送選択、支払方法選択などを行ない、画面遷移をなくし 『ステップゼロ式』を実現させています。
- Google推奨の常時SSL(WEBサイトをまるごとhttps://から始まるURLで公開する)にも対応しています。
- レスポンシブ化したことにより、全デバイスで購入しやすい画面構成となっております。
- 購入完了までのEFO(エントリーフォーム最適化)を施し、入力ミスをなるべく無くせるように、シンプルにしました。
- 離脱の原因を取り除く施策として、エラーが生じた場合には、どこがエラーとなっているかを赤く目立たせ、エラーの対象項目の近辺まで自動スクロールし、購入時のストレスを軽減できるようにアプローチしました。
- 郵便番号入力すると、自動で住所入力を補完します。
- よくある「メールアドレスの誤入力」を軽減させるため、入力中に入力文字をプレビューで大きめに表示しています。
- 各種ボタンやフォームを、モバイル端末でタップしやすい大きさにしています。
- 購入手続き画面における各種ボタンカラーの指定、文字色やサイズ変更、文言変更などが行なえるようになっております。(ショップロゴ画像の表示機能は未だご用意がございませんが、今後公開する予定で進めております。)
- 購入手続き画面内では、画面上部や固定フッダに合計金額が表示されております。この合計金額は、商品追加、ラッピング追加、ポイント利用、クーポン利用したりするとリアルタイムで表示が変動します。
- ゼロステップカート限定の機能として、会員登録や会員ログインについてのボタンやフォームを、表示/非表示化するご設定が行なえます。設定はコチラ
ご利用時の画面遷移
以下は、購入手続き画面の遷移図です。注文確認画面はモーダル表示となりますので、画面遷移せずに注文手続きを完了させることができます。
クレジットカード決済を始めとする外部決済サービスとの連動は、ゼロステップカートでは以下と連動できます。恐れ入りますが、楽天ペイ、クロネコwebコレクトAPI方式はご利用不可となり、連動できません。
ゼロステップカートで連動可能な決済サービス一覧
決済サービスの導入には、必ずサービス提供元の会社様と直接ご契約いただく必要があります。
No | 決済種別 | 対応状況 |
---|---|---|
1 | SBペイメントサービス(トークン式) | クレジットカード決済 |
2 | SBペイメントサービス(リンク式) | クレジットカード決済,キャリア決済,WEBコンビニ決済,PayPayオンライン決済 |
3 | NPカード+NPコネクトライト | クレジットカード決済 |
4 | NP後払い | コンビニ払い |
5 | Zeus LinkPoint | クレジットカード決済 |
6 | りそなPayResort(トークン式) | クレジットカード決済 |
7 | りそなPayResort(リンク式) | クレジットカード決済,コンビニ決済,銀行決済(Pay-easy),銀行振込決済 |
8 | EC決済ソリューション | クレジットカード決済,コンビニ決済,ペイジー決済 |
9 | PayPal | クレジットカード決済 |
10 | GMO決済 | クレジットカード決済,コンビニ決済,Pay-easy決済,Mobile Edy決済,モバイルSuica決済 |
11 | クロネコwebコレクト(トークン式) | クレジットカード決済 |
12 | クロネコWebコレクト(リンク式) | クレジットカード決済,コンビニ決済 |
13 | クロネコ代金後払いサービス | コンビニ・郵便局払い |
14 | ソニーペイメントサービス(トークン式) | クレジットカード決済 |
15 | ソニーペイメントサービス(リンク式) | 収納代行 |
16 | atone(アトネ) | Loppi/Fami ポート,電子バーコード,はがき請求書,口座振替 |
17 | PayPay | PayPayオンライン決済 |
18 | 楽天銀行マルチペイメントサービス | クレジットカード決済,コンビニ決済 |
19 | ペイジェント決済代行サービス | クレジットカード決済,コンビニ決済,ATM決済(ペイジー),銀行ネット決済,あと払い(ペイディ),PayPay |
20 | あと払い(ペイディ) | コンビニ払い,銀行振込,口座振替 |
「トークン式」の決済サービスとゼロステップカートを連動したときの画面遷移
以下の決済サービスをお支払方法としてご選択した際の画面遷移です。注文手続きの流れで、決済手続きまで完了できるので、カゴ落ち対策にもなります。
▼トークン式決済サービス一覧
- SBペイメントサービス(クレジットカード決済)
- クロネコwebコレクト(クレジットカード決済)
- ソニーペイメントサービス(クレジットカード決済)
- りそなPayResort(クレジットカード決済)
- ペイジェント決済代行サービス(クレジットカード決済)
「リンク式」の決済サービスとゼロステップカートを連動したときの画面遷移
以下の決済サービスをお支払方法としてご選択した際の画面遷移です。
トークン式決済とは大きく異なり、注文確定後に決済手続きを行なうフローとなります。決済手続きが未完了の状態でも、e-shopsカートSの管理画面に受注として入ってきます。
▼リンク式決済サービス一覧
- SBペイメントサービス(クレジットカード決済,キャリア決済,WEBコンビニ決済,PayPayオンライン決済)
- NPカード+NPコネクトライト(クレジットカード決済)
- Zeus LinkPoint(クレジットカード決済)
- りそなPayResort(クレジットカード決済,コンビニ決済,銀行決済(Pay-easy),銀行振込決済)
- EC決済ソリューション(クレジットカード決済,コンビニ決済)
- PayPal(クレジットカード決済)
- GMO決済(クレジットカード決済,コンビニ決済,Pay-easy決済,Mobile Edy決済,モバイルSuica決済)
- クロネコWebコレクト(クレジットカード決済,コンビニ決済)
- クロネコ代金後払いサービス(コンビニ・郵便局決済)
- 楽天銀行マルチペイメントサービス(クレジットカード決済,コンビニ決済)
- ペイジェント決済代行サービス(クレジットカード決済,コンビニ決済,ATM決済(ペイジー),銀行ネット決済,あと払い(ペイディ),PayPay)
動作推奨環境
ゼロステップカート購入手続き画面の動作保証環境を以下にご案内します。
モバイル端末
- iPhone/iPad(OS:iOS9以降、ブラウザ:Safari最新版、GoogleChrome最新版)
- Android(OS:Android5.0以降、ブラウザ:FireFox最新版、GoogleChrome最新版)
※端末の標準ブラウザやアプリ内ブラウザは動作保証外となります。
PC端末
- Windows OS:Windows8 以降
- ブラウザ:Edge、GoogleChrome最新版、FireFox最新版
- Mac OS:MacOS X 10.10 以降
- ブラウザ:Safari最新版、GoogleChrome最新版、FireFox最新版
注意事項
- スタンダードプラン・ビジネスプラン・エキスパートプランにてゼロステップカートのご利用が可能です。
ベーシックプランのご契約で、ゼロステップカートに商品を入れるとエラーが表示され、購入手続きを進めることが出来ません。
ゼロステップカートご利用にあたって、e-shopsカートSの月額費用と初期費用以外に別途発生する費用はございません。 - ゼロステップカートは、定期購入及びギフト機能にある「複数配送先へ送る機能」には、非対応です。
別送には対応しています。 - 従来の3ステップカートでは連動可能な決済サービスでも、ゼロステップカートではご利用不可の決済サービスがございます。
連動可能な決済サービスはコチラをご参照下さい。 - ゼロステップカートは専用のカゴソース(HTMLソース)を管理画面から取得し、ホームページに貼り付けていただくことでご利用可能となります。
従来からご用意のある3ステップカートとは別のソースです。 - 送料や手数料は、確認画面(モーダル)で始めて表示されます。
- 送料は、確認画面(モーダル)を表示しないと算出できない仕組みのため、「レビューを書いたら送料無料」や「レビューを書いたら送料値引き」の特典も加味した金額は、確認画面(モーダル)でご確認ください。
- ゼロステップカートの購入手続き画面内のデザイン設定など、一部を除いて、3ステップカートとゼロステップカートのご設定は、基本的に管理画面で共通となります。
極力、シンプルな構成とするため、ゼロステップカートでは一部反映されない項目がございます。
管理画面の該当する項目にて「*3ステップカートのみ表示」と表記されています。ご設定時にご確認下さい。 - 既にカゴに入れた商品と同じ商品がカゴに入った場合、『既にカゴに入っている商品のため、カゴ内で数量変更して下さい』とのコメントが表示されます。
ただし、属性が設定されている商品(単純属性)だけは、同一商品の有無をシステムが判定できないため、別商品がカゴに入る時と同じように表示されます。 - 購入手続き画面内のセッションは、最後にアクセスしたときから約60分保持します。
3ステップカートや定期購入カゴもセッションの持続時間はゼロステップカートと同じですが、それぞれ別セッションとなります。
なお、カート内の商品情報については、最後にアクセスしたときから同一ブラウザ上で保持する期間を1日~最大30日間のショップ様任意の日数で設定することが可能です(カートの商品保持期間設定はこちら) - 色やサイズ変更など、ある程度のデザイン指定は行なえますが、購入手続き画面全体のHTMLやCSSを直接編集することは出来ません。
ゼロステップカート「カゴに入れる」ボタンHTMLソース取得方法
まずはじめに、3ステップカートや定期購入カゴと同様にショップの基本設定と商品登録は、何よりも先に行なわなければゼロステップカートのHTMLソースは発行されませんので、取得できません。
HTMLソースは「通常カゴ」と「シンクロカゴ」がございます。
シンクロカゴとは?
管理画面における商品属性の変更や在庫数の変更をリアルタイムでネットショップの商品ページに反映する仕組み・機能をシンクロカゴと呼んでいます。シンクロカゴ用でない、通常の「カゴに入れる」ボタンHTMLソースを商品ページに貼り付けた場合、管理画面での商品属性(サイズや色などのバリエーション)変更をした際は「カゴに入れる」ボタンのHTMLソースの貼替が必要になります。シンクロカゴ用の「カゴに入れる」ボタンHTMLソースをご利用いただくとそのような場合でも、商品属性情報がリアルタイムで反映されHTMLソースの貼替作業が不要となるとても便利な機能です。また、リアルタイムで商品在庫を反映表示する事も可能です。
ゼロステップカートの通常のHTMLソース取得方法
1.商品管理>商品一覧>カゴ をクリックします。
→ゼロステップカート タブが選択された状態で表示されます。
2.必要に応じて以下の各項を入力し、「更新」をクリックします。
文字コード設定 | Shift-JIS、EUC-JP、UTF-8から選択します。HTMLソースを設置する商品ページの文字コードに合わせてください。 |
ボタンの色 | 「カゴに入れる」ボタンの色を選択します。文字色もボタン色に併せて自動で変更します。 ボタンをオリジナル画像に変更する場合には、コチラをご覧ください。 |
お問い合わせボタン表示 | 「商品に関するお問い合わせ」ボタンを表示する場合に選択します。 |
数量指定箇所 |
|
→「更新しました。」とメッセージが表示されます。
表示されているHTMLソースを選択しコピーし、商品ページに貼り付けてご利用ください。
ゼロステップカート(シンクロ)の「カゴに入れる」ボタンHTMLソース取得方法
1.「買い物カゴソース」画面を表示します。
2.「シンクロカゴ」タブをクリックします。
→HTMLソース(3ステップカート、ゼロステップカート共通)が表示されます。
必要に応じて設定を変更し「更新」ボタンをクリックした上で、表示されているHTMLソースを選択しコピーし、商品ページに貼り付けてご利用ください。
文字コード設定 | HTMLソースを設置する商品ページの文字コードに合わせてください。 |
ゼロステップカート(シンクロ)のデザイン設定
設定変更は、全てのシンクロカゴの表示に反映されます。特定商品のみの個別変更は行えません。
1.デザイン>シンクロカゴ設定をクリックします。
→シンクロカゴ設定画面が表示されます。
設定変更の確定前にプレビューで表示確認出来ます。
最初に「5.カゴタイプ設定」において「ゼロステップカート」にし「プレビューを更新」を押下すると、イメージしていただきやすいかもしれません。
「1.レイアウト設定」から順にカラー等をご変更のうえ、都度、プレビュー欄の「プレビューを更新」をクリックしてご確認下さい。
サンプル商品選択箇所で、プレビューするサンプル商品の在庫管理や在庫数を変更できます。
→下のプレビュー箇所に、入力した設定が反映されたサンプルが表示されます。
1.レイアウト設定
表示項目 | シンクロカゴの表示箇所で表示する項目にチェックを入れます。
|
属性の配置 | 属性(バリエーション)のプルダウンが複数ある場合の表示を選択します。 |
文字設定 | 文字サイズ・文字色を指定します。 |
ボタンの色 | 「カゴに入れる」ボタンの色を選択します。文字色もボタン色に併せて自動で変更します。
ボタンをオリジナル画像に変更する場合には、コチラをご覧ください。 |
項目の表記 | 呼び出される項目の項目名部分を指定します。 |
個数入力設定 | 商品を追加する際に指定する数量の入力方法を指定します。
|
2.在庫切れ時のコメント
全半角~20文字
在庫が0になった際の在庫欄の表示文字と文字色を指定します
3.在庫表示のみ利用する
在庫表示のみ利用する場合にチェックします。
属性別在庫管理商品の場合、在庫表が非表示となっていると何も出力されません。
4.受注発注商品用コメント
全半角~20文字
在庫管理しない設定となっている商品の在庫欄の表示文字を指定します。5.カゴタイプ設定
カゴタイプを切り替えられます。
シンクロカゴはHTMLソースの貼り替えが不要ですので、ホームページに既に貼り付けしてある「カゴに入れる」ボタンは、こちらの設定で一括切り替えできます。
6.各項目を設定し、最下部「設定する」ボタンをクリックします。
従来のカゴ(3ステップカート)からの切り替え
従来の3ステップカートからゼロステップカートに切り替える場合には、HTMLソースが異なりますので、貼り替えが必要ですが、ホームページの構成によっては、一括変更できる場合がございます。
少しでもお手間を軽減できるようにと考え、以下の機能をご提供させていただいておりますので、ご活用下さい。
ゼロステップカート(通常のHTMLソース)への切り替え -ゼロステップカート一括貼替用JS-
ゼロステップカートに変更したいページ(HTML)の<head>~</head>の中に、弊社でご用意のある以下の「ゼロステップカート一括貼替JS」のコードを貼り付けて頂くことで、一括で切り替えることが出来ます。
- ・全ての環境での動作を保証するものではございません
- ・貼り付けたページ内にある3ステップカートは全てゼロステップカートとして取り扱います
- ・旧サービス(e-shopsカート)からの移行で、過去に「カゴのリダイレクト機能」を使用し、カゴソースを貼り替えせずにそのままご利用いただいている場合、ゼロステップカート一括JSは動作しません。(カゴソースが旧サービスのものとなっているため。)
WordPressなどで、全ページに共通のヘッダを出力する構成としているホームページでしたら、一ヶ所に当該JSのコードを貼り付けていただくだけで、全ページの「カゴに入れる」ボタンをゼロステップカートに切り替えることもできたりします。
1.商品管理>商品一覧>カゴ をクリックします。
→ゼロステップカート タブが選択された状態で表示されます。
2.ゼロステップカート一括貼替用JS>コード よりコピーし、対象のページの<head>~</head>の中に挿入されるように貼り付けます。
ゼロステップカート(シンクロカゴのHTMLソース)への切り替え
シンクロカゴは、以下のご設定だけで簡単に切り替えられます。通常カゴのように専用のJSコードをご設置いただく必要はありません。
- ・ホームページに設置のある3ステップカートは全てゼロステップカートとして取り扱います
- ・旧サービス(e-shopsカート)からの移行で、過去に「カゴのリダイレクト機能」を使用し、カゴソースを貼り替えせずにそのままご利用いただいている場合でも、シンクロカゴでしたら、「5.カゴタイプ設定」にて「ゼロステップカート」にすることで一括変更できます。
1.デザイン>シンクロカゴ設定をクリックします。
→シンクロカゴ設定画面が表示されます。
2.カゴタイプ設定
カゴタイプを切り替えられます。
シンクロカゴはHTMLソースの貼り替えが不要ですので、ホームページに既に貼り付けしてある「カゴに入れる」ボタンは、こちらの設定で一括切り替えできます。
3.画面最下部「設定する」ボタンをクリックします。
その他
ゼロステップカートにおけるご設定は、カート内のデザイン設定を除いて、基本は各種管理画面のご設定が従来の3ステップカートと共通となります。
ゼロステップカートでは一部反映されない項目がございますが、管理画面の該当する項目にて「*3ステップカートのみ表示」と表記されています。ご設定時にご確認下さい。
ゼロステップカートデザイン設定
購入手続き画面内のデザイン変更は、「カゴに入れる」ボタンの画像変更、コメントや備考欄の追加は、以下のボタンをクリックした先の画面にて、ご操作方法をご確認下さい。
ゼロステップカートの「カゴの中身を見る」機能
ゼロステップカート専用の「カゴの中身をみる」機能のHTMLソースを取得する画面は、以下のボタンをクリックした先にてご操作方法をご確認下さい。
ゼロステップカートにおけるコンバージョンタグの設定や出力
アフィリエイトについて
注文確定した時の『注文完了(サンクス)画面』にコンバージョンタグが出力されます。なお、アフィリエイトの設定は、「管理画面 > 販売管理 > アフィリエイト」にて行います。
対応しているサービスは、A8とバリューコマース、アドリンクの3つです。
コンバージョンタグについて
注文確定した時の『注文完了(サンクス)画面』にコンバージョンタグが出力されます。
コンバージョンタグの設定は、「管理画面 > 販売管理 > コンバージョンタグ」 にて行います。
対応しているサービスは、Google広告(旧Adwords)とYahoo!リスティング広告のみとなります。
Google Analyticsについて
購入者情報入力画面と注文完了画面にご設定されたトラッキングコードが出力されます。
注文完了画面には、e-commerce に対応したトラッキングコードを出力します。
e-shopsカートSでは、タグマネージャには非対応ですが、 グローバルサイトタグ(gtag.js)のクロスドメイン計測には対応しております。 >>詳しくはコチラ
購入完了画面をコンバージョンとして設定している場合、目標URL の変更や追加が必要です。
(目標設定は、Google Analyticsにて、複数ご設定できます。
従来の3ステップカート経由のご注文と、ゼロステップカート経由のご注文両方をそれぞれコンバージョンとして取得することもできます。)
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における解析タグの各種ご設定方法は、以下よりご確認ください。