+1-888-365-2779
Try Now
More in this section

Forums / Ecommerce / Display items in a grid

Display items in a grid

4 posts, 0 answered
  1. Tyler
    Tyler avatar
    11 posts
    Registered:
    06 Dec 2011
    30 Jan 2012
    Link to this post
    I'm having a tough time figuring out how to display products in floated tiles instead of a list.  I've created a few products and I've dragged a products list widget on to my template.  I'd like to know how to make it display like floating tiles instead of the ugly list.  I thought this would be a relatively easy maneuver but I haven't seen any simple explanations of how to do this.
  2. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    31 Jan 2012
    Link to this post
    Hey Tyler,

    I'm not entirely sure what you mean with 'floated tiles' vs 'ugly list'. By default the product list widget displays 20 thumbnails on 5 row of 4 products.

    If you want to change how the products are displayed, you can simply click on edit, go to the 2nd tab of the widget (List settings) and near the bottom click on 'Edit selected template'.

    This will open the (code)editor where you can complete change the look and remove the <ul>/<li> to whatever you'd like more.

    Jochem.
  3. Tyler
    Tyler avatar
    11 posts
    Registered:
    06 Dec 2011
    31 Jan 2012
    Link to this post
    This is indeed puzzling.  All of the products that I'm displaying show in one column.  I have a hunch that the way I've structured my page (built outside of sitefinity with html/css) has modified the way things display in it. My attachment should illustrate what I'm talking about.  Using firebug, as I highlight the products container, it extends all the way to the right and stops flush with the above header and menu.  I'm using a 960 grid system, is it possible this is my problem because it could be pushing each object into its own row?

    thanks for your help
  4. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    31 Jan 2012
    Link to this post
    Hey Tyler,

    The problem (by the looks of it) is indeed the <li> tags, because they are showing. The 960 grid system itself shouldn't be a problem. But it probably has some general reset style rules regarding <ul>/<li>. 

    If that's not it, if you could tell me which grid system it is, we can perhaps figure it out better...
    Jochem
4 posts, 0 answered