組み合わせ購入パターン

組み合わせ購入パターンの表示~旧テンプレートをご利用の方へ~
このページでは【 組み合わせ購入パターン 】の表示の概要及び旧テンプレートへの追加方法を説明しています。

2005年8月25日以前にダウンロードされたテンプレートには、【 組み合わせ購入パターン 】の表示が実装されていません。
【 組み合わせ購入パターン 】の表示機能を使用するには、以下の手順に従いテンプレートの編集を行ってください。


※編集方法は使用するテンプレートにより異なります。


お知らせ 2005/08/25
・ショップの商品詳細ページに、【 組み合わせ購入パターン 】を表示する機能を追加しました。

お知らせ 2007/05/23
・管理者ページに【 組み合わせ購入パターン 】の表示設定機能を追加しました。
【 組み合わせ購入パターン 】の表示機能とは
【 組み合わせ購入パターン 】の表示機能とは、ショップの商品詳細ページに、「この商品を買った人はこんな商品も買ってます」という商品付加情報を、1商品に対し3商品まで表示する機能です。表示される商品は、一緒に購入された販売回数の上位3商品もしくはお好みで設定した商品となります。
» 【 組み合わせ購入パターン 】の詳細はこちら

※該当商品と一緒に購入された商品が無い場合は、この項目は表示されません。
※2005年8月25日以前にダウンロードされたテンプレートには、表示用htmlが入っていないため、表示されません。
【 組み合わせ購入パターン 】の表示機能を使用するには、以下の手順に従いテンプレートの編集を行ってください。
機能を追加するには
【対応内容】
以下の二通りございます。どちらかの対応をお願いします。

再度テンプレートを追加する 【※推奨】


テンプレートの該当箇所を修正する

テンプレートの編集を行う場合は、【商品詳細画面html】【共通css】の計2箇所を編集します。
使用するテンプレートを確認し、以下の指定箇所の編集を行ってください。

【商品詳細html】に、【 組み合わせ購入パターン 】の表示用htmlを追記します。 【商品詳細html】の編集内容はこちら
【共通css】に、【 組み合わせ購入パターン 】の表示用cssを追加します。 【共通css】の編集内容はこちら


※上記タグを変更する位置が分からない場合は、再度ご利用のテンプレートをを追加していただき、上記変更後のタグが記述されている位置をご確認ください。

【商品詳細html】編集内容

使用しているテンプレートを確認

【商品詳細html】に追加するタグは各テンプレート毎に異なります。

タグの挿入箇所を確認

【テンプレート別挿入タグ一覧表 】の、 <!-- 黄色いマークの文字列 --> が挿入箇所の目安となりますので、 文字列を【商品詳細html】内にて検索します。

指定タグをコピー、挿入

検索後、検索文字列の上部へ ピンクエリアの追加タグ を挿入してください。
■テンプレート別挿入タグ一覧表 【商品詳細html】
シンプル(レッド) <{$product.info}>
</form>
<!-- 「この商品を買った人はこんな商品も買ってます」 -->
<{if $together_product_num != 0}>

<table id="together" cellpadding="0" cellspacing="0"><tr><td>

<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>

<{section name=num loop=$together_product}>
<div class="together_list">
<{if $together_product[num].img_url != "" }>
<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>
<{else}>
<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/4/now100.gif" /></a>
<{/if}>
<br />
<a href="<{$together_product[num].link_url}>">
<{$together_product[num].name}>
</a>
</div>
<{/section}>

<br style="clear:both;" />

</td></tr></table>

<{/if}>
<!--// 「この商品を買った人はこんな商品も買ってます」 -->

</div>

<!--トラックバック-->
<{if $trackback_url != ""}>
シンプル(ブルー) <{$product.info}>
</form>
<!-- 「この商品を買った人はこんな商品も買ってます」 -->
<{if $together_product_num != 0}>

<table id="together" cellpadding="0" cellspacing="0"><tr><td>

<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>

<{section name=num loop=$together_product}>
<div class="together_list">
<{if $together_product[num].img_url != "" }>
<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>
<{else}>
<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/7/now100.gif" /></a>
<{/if}>
<br />
<a href="<{$together_product[num].link_url}>">
<{$together_product[num].name}>
</a>
</div>
<{/section}>

<br style="clear:both;" />

</td></tr></table>

<{/if}>
<!--// 「この商品を買った人はこんな商品も買ってます」 -->

</div>

