futureshop FAQ

本サイトは、弊社サービス「futureshop」ご契約店舗様用のFAQサイトです。
お困り事やご不明点等ございましたら、お気軽にフューチャーショップサポートまでご連絡ください。

  • 電話でのお問合せ番号(平日10:00～17:00)
  • メールでのお問合せ
  • 文字サイズ変更
  • S
  • M
  • L
  • No : 2268
  • 公開日時 : 2018/02/17 14:34
  • 更新日時 : 2020/09/11 09:39
  • 印刷

futureRecommend2 デザインテンプレートはありますか。

サポートカテゴリー : 

回答

はい、ございます。

CSSのみのサンプルソースと、

HTMLとCSSのサンプルソースと、ご用意いたしました。

 

CSSのみのサンプルソース

futureRecommend2管理画面＞表示設定＞テンプレート一覧／作成から

該当テンプレート名をクリックし「CSS」欄にサンプルCSSをペーストします。

テンプレートのカスタマイズもあわせてご覧ください。

 

fs_recommend用サンプルCSS(商品詳細ページでのレコメンド表示)

表示イメージ

サンプルCSS    

/*------------------------------------------------
fs_recommend用サンプルソース
--------------------------------------------------*/
.FS2_Recommend2_recommend{
margin-bottom:15px;
}
.FS2_Recommend2_recommend .CrossHead{
font-weight:bold;/*見出しの装飾*/
font-size:14px;/*見出しの文字サイズ*/
color:#000000;/*見出しの文字色*/
text-align:left;/*見出しの位置*/
}
.FS2_Recommend2_recommend a{
font-weight:bold;/*商品名の装飾*/
font-size:12px;/*商品名の文字サイズ*/
color:#000000;/*商品名の文字色*/
}
.FS2_Recommend2_recommend .itemPrice{
font-size:12px;/*商品価格の文字サイズ*/
color:#000000;/*商品価格の文字色*/
}
.FS2_Recommend2_recommend .FS2_itemPrice_addition{
font-size:12px;/*消費税表示の文字サイズ*/
color:#000000;/*消費税表示の文字色*/
}
.FS2_Recommend2_recommend a img{
border:none;
}
.FS2_Recommend2_recommend ul{
padding:0px;
}
.FS2_Recommend2_recommend ul li{
display:block;
float:left;
padding:10px;
height:160px;
border:1px solid #ddd;
margin:0 5px 5px -0px;
line-height:1.5;
font-size:100%;
width:120px;
}
.FS2_Recommend2_recommend ul li img{
width:110px;
}
.FS2_Recommend2_recommend img{
margin-bottom:10px;
}

fs_history用サンプルCSS(お客様の閲覧履歴)

表示イメージ

サンプルCSS

/*------------------------------------------------
fs_history用サンプルソース
--------------------------------------------------*/
.FS2_Recommend2_container_history{
margin-bottom:15px;
}
.FS2_Recommend2_container_history .CrossHead{
font-weight:bold;/*見出しの装飾*/
font-size:14px;/*見出しの文字サイズ*/
color:#000000;/*見出しの文字色*/
text-align:left;/*見出しの位置*/
}
.FS2_Recommend2_container_history a{
font-weight:bold;/*商品名の装飾*/
font-size:12px;/*商品名の文字サイズ*/
color:#000000;/*商品名の文字色*/
}
.FS2_Recommend2_container_history .itemPrice{
font-size:12px;/*商品価格の文字サイズ*/
color:#000000;/*商品価格の文字色*/
}
.FS2_Recommend2_container_history  .FS2_itemPrice_addition{
font-size:12px;/*消費税表示の文字サイズ*/
color:#000000;/*消費税表示の文字色*/
}
.FS2_Recommend2_container_history a img{
border:none;
}
.FS2_Recommend2_container_history ul{
padding:0px;
}
.FS2_Recommend2_container_history ul li{
display:block;
float:left;
padding:10px;
height:160px;
border:1px solid #ddd;
margin:0 5px 5px 0;
line-height:1.3;
width:95px;
font-size:12px;
}
.FS2_Recommend2_container_history img{
margin-bottom:10px;
width:100px;
}
 

