Configuring the Number of Featured Products on Homepage in nopCommerce

Many times, nopCommerce users struggle 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.

nopfeaturedproducts-3-4

Let’s 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.

nopfeaturedproducts-FIVE-3-4

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">
            <strong>@T("HomePage.Products")</strong>
        </div>
        @foreach (var item in Model)
        {
            <div class="item-box">
                @Html.Partial("_ProductBox", item)
            </div>
        }
    </div>

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:

nopfeaturedproducts-FIVE_per_row-3-4

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).

Looking for quality nopCommerce Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Lavish Kumar

Founder, developer and owner of StrivingProgrammers.com - By profession, he is a software programmer / web developer, web designer & DBA. He is passionate about technology and electronic gadgets. He enjoys writing tech articles and developing web applications. He is a nopCommerce MVP and author of official nopCommerce Designer's Guide.

Leave a Reply

Your email address will not be published. Required fields are marked *