PrestaShop 1.7 How to show more featured products on home page - desktop and mobile

By default, the number of items showing on the PrestaShop 1.7 featured product container box in the home page around 3 to 4 depending on the size of the screen which means the wider the monitor screen it will show more number of rows.

On the mobile template, it shows only 1 container box product and it goes down a long list of item which looks not very good.

Fortunately, we can modify the template to show more products by doing the following steps on the CSS stylesheet called "theme.css". Assuming that you are using the default original template (classic template).

1. Go to the web-hosting server where the PrestaShop 1.7 is installed and look for this directory.
.../prestashop/htdocs/themes/classic/assets/css

2. View/edit theme.css file use NotePad++ for easier editing. If

3. Look for the following line

4. Edit the width from 25px to 160px then save and re-upload the theme.css to overwrite the old one.

#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {
position: relative;
margin-bottom: 1.5625em;
height: 318px;
width: 257px;
background: #fff;
box-shadow: 0 0 5px 3px rgba(0,0,0,.05);
}

---

#products .highlighted-informations, .featured-products .highlighted-informations, .product-accessories .highlighted-informations, .product-miniature .highlighted-informations {
position: absolute;
bottom: 1.25rem;
z-index: 0;
background: #fff;
text-align: center;
width: 257px;
height: 3.125rem;
padding-top: .3125rem;
box-shadow: 0 -5px 10px -5px rgba(0,0,0,.2);
transition: bottom .3s;
}

---

#products .product-description, .featured-products .product-description, .product-accessories .product-description, .product-miniature .product-description {
position: absolute;
z-index: 1;
background: #fff;
width: 257px;
bottom: 0;
height: 70px;
}

5. Log on to the PrestaShop admin page and go to Design > Image Settings. Then edit the home_default image size to 156px



6. Reload the PrestaShop site and check if the changes take effect

7. If NOT then log on to the PrestaShop admin page and go to Advance Parameters > Performance and save the smarty catch again. Once that one click on Clear Catch button. See screenshot below

Now reload the site and check the product box containers should show more items and on the mobile template there will be 2 boxes for each row and it looks very nice.



change prestashop thumbnail container size | dimension | more product pictures show on row of featured product