fs_ranking_vertical用サンプルCSS(縦型のランキング表示)

表示イメージ

 

サンプルCSS

/*------------------------------------------------
fs_ranking_vertical用サンプルソース
--------------------------------------------------*/
.FS2_Recommend2_ranking_vertical{
margin-bottom:15px;
}
.FS2_Recommend2_ranking_vertical caption{
font-weight:bold;/*見出しの装飾*/
font-size:14px;/*見出しの文字サイズ*/
color:#000000;/*見出しの文字色*/
text-align:left;/*見出しの位置*/
}
.FS2_Recommend2_ranking_vertical a{
font-weight:bold;/*商品名の装飾*/
font-size:12px;/*商品名の文字サイズ*/
color:#000000;/*商品名の文字色*/
}
.FS2_Recommend2_ranking_vertical .itemPrice{
font-size:12px;/*商品価格の文字サイズ*/
color:#000000;/*商品価格の文字色*/
}
.FS2_Recommend2_ranking_vertical .FS2_itemPrice_addition{
font-size:12px;/*消費税表示の文字サイズ*/
color:#000000;/*消費税表示の文字色*/
}
.FS2_Recommend2_ranking_vertical a img{
border:none;
float:left;
width:60px;
}
.FS2_Recommend2_ranking_vertical th{
border:1px solid #ddd;
background:#f6f6f6;
padding:3px;
}
.FS2_Recommend2_ranking_vertical td{
border:1px solid #ddd;
padding:5px;
line-height:1.3;
font-size:12px;
}
.FS2_Recommend2_ranking_vertical td img{
margin-bottom:10px;
}

fs_cart用サンプルCSS(カートの中ページでのレコメンド表示)

表示イメージ

 

サンプルCSS

/*------------------------------------------------
fs_cart用サンプルソース
--------------------------------------------------*/
.FS2_Recommend2_cart{
margin-bottom:15px;
}
.FS2_Recommend2_cart .CrossHead{
font-weight:bold;/*見出しの装飾*/
font-size:14px;/*見出しの文字サイズ*/
color:#000000;/*見出しの文字色*/
text-align:left;/*見出しの位置*/
}
.FS2_Recommend2_cart a{
font-weight:bold;/*商品名の装飾*/
font-size:12px;/*商品名の文字サイズ*/
color:#000000;/*商品名の文字色*/
}
.FS2_Recommend2_cart .itemPrice{
font-size:12px;/*商品価格の文字サイズ*/
color:#000000;/*商品価格の文字色*/
}
.FS2_Recommend2_cart .FS2_itemPrice_addition{
font-size:12px;/*消費税表示の文字サイズ*/
color:#000000;/*消費税表示の文字色*/
}
.FS2_Recommend2_cart a img{
border:none;
}
.FS2_Recommend2_cart ul{
padding:0px;
}
.FS2_Recommend2_cart ul li{
display:block;
float:left;
padding:10px;
height:160px;
border:1px solid #ddd;
margin:0 5px 5px -0px;
line-height:1.5;
font-size:100%;
width:120px;
}
.FS2_Recommend2_cart img{
margin-bottom:10px;
}

fs_ranking_horizontal用サンプルCSS(横型のランキング表示)

表示イメージ

 

サンプルCSS

