EC-CUBEの小技：商品一覧ページを4商品横並びにする方法

2012年7月12日 18:54

ver.2.11

ECサイトには、商品が一覧で見られるページと、その商品だけの詳細が見られるページがあります。
ここにデザインの妙があり、人によっては一覧ページなのに無駄な情報をダラダラ載せていたり、詳細ページにろくな情報がなかったりします。

ここにおいて、一覧ページの見やすさだけを考えるならば、1列4商品というのが無難だという事がわかりました。
※無難なので、推奨はしません。

これの利点はスクロールが少なく商品が見渡せるところにあります。
一番見やすい方法で、沢山の商品を見せる。
これが、一覧ページの至上命題と言えるのではないでしょうか。
というわけで、以下より紹介。

この記事は最終更新日から1年以上が経過しています。

無駄なdivを削り、CSSで整える

実は、この1列4商品化というのは、思っているよりも簡単です。
CSSを理解していれば、5分ほどで出来ます。

/data/Smarty/templates/default/products/list.tpl
下記の指示通りに削除

154行目            
<div class="listphoto">

158行目
</div>

160行目
<div class="listrightbloc">

258行目
</div>

上記4か所を削除

/html/user_data/packages/default/css/contents.css
下記の指示通りに書き換え

199行目付近
.pagenumber_area {
    margin: 20px 0;
    clear: both;
}

222行目付近
div.list_area {
    padding: 0 0 30px 0;
    width: 190px;
    overflow: hidden;
    float:left;
    height:380px;
}

これで1列4商品になるはずですが、いかがでしょう。
ならない場合は、CSSに問題があるはずなので、細かく見直しましょう。

ここまでできたら、お好きなようにカスタマイズしましょう。
一言コメントを外したり、ステータスも外したり。

今あるものを残す事が正しいとは言えません。
色々試して、客が一番見やすいと言えるものを作り上げましょう。

以上。