3ステップカート(旧名称:PCカゴ)

【予告】3ステップカートのレスポンシブ対応を予定しています

3ステップカートのレスポンシブ対応に関する詳細はこちらのページをご確認ください。

2019年7月より、以下2つのショッピングカートの名称変更をしました。一部のページにて、旧名称が残っている箇所があり、申し訳ございません。随時変更していきます。

①変更前:スマホカゴ → 変更後:ゼロステップカート

②変更前:PCカゴ → 変更後:3ステップカート


e-shopsカートSの「カゴに入れる」ボタン(ショッピングカート機能)は大きく分けて、3ステップカートとゼロステップカートの2種類がありますがこちらでは「3ステップカート」についてご案内します。

3ステップカートをご利用された場合、スマートフォンでも購入できる仕組みとなっておりますが、レスポンシブ対応ではございません。スマートフォンを始めとするより多くの端末にて購入しやすい画面レイアウトは、ゼロステップカート(スタンダードプラン以上の契約が必要)でご利用いただけます。

「カゴに入れる」ボタンは、管理画面より専用のHTMLソースをコピーして、ホームページに貼ってご利用いただく流れとなります。

3ステップカートのHTMLソースは、通常の3ステップカートと3ステップカート(シンクロ)の2種類あります。3ステップカート(シンクロ)は、HTMLソース挿入箇所に管理画面の最新情報が表示されます。在庫や価格が変更となってもHTMLソースを張り替える必要はありません。

3ステップカート・3ステップカート(シンクロ)、それぞれのご利用方法を以下に案内いたします。

3ステップカート「カゴに入れる」ボタンHTMLソース取得方法

1.商品管理をクリックします。

→商品一覧が表示されます。

商品一覧が表示

2.商品右端の「カゴ」ボタンをクリックします。

「カゴ」ボタンをクリック

商品一覧の検索機能についてはコチラをご覧ください。

→「買い物カゴソース」画面が表示されます。

「買い物カゴソース」画面が表示される

3.「3ステップカート」タブをクリックします。

「3ステップカート」タブをクリック

→3ステップカートのHTMLソースが表示されます。

3ステップカートのHTMLソースが表示

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

 

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

3ステップカート(シンクロ)「カゴに入れる」ボタンHTMLソース取得方法

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

「買い物カゴソース」画面を表示

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

「カゴ(シンクロ)」タブをクリック

→3ステップカートのHTMLソースが表示されます。

3ステップカートのHTMLソースが表示

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

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

3ステップカート(シンクロ)のデザイン設定

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

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

管理画面デザイン>シンクロカゴ設定をクリック

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

シンクロカゴ設定画面が表示

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

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

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

(1.レイアウト設定~4.受注発注商品用コメント)を設定し、プレビュー欄の「プレビューを更新」をクリックします。

プレビュー欄の「プレビューを更新」をクリック

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

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

1.レイアウト設定

レイアウト設定

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

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

商品名
商品名の表示
商品コード
商品コードの表示
価格
価格の表示
在庫
在庫数の表示、在庫単位欄在庫数後に表示する単位
質問ボタン
商品に関するお問い合わせボタンの表示
属性の配置 属性(バリエーション)のプルダウンが複数ある場合の表示を選択します。
文字設定 文字サイズ・文字色を指定します。
ボタンの色 「カゴに入れる」ボタンの色を選択します。文字色もボタン色に併せて自動で変更します。
ボタンをオリジナル画像に変更する場合には、コチラをご覧ください。
項目の表記 呼び出される項目の項目名部分を指定します。
個数入力設定 商品を追加する際に指定する数量の入力方法を指定します。
テキストフォーム
テキストフィールド形式に数値入力となります 。
プルダウン(セレクター)
プルダウン形式の数値入力となります。
プルダウンの選択肢をオプション数欄に指定ください。
1~100までを選択肢とする場合:1-100    
10,20,30を選択肢とする場合:10,20,30
「カゴに入れる」ボタンで
ひとつだけ商品を入れる
「カゴに入れる」ボタンのみ表示され、数値指定が非表示となります。

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

在庫切れ時のコメント

全半角~20文字

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

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

在庫表示のみ利用する

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

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

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

受注発注商品用コメント

全半角~20文字

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

定期購入を利用している場合

定期購入設定を有効にしているショップ様の環境で表示されます。 定期購入を利用している場合

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

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

商品名
商品名の表示
商品コード
商品コードの表示
価格
価格の表示
在庫
在庫数の表示、在庫単位欄在庫数後に表示する単位
質問ボタン
商品に関するお問い合わせボタンの表示
初回購入価格
商品登録時に「初回購入価格」として設定した価格が表示
2回目以降購入価格
商品登録時に「2回目以降購入価格」として設定した価格が表示
配送回数
商品登録時に設定された配送回数が表示
項目の表記 呼び出される項目の項目名部分を指定します。