Thursday, January 8, 2015

How do create your own theme in nopCommerce?

In nopCommerce, we can create our own theme and modify the existing code files without affecting the original ones.

1. Create a new folder with your theme name in Themes folder in the Nop.Web project.
e.g. Themes\[new_theme]
* Or you can copy the DefaultClean folder in the Themes folder and rename it to the new theme.

2. Whenever you want to modify the codes in any files, you can just copy the file, create the respective folder in your new theme folder, and paste the file over. Then, modify your new file.
E.g. If you want to change the home page.
step 1. Create a Views folder in your Themes\[new_theme]
step 2. Create a Home folder in your Themes\[new_theme]\Views folder
step 3. Go to Views\Home folder, copy Index.cshtml file over to your Themes\[new_theme]\Views folder
* Remember to modify the Index.cshtml in your own theme folder whenever you want to customize the home page.
Same goes to other files.

3. Modify the theme.config file

[new theme name]
  supportRTL="true"
     previewImageUrl="~/Themes/[new_theme_name]/preview.jpg"
     previewText="The '[new theme name]' site theme.">


4. Go to Administration area to select your new theme.
Configuration >  General And Miscellaneous Settings > Select default store theme.

** Please note that I am just a beginner in developing nopCommerce e-commerce website. My ways of doing might not be the perfect or very good method, and just how I am working on them currently while learning.




No comments:

Post a Comment