［カートに入れる］ボタンをランディングページなどの外部サイトに設置する

管理画面から、各商品の［カートに入れる］ボタン用のHTMLタグを取得できます。

このタグを使えば、特定商品のランディングページなどから「商品詳細」ページを経由せずに、そのままカートへ商品を追加する導線を構築できます。
ユーザーは「気になったらすぐカートへ」進めるため、購入までの流れがスムーズになります。

このカートボタンは、ランディングページだけでなく、WordPressで作成したサイト、ブログ、コマースクリエイター＞フリーページで作成したキャンペーンページなどにも設置可能です。

＜サンプルイメージ＞

futureshop管理画面から取得した［カートに入れる］ボタン用のHTMLタグを張り付けると、 「商品名」「数量」「カートに入れるボタン」 をページに出力できます。

「カート」ボタンを押下すると、futureshopで生成した「ショッピングカート」へ遷移します。

※デザインはCSSでの調整が必要です。

＜目次＞

• ［カートに入れる］ボタン設定手順（基本手順）
• ［カートに入れる］ボタンのカスタマイズ方法
  • 複数の商品をまとめて「カートに入れる」ためのHTMLタグを取得
  • バリエーション商品を「カートに入れる」ためのHTMLタグを取得
  • 「数量」をセレクトボックスに変更する
  • その他のカスタマイズ方法
• 【参考】商品グループから遷移する商品一覧から［カートに入れる］ボタン用のHTMLタグを取得する

• ご注意事項

［カートに入れる］ボタン設定手順（基本手順）-「HTMLタグ出力」欄からHTMLを出力するの手順にて、選択肢を変更すると異なるカート形式のHTMLを取得できます。

複数の商品をまとめて「カートに入れる」ためのHTMLタグを取得

取得タグのサンプルを表示

＜取得したタグをそのまま張り付けた場合＞

＜取得したタグの文言やCSSを調整した場合＞

バリエーション商品を「カートに入れる」ためのHTMLタグを取得

「ラジオボタン」を選択した場合

取得タグのサンプルを表示

＜取得したタグをそのまま張り付けた場合＞

＜取得したタグの文言や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タグの出力方法と仕様、カスタマイズ方法について教えてください。もご参照ください。

＜ご注意事項＞

こちらの画面からは出力されるタグは、取得形式に制約がございます。

• 複数商品を「まとめてカートへ入れる」ためのタグは取得できません。
• バリエーション商品は、「ラジオボタン」での表示になります。［チェックボックス］での取得はできません。