［カートに入れる］ボタンをランディングページなどの外部サイトに設置する
管理画面から、各商品の［カートに入れる］ボタン用のHTMLタグを取得できます。
このタグを使えば、特定商品のランディングページなどから「商品詳細」ページを経由せずに、そのままカートへ商品を追加する導線を構築できます。
ユーザーは「気になったらすぐカートへ」進めるため、購入までの流れがスムーズになります。
このカートボタンは、ランディングページだけでなく、WordPressで作成したサイト、ブログ、コマースクリエイター＞フリーページで作成したキャンペーンページなどにも設置可能です。
＜サンプルイメージ＞
futureshop管理画面から取得した［カートに入れる］ボタン用のHTMLタグを張り付けると、 「商品名」「数量」「カートに入れるボタン」 をページに出力できます。
「カート」ボタンを押下すると、futureshopで生成した「ショッピングカート」へ遷移します。
※デザインはCSSでの調整が必要です。
＜目次＞
［カートに入れる］ボタン設定手順（基本手順）
商品検索で該当商品を検索する
操作画面：運用＞商品管理＞商品検索
［カートに入れる］ボタンを設置したい商品を検索します。
商品一覧で該当商品の「HTML」欄にチェック
商品一覧の上部にある「HTMLタグ出力」欄からHTMLを出力する
- 「カートボタン表示」で、「商品ごとにカートボタンを出力」を選択します。
- ［HTMLタグをダウンロード］ボタンを押下します。
- HTMLタグが、テキストファイルでダウンロードされます。
＜取得タグ＞
<form action="https://{店舗様ドメイン}/p/cart/add" method="post">
<input type="hidden" name="products[gd481].productNo" value="gd481">チョコレート
<table border="0" cellspacing="4" cellpadding="0">
<tr>
<td>数量<input name="products[gd481].quantity" type="text" value="" size="5"></td>
</tr>
</table>
<button type="submit">カートへ</button>
</form>
タグの仕様について、さらに詳しいご案内はタグの仕様をご覧ください。
ランディングページなどのHTMLにダウンロードしたタグを張り付ける
操作画面：該当ページのHTMLを管理しているツールにて操作してください
［カートに入れる］ボタンを表示したい場所に、取得したタグを貼り付けます。
必要に応じて、文言を変更したり、CSSにて表示を整えてください。
＜取得したタグをそのまま張り付けた場合＞
＜取得したタグの文言やCSSを調整した場合＞
以上が、基本的な［カートに入れる］ボタンの設定手順です。
［カートに入れる］ボタンのカスタマイズ方法
［カートに入れる］ボタン設定手順（基本手順）-「HTMLタグ出力」欄からHTMLを出力するの手順にて、選択肢を変更すると異なるカート形式のHTMLを取得できます。
複数の商品をまとめて「カートに入れる」ためのHTMLタグを取得
- 商品検索結果一覧にて、表示したい複数商品の「HTML」欄のチェックをONにします。
- 「カートボタン表示」で、「まとめてカートボタンを出力」を選択します。
取得タグのサンプルを表示
＜取得したタグをそのまま張り付けた場合＞
＜取得したタグの文言やCSSを調整した場合＞
バリエーション商品を「カートに入れる」ためのHTMLタグを取得
バリエーション商品の場合は、バリエーションの選択方法を「ラジオボタン（1バリエーションのみ選択可）」「チェックボックス（複数バリエーションのみ選択可）」から選択できます。
- 商品検索結果一覧にて、表示したいバリエーション商品の「HTML」欄のチェックをONにします。
- 「カートボタン表示」では、「商品ごとにカートボタンを出力」を選択、「バリエーション表示」て、「ラジオボタン」もしくは「チェックボックス」を選択します。
＜ご注意事項＞
バリエーションの場合は、「商品毎にカートへボタンを出力」のみ選択可能です。
「まとめてカートボタンを出力」を選択しても無効となります。
「ラジオボタン」を選択した場合
取得タグのサンプルを表示
＜取得したタグをそのまま張り付けた場合＞
＜取得したタグの文言やCSSを調整した場合＞
「チェックボックス」を選択した場合
取得タグのサンプルを表示
＜取得したタグをそのまま張り付けた場合＞
＜取得したタグの文言やCSSを調整した場合＞
「数量」をセレクトボックスに変更する
管理画面から取得できる［カートに入れる］ボタン用のHTMLタグでは、「数量」入力欄は、初期状態で数値を直接入力するテキストボックスになっています。
この「数量」入力欄は、カスタマイズによりセレクトボックス形式に変更し、あらかじめ指定した数量から選択できるようにすることも可能です。
取得したタグの以下のように修正します。
変更箇所
<td>数量<input name="products[商品番号].quantity" type="text" value="" size="5"></td>
部分の
<input name="products[商品番号].quantity" type="text" value="" size="5">
変更方法
サンプルとして、0個から3個まで選択できる場合として記載します。
<select name="products[商品番号].quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
＜取得したタグの文言やCSSのみを調整した場合＞
＜取得したタグの数量部分を「セレクトボックス」に変更し、文言やCSSを調整した場合＞
その他のカスタマイズ方法
その他にも様々なカスタマイズが可能です。
【参考】商品グループから遷移する商品一覧から［カートに入れる］ボタン用のHTMLタグを取得する
運用＞商品管理＞商品グループ管理＞［商品グループ新規登録・編集］商品一覧／順序設定からも［カートに入れる］ボタン用のHTMLタグは取得可能です。
＜ご注意事項＞
こちらの画面からは出力されるタグは、取得形式に制約がございます。
- 複数商品を「まとめてカートへ入れる」ためのタグは取得できません。
- バリエーション商品は、「ラジオボタン」での表示になります。［チェックボックス］での取得はできません。
商品一覧を開く
一覧の右端の「カートタグ取得」欄の［HTMLタグ］を押下します。
表示されるポップアップ画面から［カートに入れる］ボタン用のHTMLタグを取得
一覧の右端の「カートタグ取得」欄の［HTMLタグ］を押下します。
ご注意事項
- ［カートに入れる］ボタン用のHTMLタグは「商品価格」「商品番号」は取得できませんのでご注意ください。
バリエーション商品で利用する際の注意点
- バリエーションの登録・削除・変更を行うと、選択肢の
value値が変更されます。
商品データのvalue値と、［カートに入れる］ボタン用のHTMLタグのvalue値は必ず一致させる必要があります。
バリエーション選択肢を変更した際は、必ずカート用タグを再度出力し、value値を変更後にしてください。
［カートに入れる］ボタン用のHTMLタグの貼り付け場所に関する注意点
- ［カートに入れる］ボタン用のHTMLタグは
formタグで構成されているため、他のformタグの配下では動作しません。
例えばコマースクリエイターのパーツですと、以下パーツがformタグで構成させているため、配下には配置できません。