"How do I create a grid layout for the products in my categories, showing several items per row, instead of just 1 item per row?"

Would you like to...

Print this page

Email this page

Post a comment

User Opinions

0% 100% (1 vote)

---

How would you rate this answer?

Helpful

Not helpful

Thank you for rating this answer.

Short Answer:

The "item list - column count" says how many items per row to display.  And the "category table – column count" is if you are using the table view to display your top level categories (you may not be using this).

Detailed Explanation:

First, go to SETTINGS > Catalog settings

There are two settings on this page that determine how many items per row to display.

• "item list - column count"
• "category table – column count"

You can also change “Paging - Max Items Displayed Per Page” to say how many rows per page that you want to display.

You will find that if you change it to show several items per row that it may not fit very well.  To fix this, you can easily drop in a template for the “Item List - Cell Template” like this:

<table width="150" border="0" cellspacing="2" cellpadding="3" align="center">
  <tr>    
    <td valign="top">
      <div style="border: solid 0px #666666;" align="center">
      [IMAGE-SM]
      </div>
    </td>
  </tr>
  <tr>
    <td align="center" class="">
      [NAME_LINK]<br>
      [SUBTITLE]
    </td>
  </tr>
</table>

I have a grey border in this example.  You may need to change the numbers around a bit depending on how big your product images, and how many items you are displaying per row.  If you want to display prices, then add:
[PRICE]<br>[SALE_PRICE].  

If you don’t plan on using the subtitle for your products, then you can remove the [SUBTITLE] tag as well.  You can learn more about our template system if you want to learn more about creating your own cusotm tmepaltes/designs for your category and product pages.