Theme Editor - How to add image to the news on home page

Tuesday, July 11, 2017

How to make news image from news short description.

Please upload image to your store. Next step is to open news item which should have preview image. In the Short Description field you need to enter the HTML code. In my case it’s

„<img src=”Your img URL" width="100%" />”

I used attribute width=”100%” to fit the image to the news size. You can use also CSS class to style it as you like.

Open theme editor. In the available views section please look for HomepageNews.cshtml. It’s responsible for showing News section on the Homepage.

We need to find @Html.Raw(item.Short). We need to move it to <div> with class „news-head”. It will show image above title.


Save changes by clicking "Save" button in the top of the screen. Results:

To make small changes like this you can use our Theme Editor for nopCommerce. Get it there:



back to top