Styling Product Boxes on Homepage

Hi All,

I'm trying to style the way products are displayed on the homepage so that it looks similar to my Photoshop design as shown below.

At the moment, I've got the site running with the default product display style as shown here.

I'm assuming I need to place the Product Title in a <div> then style it and move it above the image, but finding where to do this is proving a challenge.

I've had a look at tpl_columnar_display.php but to no avail. I'm fine with CSS, but my PHP skills are lacking and I'm new to ZC so if anyone can point me to the right file, it would be appreciated. :smile:

Hi Guys, Any help on this please? I'm sure many of you have styled your product boxes so please.. just point me to the right file where I can move the product title above the product image, and place the product title in a <div> and I'll be on my way!

For starters, set the order of the listing elements in admin > Configuration > Product Listing. You want the name first, then the image, etc.

But doesn't Admin>Config>Product Listing only control the appearance of the products when they're displayed in a list (single column) on the subpages of the site? This was the first place I checked before making my initial post and unless I'm both stupid and blind, the settings here have little effect on the way products are displayed on the homepage.

To be more specific (and obviously you know this) the default ZenCart homepage when you first install it shows 9 Featured products, 9 New products, and 9 Special products in a 3 column layout. Currently, I've turned off New products and Specials. I'm therefore only displaying Featured products and I've changed it to 4 columns to display 8 Featured products neatly in 2 rows.

I'm trying to style those Featured product boxes by adding one or more divs, and I'm hoping that wherever it is I do that, the style will also apply to New and Special products. The CSS is no problem - I can see that those boxes are all within .centerBoxWrapper but it's adding the divs that's the issue. Which PHP file controls these center box layouts?

Maybe I'm going about this the wrong way, so any light you can shed is appreciated. I also read a recent thread http://www.zen-cart.com/forum/showthread.php?t=100003 about a styling a column layout grid on the product listing page, but once again, I suspect this styles the way products appear on the subpages and not the Featured products on the homepage?

I've sort of worked it out. The layout of the individual product boxes appearing in the Featured Products section on the homepage is found in featured_products.php around line 71-72.

I rearranged a few of the statements so that my product title is in a new div and it appears above the product image. Lines 71-72 now look like this.

$list_box_contents[$row][$col] = array('params' =>'class="centerBoxContentsFeatured centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"', 
    'text' => (($featured_products->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) ? '' : '<div class="productHeading"><a href="' . zen_href_link(zen_get_info_page($featured_products->fields['products_id']), 'cPath=' . $productsInCategory[$featured_products->fields['products_id']] . '&products_id=' . $featured_products->fields['products_id']) . '">' . $featured_products->fields['products_name'] . '</a></div>' .'<a href="' . zen_href_link(zen_get_info_page($featured_products->fields['products_id']), 'cPath=' . $productsInCategory[$featured_products->fields['products_id']] . '&products_id=' . $featured_products->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $featured_products->fields['products_image'], $featured_products->fields['products_name'], IMAGE_FEATURED_PRODUCTS_LISTING_WIDTH, IMAGE_FEATURED_PRODUCTS_LISTING_HEIGHT) . '</a><br />') . $products_price);

I'm sure this isn't the best way to do it and someone will probably point out some obvious flaws, but I couldn't find a solution on the forum and hey.. it works. :D

That's the problem with screenshots - they can't give information on the underlying structure that is producing the appearance. You didn't say that it was featured products you wanted to style, and your desired appearance could be gotten with the Column Layout Grid mod and setting the element orders for the product listing as I described. Looking back, I do see that your "current" screenshot has the Featured Products text above the grid, though your desired view does not.
All that aside, the centerboxes do not have settings to change their internal organization, and modifying template files is necessary.
Instead of
<div class="productHeading">
it would make more sense to use
<h3>
tags, and style
.centerBoxContentsFeatured h3 {}
as desired.

Thanks for that. You're absolutely correct on all points. I was a bit vague with my original post, mostly because this is my first ZenCart site and I'm not familiar with the terms. From the demo site that ships with the installation, I noticed the homepage products were in a columnar layout, whereas when you drill down into each product category, the products are displayed in a list layout.

I therefore incorrectly assumed that my screenshots were obviously a homepage shot seeing that the products weren't in a list format. Thanks for your input - my learning curve continues! (I develop mostly MODX websites and am pampered with a lovely AJAX backend GUI so my next step is to try and customize the interface for the client :D)