<!--トラックバック-->
<{if $trackback_url != ""}>
シンプル(グレー) <{$product.info}>
</form>
<!-- 「この商品を買った人はこんな商品も買ってます」 -->
<{if $together_product_num != 0}>

<table id="together" cellpadding="0" cellspacing="0"><tr><td>

<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>

<{section name=num loop=$together_product}>
<div class="together_list">
<{if $together_product[num].img_url != "" }>
<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>
<{else}>
<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/8/now100.gif" /></a>
<{/if}>
<br />
<a href="<{$together_product[num].link_url}>">
<{$together_product[num].name}>
</a>
</div>
<{/section}>

<br style="clear:both;" />

</td></tr></table>

<{/if}>
<!--// 「この商品を買った人はこんな商品も買ってます」 -->

</div>

<!--トラックバック-->
<{if $trackback_url != ""}>
シンプル(ラベンダー) <{$product.info}>
</form>

<!-- 「この商品を買った人はこんな商品も買ってます」 -->
<{if $together_product_num != 0}>

<table id="together" cellpadding="0" cellspacing="0"><tr><td>

<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>

<{section name=num loop=$together_product}>
<div class="together_list">
<{if $together_product[num].img_url != "" }>
<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>
<{else}>
<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/9/now100.gif" /></a>
<{/if}>
<br />
<a href="<{$together_product[num].link_url}>">
<{$together_product[num].name}>
</a>
</div>
<{/section}>

<br style="clear:both;" />

</td></tr></table>

<{/if}>
<!--// 「この商品を買った人はこんな商品も買ってます」 -->

</div>

<!--トラックバック-->
<{if $trackback_url != ""}>
ナチュラル </form>
<!-- 「この商品を買った人はこんな商品も買ってます」 -->
<{if $together_product_num != 0}>

<div id="together">

<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>

<{section name=num loop=$together_product}>
<div class="together_list">
<{if $together_product[num].img_url != "" }>
<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>
<{else}>
<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/1/now100.gif" /></a>
<{/if}>
<br />
<a href="<{$together_product[num].link_url}>">
<{$together_product[num].name}>
</a>
</div>
<{/section}>

<br style="clear:both;" />

</div>

<{/if}>
<!--// 「この商品を買った人はこんな商品も買ってます」 -->

<!--トラックバック-->
<{if $trackback_url != ""}>
フラワー </form>
<br />
<!-- 「この商品を買った人はこんな商品も買ってます」 -->
<{if $together_product_num != 0}>

<div id="together">

<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>

<{section name=num loop=$together_product}>
<div class="together_list">
<{if $together_product[num].img_url != "" }>
<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>
<{else}>
<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/2/now100.gif" /></a>
<{/if}>
<br />
<a href="<{$together_product[num].link_url}>">
<{$together_product[num].name}>
</a>
</div>
<{/section}>

<br style="clear:both;" />

</div>

<{/if}>
<!--// 「この商品を買った人はこんな商品も買ってます」 -->

<!--トラックバック-->
<{if $trackback_url != ""}>
ブロック <{$product.info}>
<!-- 「この商品を買った人はこんな商品も買ってます」 -->
<{if $together_product_num != 0}>

<div id="together">

<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>

<{section name=num loop=$together_product}>
<div class="together_list">
<{if $together_product[num].img_url != "" }>
<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>
<{else}>
<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/3/now100.gif" /></a>
<{/if}>
<br />
<a href="<{$together_product[num].link_url}>">
<{$together_product[num].name}>
</a>
</div>
<{/section}>

<br style="clear:both;" />

</div>

<{/if}>
<!--// 「この商品を買った人はこんな商品も買ってます」 -->
<!--トラックバック-->
<{if $trackback_url != ""}>
ストライプ </form>
<!-- 「この商品を買った人はこんな商品も買ってます」 -->
<{if $together_product_num != 0}>

<table id="together" cellpadding="0" cellspacing="0"><tr><td>

<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>
<{section name=num loop=$together_product}>
<div class="together_list">
<div class="together_item" onmouseover="this.style.backgroundColor='#FFF'" onmouseout="this.style.backgroundColor=''">
<{if $together_product[num].img_url != "" }>
<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a><br />
<{else}>
<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/5/noimage.gif" /></a><br />
<{/if}>
<a href="<{$together_product[num].link_url}>"><{$together_product[num].name}></a>

</div>
</div>
<{/section}>
<br style="clear:both;" />

</td></tr></table>

