商品ページに関連商品のカートを複数設置する方法 | ショップサーブオンラインサポート

商品ページに、関連商品のカートを複数設置する方法を教えて下さい。

この方法はHTMLタグの編集を行います。
ある程度のHTMLの知識が必要になりますので、ご了承ください。⇒HTMLタグの基礎知識

また、この設置方法はベーシックテンプレートで、
複数画像機能を使わず、単一画像での登録をしている商品同士に限ります。

商品ページのカートまわりのHTMLソースをコピー＆ペーストする方法

＜商品ページへの複数カート設置例＞

アンティアン様
http://www.untiens.jp/SHOP/
princess-007.html#order

左の設置例をご覧下さい。
こちらの例では、単品は定価、3個セットは10％OFF、5個セットは 15％OFF、他の商品と組み合わせたセット商品は10％OFF・・・という構成になっていますが、このようにすると、その商品に興味を持ったお客様にもセット商品が目にとまりやすく、カゴに入れるまでの導線もスムースでユーザビリティも良く、当然、客単価アップも図りやすくなります。

このアップセル・クロスセル用のカゴへボタンの設置手順は下記の通りです。

STEP1

まず、各商品の商品ページを用意します。

STEP2

カゴへボタンを設置する関連商品（右の例では３個セット）の商品ページを開き、そのページのHTMLソースを表示します。（ソースが文字化けする場合は、TeraPadや秀丸エディタなど「EUC-JP」に対応しているテキストエディタをご利用下さい。）

STEP3

ソースの中に、と書かれた箇所が２つありますが、その２番目のから までの間の <div class="layoutp3">　～　</div>の部分をコピーします。

STEP4

管理画面の商品台帳にて、元となる商品（右の例では通常商品）の「商品の編集」画面を開き、商品説明の「サブ紹介文1」の部分に、上の「STEP3」でコピーした部分のHTMLタグを貼り付けます。

STEP5

上の「STEP4」で「サブ紹介文1」に貼り付けたHTMLタグの中で、不要と思われる部分（「拡大表示」の箇所や「この商品について問い合わせる」「友達にメールですすめる」「この商品のURLを携帯に送る」などの表示項目）を削除したり、必要に応じて編集後、商品ページを更新します。

※特に拡大表示に関する以下のhtmlタグは、削除しないと「拡大表示」機能が正常に動作しないので、コピーした部分から、必ず次の箇所を削除してください。

STEP6

その他の関連商品（右の例での５個セット・関連セット商品）も上記同様の手順で、商品説明の「サブ紹介文1」あるいは「サブ紹介文2」のスペースを利用して反映できます。