/*------------------------------------------------
fs_ranking_horizontal用サンプルソース
--------------------------------------------------*/
.FS2_Recommend2_ranking_horizontal{
margin-bottom:15px;
}
.FS2_Recommend2_ranking_horizontal .CrossHead{
font-weight:bold;/*見出しの装飾*/
font-size:14px;/*見出しの文字サイズ*/
color:#000000;/*見出しの文字色*/
text-align:left;/*見出しの位置*/
}
.FS2_Recommend2_ranking_horizontal a{
font-weight:bold;/*商品名の装飾*/
font-size:12px;/*商品名の文字サイズ*/
color:#000000;/*商品名の文字色*/
}
.FS2_Recommend2_ranking_horizontal .itemPrice{
font-size:12px;/*商品価格の文字サイズ*/
color:#000000;/*商品価格の文字色*/
}
.FS2_Recommend2_ranking_horizontal .FS2_itemPrice_addition{
font-size:12px;/*消費税表示の文字サイズ*/
color:#000000;/*消費税表示の文字色*/
}
.FS2_Recommend2_ranking_horizontal a img{
border:none;
}
.FS2_Recommend2_ranking_horizontal caption{
font-weight:bold;
text-align:left;
}
.FS2_Recommend2_ranking_horizontal th{
border:1px solid #ddd;
background:#f6f6f6;
text-align:center;
padding:3px;
}
.FS2_Recommend2_ranking_horizontal td{
border:1px solid #ddd;
padding:10px;
vertical-align:top;
line-height:1.3;
}
.FS2_Recommend2_ranking_horizontal td img{
 margin-bottom:10px;
}

fs_ranking_vertical_text用サンプルCSS(縦型のテキストのみランキング表示)

表示イメージ

 

サンプルCSS

/*------------------------------------------------
fs_ranking_vertical_text用サンプルソース
--------------------------------------------------*/
.FS2_Recommend2_ranking_vertical_text{
margin-bottom:15px;
}
.FS2_Recommend2_ranking_vertical_text ul{
padding:0px;
margin:0px;
}
.FS2_Recommend2_ranking_vertical_text p{
margin-bottom:3px;
font-size:14px;/*見出しの文字サイズ*/
color:#000000;/*見出しの文字色*/
}
.FS2_Recommend2_ranking_vertical_text li{
line-height:1.2;
margin-bottom:1.0em;
list-style:none;
font-size:12px;/*ランキングエリアの文字サイズ*/
color:#000000;/*ランキングエリアの文字色*/
}
.FS2_Recommend2_ranking_vertical_text a{
font-size:12px;/*商品名の文字サイズ*/
color:#000000;/*商品名の文字色*/
}
.FS2_Recommend2_ranking_vertical_text .itemPrice{
font-size:12px;/*商品価格の文字サイズ*/
color:#000000;/*商品価格の文字色*/
}
.FS2_Recommend2_ranking_vertical_text .FS2_itemPrice_addition{
font-size:12px;/*消費税表示の文字サイズ*/
color:#000000;/*消費税表示の文字色*/
}

 

HTMLとCSSのサンプルソース

閲覧履歴を左・右のメニューへ、サムネイルで表示する

「テンプレート新規作成 」より、下記サンプルのHTML、CSSの登録を行い、
futureshopへ閲覧履歴 レコメンドタグで表示を行ってください。

表示イメージ

サンプルHTMLソース

<div class="FS2_Recommend2_container_history">
<h3 class="midashi">閲覧履歴</h3>
<ul>
#{if(total,0)}#{else}
#{item(1,10)}
<li><a href="#{url}"><img src="#{image}" /></a></li>
#{/item}
#{/if}
</ul>
</div>
<br clear="all" />

サンプルCSSソース

.FS2_Recommend2_container_history{
  padding:5px;
  margin:5px;
  }
h3.midashi{
  font-size:14px;
  background:#669900;
  height:20px;
  color:#FFFFFF;
  padding:5px;
  }
.FS2_Recommend2_container_history a{
  font-weight:bold;
  }
.FS2_Recommend2_container_history a img{
  border:1px solid #dddddd;
  }
.FS2_Recommend2_container_history ul{
  padding:0px;
  }
.FS2_Recommend2_container_history ul li{
  display:block;
  float:left;
  margin:5px;
  height:44px;
  line-height:1.3;
  font-size:12px;
  }
