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?
Steps:
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"> <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:
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):
