I have set the Category products to List mode which shows products inside ordered list which shows one set of ordered list. I would like to make the 2 ordered list. How do I accomplish it?


Below is the screenshot of the products how I wanted to list them and a link to JSFIDDLE enter image description here


4 Answers 4


In your theme's CSS file find the class


and add this:

width: 100%;

Then find the class:

.products-list li.item

And add this:

width: 50%;
float: left;

This then will display your list in 2 columns. It may need a bit more tweaking for your theme to get it to look good.

  • it works but the products li are listed from left to right and again left but I want to display one set of <ol> in left and another <ol> set to right.
    – Kevin S
    Commented Oct 19, 2014 at 13:18
  • That methodology would take a fair amount of development as it would require creating 2 <ol> objects, with the 2nd <ol> column starting at the product following the last in <ol> number 1's list. Commented Oct 19, 2014 at 13:33
  • looks like. For now I have to use the css method you have described.
    – Kevin S
    Commented Oct 19, 2014 at 14:32

This sounds like you are trying to get your List View to be in 2 columns. You can do this using the following steps:

  1. In Magento backend go to Catalog->Manage Categories
  2. Select the category you want to have 2 columns
  3. Click the 'Custom Design' tab
  4. Select a 2 column page layout from the drop down.
  5. Add this to the Custom Layout Update text box:
 <reference name="product_list">
        <action method="setColumnCount"><columns>2</columns></action>

You will need to repeat this for any categories you want 2 columns of products on.

  • the solution you have given only works when the List Mode is set to Grid not List mode..
    – Kevin S
    Commented Oct 19, 2014 at 12:18
  • Hey kevin, have posted another answer too but this also only appears to alter Grid mode. Let me have another look at this one. Commented Oct 19, 2014 at 12:28
  • I have updated my question with more details.
    – Kevin S
    Commented Oct 19, 2014 at 12:48
  • Please check the newest answer, the simple changes to the CSS will set you on the right track hopefully. Commented Oct 19, 2014 at 12:55

You can change the template in app/design/[your template]/catalog/product/list.phtml

Default would be app/design/base/default/catalog/product/list.phtml


You can change the number of columns in your themes list.phtml file.

If using the default theme that would be here:


Then find this line:

    <?php $_columnCount = $this->getColumnCount(); ?>

Change it to this:

    <?php $_columnCount = 2 ?>
  • This also only works correctly for Grid View. Commented Oct 19, 2014 at 12:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.