.FS2_Recommend2_container_history img{
  width:40px;
  }

新着アイテムを表示する

「テンプレート新規作成 」より、下記サンプルのHTML、CSSの登録を行い、

新着商品を表示させたい場所にサンプル表示タグを挿入します。

 

※[1週間][2週間][1ヶ月][無期限]の範囲で、新着アイテムの表示が可能です。

表示イメージ

サンプルHTMLソース

   #{if(total,0)}#{else}
    <div class="FS2_Recommend2_recommend_newitem">
    <h3 class="CrossHead">新着商品</h3>
    <ul>
    #{item(1,4)}
    <li>#{if(image)}<a href="#{url}"><img src="#{image}" /></a><br />#{/if}<a href="#{url}">#{raw(name)}</a><br />
    <span class="itemPrice">#{comma(price)}円</span><span class="FS2_itemPrice_addition">(税込)</span></li>
    #{/item}
    </ul>
    </div>
    <br clear="all" />
    #{/if}

サンプルCSSソース

/*------------------------------------------------
新着アイテム用サンプルソース
--------------------------------------------------*/
.FS2_Recommend2_recommend_newitem{
margin-bottom:15px;
}
.FS2_Recommend2_recommend_newitem .CrossHead{
font-weight:bold;/*見出しの装飾*/
font-size:14px;/*見出しの文字サイズ*/
color:#000000;/*見出しの文字色*/
text-align:left;/*見出しの位置*/
}
.FS2_Recommend2_recommend_newitem a{
font-weight:normal;/*商品名の装飾*/
font-size:10px;/*商品名の文字サイズ*/
color:#000000;/*商品名の文字色*/
}
.FS2_Recommend2_recommend_newitem .itemPrice{
font-size:10px;/*商品価格の文字サイズ*/
color:#000000;/*商品価格の文字色*/
}
.FS2_Recommend2_recommend_newitem .FS2_itemPrice_addition{
font-size:12px;/*消費税表示の文字サイズ*/
color:#000000;/*消費税表示の文字色*/
}
.FS2_Recommend2_recommend_newitem a img{
border:none;
}
.FS2_Recommend2_recommend_newitem ul{
padding:0px;
}
.FS2_Recommend2_recommend_newitem ul li{
display:block;
float:left;
padding:10px;
height:200px; 
border:1px solid #ddd;
margin:0 5px 5px -0px;
line-height:1.5;
font-size:100%;
width:120px;
}
.FS2_Recommend2_recommend_newitem ul li img{
width:100px;
}
.FS2_Recommend2_recommend_newitem img{
margin-bottom:5px;
}

 

サンプル表示タグ

  <script type="text/javascript"><!--
    try{
    _rcmdjp._displayNewItem({
    span:'2week', // 期間
    template:'fs_newitem', // テンプレート種類
    category:'カテゴリID' // カテゴリレコメンド
    });
    }catch(err){}
    //--></script>

 

※「span」は、期間を指定する場合にご利用ください。
※ 新着アイテム用のテンプレートを事前に作成する必要があります。
■期間指定タグ
1週間    span:'1week'
2週間    span:'2week'
1ヶ月
span:'1month'
※色やサイズは適宜ご調整ください

 

関連する虎の巻記事

スムーズに解決できなかった場合、記事改善のため解決できなかった理由をお聞かせください。

ご意見・ご感想をお寄せください お問い合わせを入力されましてもご返信はいたしかねます

フューチャーショップサポート

「虎の巻」でお悩みが解決できない場合や、ご不明点等がございましたらお気軽にご連絡ください。

  • お電話でのお問い合わせ（平日10:00～17:00）お電話でのお問い合わせ（平日10:00～17:30）
  • メールフォームをご利用くださいお問い合わせフォーム

※弊社サービスと類似した名称の通販サイトとの問い合わせ先間違いが増えております。
　弊社では通販サイトの運営は一切行っておりません。

TOPへ

ページ
トップへ