How to customize the number of featured products on homepage in nopCommerce 3.4

Many times, I have seen nopCommerce users struggling while changing the number of features products that are being displayed on the homepage. In many situations, users might want to display a specific number of featured products depending on the design of the homepage (like 4 products per row or 5 and so on).  Well, the number of featured products is NOT hardcoded anymore in nopCommerce 3.4 like some of the previous versions. 

Today, I am going to explain how the nopCommerce layout manages the number of products on the homepage (by design).

This is how a demo nopCommerce homepage looks like with 3 featured products.

Lets say I want to display 4 products per row (or may be 5). For this example, I am going to enable 5 products to show on my homepage.

Question: How I can enable a product to be displayed in features products / homepage?
1) Go to this location ->  Administration / Catalogs (in  the top menu bar) / Products / Manage Products

2) Find your product that you would like to display on the homepage and click "edit"

3) Now, in the very first tab "Product Info", if you scroll down,  you will see an option that says "Show on home page:" <-- ENABLE this and SAVE

4) That's all - check your product on the homepage

So, after enabling 5 products to show on homepage, my features product section looks like this:

Now, what ?

Well, the number of products displaying on the homepage will depend on the width of the Homepage products div or width (i.e. product-grid home-page-product-grid)

For more information, see: Presentation (or Nop.web) / Views / Products / HomepageProducts.cshtml

<div class="product-grid home-page-product-grid">
        <div class="title">
        @foreach (var item in Model)
            <div class="item-box">
                @Html.Partial("_ProductBox", item)

Instance One: 3 products per row
If you are using _ColumnsThree.cshtml master page/layout, then 3 products are displayed

Instance Two: 4 products per row
If you are using _ColumnsTwo.cshtml master page/layout, then 4 products are displayed

Instance Three: 5 products per row
If you are using _ColumnsOne.cshtml master page/layout, then 5 products are displayed

Here is an example:

Now, you can simply define the width of the features products (or homepage products) in the css and it will automatically set the number of products per row (just adjust your width accordingly).

Quick Tip: If you would like to disable the featured products from the homepage, go to:
Administration > Configuration > Settings > Catalog settings

Check the settings "Ignore featured products" and SAVE (see screenshot below):

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment