HTML to nopCommerce theme

Question

I am new to nopCommerce and trying to make HTML to theme on it I googled lots of things but not able to get proper way to create customized theme nopCommerce, can any one help,

Thanks in advance

Answer 1

The easiest way:

1. Copy the folder at ~/Themes/DarkOrange to ~/Themes/YOUR_THEME. Modify the corresponding items in theme.config.

2. If you need to change any view, copy that view from ~/Views/SUB_FOLDER/FILE_NAME.cshtml and paste it under ~/Themes/YOUR_THEME/SUB_FOLDER/FILE_NAME.cshtml.

   For example, if you want to change the code in ~/Views/Shared/_ColumnsOne.cshtml, copy that file and paste it under ~/Themes/YOUR_THEME/Shared/_ColumnsOne.cshtml.

3. If you do not need to change any view, then modifying ~/Themes/YOUR_THEME/Content/styles.css is enough. (Also make sure you update ~/Themes/YOUR_THEME/Views/Shared/Head.cshtml to point to your CSS)

Rule of Thumb: nopCommerce will look for the specific view in your theme. If it can't find the view then it falls back to the original views at ~/Views. Otherwise your theme's views override the original views.

Answer 2

In addition to the Designers guide there are some nice articles describing why and how to use nopCommerce themes:

Why nopCommerce Theme?

How to create nopCommerce themes

Answer 3

A little help here: Overview (Designer's Guide)

Answer 4

Copy all the files inside ~/Views to your Themes: ~/Themes/YourTheme/Views

Then just modify any .cshtml file inside.

I hope it helps!