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

Externalism

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.

Nadya

Please visit pronopcommerce.com/… for complete guide on creating nopCommerce themes. :D – Nadya

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

Spellbind

Answer 3

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

Sanfordsanfourd

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!

Madelyn

No. You do not need to copy all the files. Just copy the file that you want to change. If you don't need to change any, then you don't need to copy any. – Nadya