Product Display

Hi,


I have noticed that the products displayed either come in a grid view or one product under each other.

However what happens if I want my products to be displayed like something on this site:

http://www.brandmoo.com/acatalog/BrandMoo.html

That is I want them to be displayed 3 products next to each other on each line like on the brand moo site.

How would I go about doing this in nopcommerce?


Kind Regards,

Faizan Sheikh

You need to create a new category template.  Look in templates/categories.  Maybe copy the ProductsInGrid and then manipulate it the way you need.

Basically you need to create a new user control and add then register the new template in the Nop_CategoryTemplate table in the database or through Content Management -> Templates - > Category Templates.

Hope this helps.
Thanks,
Matthew

Hi Matthew,

Thanks for that.

Kind Regards,
Faizan

Hello,

I changed the file:
\Templates\Categories\ProductsInGrid.ascx

And I changed the repeat columns to 3 which is exactly what I wanted.

Now I have the problem that the 3 boxes that contain the product images are in 1 row
but they extend and overflow across the right side of the content section which I don't want.

Is it possible to make it such that regardless of how many repeat columns that they will always
be relative to and contained within the content section ?

Kind Regards,

Faizan

You will need to alter the stylesheet in app_themes

Hi,

I have made two changes in the category.css file in the the app_themes, nop classic folder
That is namely changing the addinfo and product item width from 250px to 150px and leaving
the ProductGrid width at 550. Since I have repeatcolumns set to 3 it should be less than 550.


.CategoryPage .ProductGrid
{
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 550px;
  text-align: center;
}


.CategoryPage .ProductGrid .ProductItem .addInfo
{
  vertical-align: bottom;
  text-align: right;
  width: 150px;
  height: 85px;
  position: relative;
  background: rgb(247, 245, 232);
}

.CategoryPage .ProductGrid .ProductItem
{
  text-align: center;
  margin: 15px 15px 15px 15px;
  width: 150px;
  border: 1px solid rgb(232, 230, 210);
}


When I do that in firebug to get a quick preview it works. Then when I modified the category.css
file and uploaded it to my hosting web server and come back to my site it still is having the same problem.

When I check in firebug it says the width is 250px, but when I download the file again from hosting site it says
150px which is strange.

Could there be any reason for this or am I making incorrect changes?

Just confused at the moment. Any help would be appreciated.

Kind Regards,

Faizan Sheikh

Hi All,

Nevermind seems to be working now.

Kind Regards,

Faizan Sheikh