Nopcommerce Themes

Steps to install Nopcommerce themes

Synopsis – What are Nopcommerce themes

A theme is nothing more than a bunch of files that actually defines how a nopcommerce loaded website looks. The layout and appearance of a website, how a web site behaves and its functionality are all dependent on the theme applied over the site.

There are several elements that make up a well defined theme such as skins, cascading style sheets, images, and other resources. These themes are defined in special directories in your Web site or on your Web server. Depending upon the client's requirement, a theme can also include a .CSS file.

The file structure of a nop commerce theme is as follows:

Nopcommerce Themes

Relationship between .psd, .html and nopcommerce

Currently there is an ongoing debate regarding 'what's more useful in nopcommerce' – a psd or an html file. Though both html and psd files are useful while creating a nopcommerce design, an html file that is made by a person having a little bit of knowledge about nopcommerce is more helpful for a nopcommerce designer. In other words, an html file has to be advanced enough for a nopcommerce designer to use it in their work. Otherwise they have to spend hours to change the structure of the html file or to convert it to a psd file. A psd file can easily be used by most nopcommerce designers in their work.

Thus, both these files have their pros and cons. Depending upon the client's website functionalities and nopcommerce design expert, one has to decide on whether a psd or an html file will serve their purpose.

How to install a nopcommerce themes into a website?

(Note: These steps are written with the pre assumption that the user has downloaded the theme in a zip file)

  • 1.  Extract the contents of your zip file and copy it under "Themes" folder as shown in the figure below.

Nopcommerce Themes

  • 2.  Login in to your website with your username and password.

Nopcommerce Themes

  • 3.  Click Admin icon on your website

Nopcommerce Themes

  • 4.  Go to Configuration > Settings > General And Miscellaneous settings

Nopcommerce Themes

  • 5.  Click Store Information > Store theme. Lastly, select new theme from the options displayed and Save.

Nopcommerce design Tips and Tricks

  • If there is no changes in the layout of the design when making changes in the CSS style sheets, try first deleting the history of the browser you are working on, and reloading the page.
  • Have good understanding of the difference between classes and id.
  • Keep in mind that you cannot start the name of your defined classes and id with a numerical or any non alphabetical character.
  • Get complete knowledge on the CSS features to style your page in a advanced manner.
  • Mozilla offers a feature ADD on plug in. Try making use of it, as it is a useful tool and allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
  • Remember that different browsers use different default values for various CSS properties. So, always make sure that your style is compatible with all browsers. After designing is done, try testing in browsers like IE, Mozilla, Opera, Safari and Chrome.

Nopcommerce themes are quite a vast topic, so it is fortunate that it is supported by a active community. We have tried to update the users on nopcommerce installation in this article. For any more information on nopcommerce themes,contact us today!

Subscribe to Newsletter
Community poll
Do you like nopCommerce?