<{/if}>
<!--// 「この商品を買った人はこんな商品も買ってます」 -->
<!--トラックバック-->
<{if $trackback_url != ""}>
エレガント </form>
<!-- 「この商品を買った人はこんな商品も買ってます」 -->
<{if $together_product_num != 0}>

<div id="together">

<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>
<table width=100%"><tr><td>
<{section name=num loop=$together_product}>
<div class="together_list">
<{if $together_product[num].img_url != "" }>
<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>
<{else}>
<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/6/nowprinting_100.gif" /></a>
<{/if}>
<br />
<a href="<{$together_product[num].link_url}>">
<{$together_product[num].name}>
</a>
</div>
<{/section}>

<br style="clear:both;" />
</td></tr></table>
</div>

<{/if}>
<!--// 「この商品を買った人はこんな商品も買ってます」 -->
<!--トラックバック-->
<{if $trackback_url != ""}>
ミニ <{/if}>

<!-- 「この商品を買った人はこんな商品も買ってます」 -->
<{if $together_product_num != 0}>

<div id="together">

<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>

<{section name=num loop=$together_product}>
<div class="together_list">
<{if $together_product[num].img_url != "" }>
<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>
<{else}>
<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/10/now100.gif" /></a>
<{/if}>
<br />
<a href="<{$together_product[num].link_url}>">
<{$together_product[num].name}>
</a>
</div>
<{/section}>

<br style="clear:both;" />

</div>

<{/if}>
<!--// 「この商品を買った人はこんな商品も買ってます」 -->
<!--トラックバック-->
<{if $trackback_url != ""}>
ウッド </form>

<!-- 「この商品を買った人はこんな商品も買ってます」 -->
<{if $together_product_num != 0}>

<div id="together">

<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>

<{section name=num loop=$together_product}>
<div class="together_list">
<{if $together_product[num].img_url != "" }>
<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a><br />
<{else}>
<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/11/now_s.gif" /></a><br />
<{/if}>

<a href="<{$together_product[num].link_url}>">
<{$together_product[num].name}>
</a>
</div>
<{/section}>

<br style="clear:both;" />

</div>

<{/if}>
<!--// 「この商品を買った人はこんな商品も買ってます」 -->
<!--トラックバック-->
<{if $trackback_url != ""}>
アクア </div>

<!-- 「この商品を買った人はこんな商品も買ってます」 -->
<{if $together_product_num != 0}>

<div id="together" style="margin:20px 15px 0px 15px;line-height:180%;">

<div class="title"><img src="http://img.shop-pro.jp/tmpl_img/12/icon_title.gif" width="12" height="12" alt="" />&nbsp;この商品を買った人はこんな商品も買ってます</div>

<{section name=num loop=$together_product}>
<div class="item_box" style="float:left;margin:15px 10px 20px 0px;width:140px;">
<div class="item_thumbnail">
<{if $together_product[num].img_url != ""}><a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" class="top_item" /></a>
<{else}>
<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/12/now_printing.gif" width="100" height="100" border="0" class="top_item" /></a>
<{/if}>
</div>

<a href="<{$together_product[num].link_url}>"><{$together_product[num].name}></a>
</div>
<{/section}>

<br style="clear:both;" />

</div>

<{/if}>
<!--// 「この商品を買った人はこんな商品も買ってます」 -->

<!--トラックバック-->
<{if $trackback_url != ""}>
プレーン </div>

<!-- 「この商品を買った人はこんな商品も買ってます」 -->
<{if $together_product_num != 0}>

<div id="together">

<div class="tog_main_title">この商品を買った人はこんな商品も買ってます</div>

<{section name=num loop=$together_product}>
<div class="together_list">
<{if $together_product[num].img_url != "" }>
<a href="<{$together_product[num].link_url}>"><img src="<{$together_product[num].img_url}>" /></a>
<{else}>
<a href="<{$together_product[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/13/now100.gif" /></a>
<{/if}>
<br />
<a href="<{$together_product[num].link_url}>">
<{$together_product[num].name}>
</a>
</div>
<{/section}>

<br style="clear:both;" />

</div>

<{/if}>
<!--// 「この商品を買った人はこんな商品も買ってます」 -->
<!--トラックバック-->
<{if $trackback_url != ""}>

【共通css】編集内容

以下のcssを、使用しているテンプレートの【共通css】内に追記します。
挿入箇所は、css内コメントテキストの「トラックバック」の項目を目安に挿入してください。

挿入するcssソースは、テンプレートによって異なります。 使用しているテンプレートをクリックすると、該当のソースが表示されます。
コピーしてご利用ください。
以上で挿入作業は完了です。