Changing Design

Hi Everyone,

I am just starting out with my new webstore and admit I am fumbling my way through.  I managed to get it all installed right and the admin area seems easy enough to configure to what I want but I don't really understand where I go to change esthetics/design of the store.  I would like to have the same background image as my website for continuity and I would like to add my logo or banner to the top, other than that the nop classic theme seems fine.  Can anyone help me out?

Thanks!

tleigh wrote:

Hi tleigh,

Welcome to the nopCommerce community. The process for changing a theme is involved (if this is your first time working with nopCommerce).

Part 1:

Under the root website you will find a themes folder. Inside of the themes folder you will find child folders for each theme available in nopCommerce. To start your own theme, copy one of the folders, rename it "tleighTheme", and open up the contents.

Inside of the folder you will find a theme.config file  edit this file with a text editor and change all references from the original theme so they now reference your new theme. This file is used to describe the theme when a user selects a theme from the administration section or theme selector.

Inside of your new theme folder navigate to "Views\Shared\" and open the file "Head.cshtml". Again you will need to change all references to the previous theme so nopCommerce knows where to load your styles from. In case you hadn't figured it out already this file is where you will reference all your CSS and script files that get used throughout the website.

Part 2:

Restart your website, login as an administrator and change your theme by navigating to Configuration > settings > General and Misc. and you should be able to select your new theme from a drop down list.

Part 3:

Change the CSS file as needed to get a new look and feel for your website.


Once you've done this and gotten familiar with this portion of theming; myself or others on the forum can help you with the more complex features of theming like overriding HTML views.

Good luck!

Hi Skylar,

Your detailed instructions made it very simple indeed.  Editing the css was not as easy, much more detailed than on my current website (as I don't actually have any programming knowledge) but I figured out most of what I needed.  Eventually I would like to customize the design a little more with an actual website banner if possible and see if there is a way to add a photo gallery, but that will have to wait until after the busy Christmas season.

Thanks so much for your help, I couldn't have done it without you!

Cheers, tleigh

tleigh wrote:

You're welcome.

Does this process for changing a theme still apply for NOP 3.2?
Thanks

UPDATE :   Yes it does.

Did this : https://www.nopcommerce.com/docs/72/designers-guide.aspx and it worked.