Prestashop NEW 1.5 Theme - display products as a Grid

[justkaka]

New to Prestashop.

 

Just installed 1.4.8 and playing around. Found Prestashop NEW 1.5 theme - this will do mostly for my 1st shop.

 

 

I am trying to convert the Prestashop_new 1.5 Theme to display Products in a GRID rather than a list.

 

Does anyone know what to change / where ?

[nestawr]

I'm trying to do this too. List view is horrible for large shops with multiple sub-categories.

 

Has anyone figured this out?

[Hectorete]

I'm trying to do this too...

 

I´m searching the web but don´t look nothing.

 

Any idea?

[anishjmc]

I did a small change in css. (product_list.css) in your prestashop 15 template file

Look for

 

#product_list li

 

 

 

 

 

Change everything to below style between the brackets

 

margin-bottom: 14px;

padding: 12px 8px;

border: 1px solid #EEE;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

float: left;

width: 157px;

margin-top: 0px;

height: 341px;

 

This is my sites grid view settings . You can change the width , height etc accordingly

[ysinghal]

Works Perfect !! Thanks for saving lot of efforts .

[neouy]

I did a small change in css. (product_list.css) in your prestashop 15 template file

Look for

 

#product_list li

 

 

 

 

 

Change everything to below style between the brackets

 

margin-bottom: 14px;

padding: 12px 8px;

border: 1px solid #EEE;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

float: left;

width: 157px;

margin-top: 0px;

height: 341px;

 

This is my sites grid view settings . You can change the width , height etc accordingly

 

Anishjmc Hello, I just installed in new prestashop 1.5 and this issue is that the default, make the change in the css but it shows the description and the name really bad: (any solution?

[anishjmc]

Please attach screenshot of the page so that i can get an idea

[everminding]

Hi! When I implement this change, the images look just how I want, but the text is in a weird place and overlapping.

[justkaka]

Yes, similar to what I'm getting !

[everminding]

I wanted a grid of just Product Photos, with no name, description, or price. (Screen shot attached)

 

I use 1.5, and have removed the Right Column already, so the Center Column is 728px.

 

I changed the Home image size to 180px, and regenerated thumbnails.

 

In Product-List.tpl I used <!-- --> to blank out Left Block, H3, and the Right Block.

 

Then in Product-List.css, I added all this to "#product-list li"

 

 

#product_list li {

margin-bottom: 14px;

padding: 20px 5px;

border: 1px solid #eee;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

float: left;

width: 29%px;

margin-top: 0px;

height: 220px;

clear:both;

height:auto;

clear:none;

padding-right:20px;

padding-left: 20px;

}

 

Then I adjusted the margins and padding in "#product_list li .center_block" and "product_list li .product_img_link" until things were centered and spaced to my liking - it will take different adjustments if you still have a right column or a different theme.

[anishjmc]

Sorry to mention that mine is a 2 column layout.So i made css for that layout. If you are using 3 column layout try below settings in the product list css page:-

 

 

#product_list li {

margin-bottom: 14px;

padding: 12px 8px;

border: 1px solid #EEE;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

float: left;

width: 146px;

}

 

 

#product_list li .center_block {

float: left;

padding: 0 7px;

width: 132px;

border-right: 1px dotted #CCC;

}

 

 

 

#product_list li p.product_desc {

overflow: hidden;

padding: 0;

line-height: 16px;

min-height: 118px;

}

 

 

 

 

#product_list li .right_block {

position: relative;

float: right;

width: 131px;

text-align: right;

}

 

This must work here is what i got for a 3 column layout

 

[gotrendystuff]

Hi There, Thank you so much for this post, but i'm so new to this that i'm a bit lost.

1st I found the /public_html/themes/default_grid/css/product_list.css

2nd I added the codes this way but i'm not sure i'm doing it the right way, See screen shot http://s18.postimage.org/fazkdt355/Screen_Shot_2012_11_08_at_11_40_09_PM.png

And then saved it over the old css and it is not working?? So can you explain to me were should i make the changes on my css?

I must seem dumb but i'm so new at this... Thank you so much for your precious help!

 

Maria

[wemveo]

Hi there,

 

I changed my product list.css like anishjmc advised. However, my products still display in a list! I checked my compile and cash settings, so that's not the problem. Anyone has got any idea?

Hope someone can help me, thank so much!

[turk4u]

anishjmc,

When I type in your code, my products with a long description don't cut off like yours and end with ........

This prevents everything from lining up. Any ideas? Thanks!

Edited December 11, 2012 by turk4u (see edit history)