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

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

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

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

無駄な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に問題があるはずなので、細かく見直しましょう。

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

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

以上。

1 Comment

  1. いつもブログ拝見させて頂いています。
    良い情報をありがとうございます。

    まったくの素人なのでEC cubeを勉強がてら、いじっているのですが、

    4画像にする方法で質問なのですが、

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

    とありますが、154行目と160行目に関しては、青色で表記されている部分のみを削除するのでしょうか?

    また、158行目と、258行目のですが、

    テンプレートを使用しているため、○行目というのにずれがあり、どのなのかがわかりません。

    探し易いように前後のタグを教えて頂いてもよろしいでしょうか?

    ぜひよろしくお願い致します!

Leave a Reply

Your email address will not be published.


*


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください