Jump to content

Home Featured looking a mess


Recommended Posts



I need help to adapt the module "home featured products" to the theme I use.

When I install this module it shows 1 product per row, the image is on the left and the button below the box. It looks totally a mess!


How can I make it look better, for example 4 products per row as in the prestashop default theme?


I use prestashop

I use a theme I bought


I enclose a picture of how I would like it to look.


This is my CSS:



/* ————— homefeatured.tpl ————— */


#featured_products {}


#featured_products .block_content {

padding: 15px 15px 12px 15px;



#featured_products a.product_image {

display: block;

padding: 6px;

background: #fff;

border: 1px solid #e1dfdf;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;



#featured_products div {}


#featured_products h5 {

padding: 13px 0 9px 0;

line-height: 18px;



#featured_products span.price {

font: normal 16px "Arial";

color: #3d474f;



#featured_products .exclusive {

margin: 18px 0 0 0;


This is my homefeatured.tpl



<!-- MODULE Home Featured Products -->

<div id="featured_products" class="block">

<h4>{l s='Featured products' mod='homefeatured'}</h4>

{if isset($products) AND $products}

<div class="block_content">


{foreach from=$products item=product name=homeFeaturedProducts}

<li class="ajax_block_product">

<a class="product_image" href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.name|escape:html:'UTF-8'}" /></a>


<h5><a class="product_link" href="{$product.link}" title="{$product.name|truncate:32:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:25:'...'|escape:'htmlall':'UTF-8'}</a></h5>

<span class="price">{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}{/if}</span>

{if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}

{if ($product.quantity > 0 OR $product.allow_oosp)}

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>


<span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>









<p>{l s='No featured products' mod='homefeatured'}</p>



<!-- /MODULE Home Featured Products -->


Thank you!


Link to comment
Share on other sites


#tmslider1 ul li div: change left:133px; to top:120px;

#tmslider1 ul li: change width to 150px and height to 250px


Play around with those and I'm sure you'll find a view that suits you :-)


This is what looked kind of like what you want, for me, using Firefox and inspect element. Try it out!



  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...