[Sisom]

I've just done a bit of work updating the Related Products in 4.3.2, which originally showed only the title of the product - not very inspiring!

I changed modules\Upselling_Products\related_products.tpl to the following (just back up your original related_products.tpl and install this instead):

{*
$Id: related_products.tpl,v 1.25 2009/05/01 13:55:35 vvs Exp $
vim: set ts=2 sw=2 sts=2 et:
*}

{if $product_links ne ""}
{capture name=dialog}
{assign var="tmp" value="0"}

{section name=cat_num loop=$product_links}
{if $product_links[cat_num].productid}{assign var="tmp" value="1"}{/if}
{/section}
{section name=cat_num loop=$product_links}
{ if %cat_num.first% }
<table border="0" cellspacing="5" width="100%">
{/if}

{if $smarty.section.cat_num.index is div by 3}
</tr><tr valign="top">
{/if}

<td width="33%" align="center">
<div class="related">
<a href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}>
{include file="product_thumbnail.tpl" productid=$product_links[cat_num].productid image_x=$config.Appearance.thumbnail_width product=$product_links[cat_num].product tmbn_url=$product_links[cat_num].tmbn_url}
</a> 
<p>
<a href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}>
{$product_links[cat_num].product}
</a>
</p>
<p>
<a href="product.php?productid={ $product_links[cat_num].productid }"{if $config.Modules.upselling_new_window eq 'Y'} target="_blank"{/if}>
{include file="currencyrelated.tpl" value=$product_links[cat_num].taxed_price}
</p>
</a>
</div> {* END OF RELATED *}
</td>
{ if %cat_num.last% }
</tr></table><br>
{/if}
{/section}
{/capture}
  {include file="customer/dialog.tpl" title=$lng.lbl_related_products content=$smarty.capture.dialog additional_class="uproducts"}
{/if}

I created a new class called '.related', which I added to the end of altskin.css:
.related {
margin: 0 0 8px 0;
}
This just makes a bigger margin at the bottom of the picture of the product.

I added paragraph tags around the product title, as it then appears in the standard paragraph style I have set for the product description.

I created a new templated called 'currencyrelated.tpl', which I needed to do, to change the size and colour of the price. I just copied currency.tpl to my hard drive, edited it to use the class ".currencyrelated", and then was able to apply CSS to that class, rather than having to rely on the CSS that applies to 'currency.tpl'. (If anybody knows of another way to do this, I would be very interested - because currency.tpl is a complete template, I couldn't apply any CSS to it, without affecting all other prices on the site (i.e. making them all bigger and red! Which I didn't want.)

This is 'currencyrelated.tpl':

{*
$Id: currencyrelated.tpl,v 1.22 2010/07/18 15:52:55 max Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
{strip}

{if $plain_text_message eq ""}
<span class="currencyrelated">
{/if}

{if $display_sign}

{if $value gte 0}
+
{else}
-
{/if}

{/if}

{assign var="cf_value" value=$value|abs_value|formatprice}

{if $tag_id ne "" && $plain_text_message eq ""}
{assign var="cf_value" value="<span id=\"`$tag_id`\">`$cf_value`</span>"}
{/if}

{$config.General.currency_format|replace:"x":$cf_value|replace:"$":$config.General.currency_symbol}

{if $plain_text_message eq ""}
</span>
{/if}

{/strip}

The only difference is the span at the top, which now uses the style .currencyrelated.

I also added some styles to reduce the size of the gap at the bottom of the Related Products section - in altskin.css I added:

.uproducts {
margin-bottom: 0;
}
.uproducts .content {
padding-bottom: 0;
}
.uproducts img {
border: 1px solid black;
}


(I gave .uproducts a bottom margin of zero to negate the 30px bottom margin which .dialog has, the HTML is
<div class="dialog uproducts">
As .uproducts comes second, it overrides .dialog. But .dialog is used for other parts of the product page, such as Recommended Products, etc. so I didn't want to remove the bottom margin on .dialog, as it looks okay (for me) on those other parts.

I also added the .currencyrelated class to the end of altskin.css, as follows:
.currencyrelated {
font: bold 1.5em Arial, Helvetica, sans-serif;
color: #b00;
}

You can view the results here:
http://www.mrdtrading.co.uk/store/home.php?shopkey=martin

I'm surprised it wasn't done this way as standard - I think that having a photo and price of the product makes customers much more likely to click on them, rather than just having text.