Get a Free Quote

You will receive quote within 24 Hrs

We respect your privacy

How To Make the Best Ecommerce Website Design For Magento?

Magento Web Development


Magento can be used to make your shopping cart online since it is an ecommerce software. However it is more often than not that the client requires customizing the basic theme and changing it to something very different and something that he desires. The procedure required to do so needs some designing and programming skills and thus may require professional help.

Magento is an ecommerce software that can be used to make your shopping cart. It is common to wish to have your own design for a Magento shopping cart website. The process of making a new Magento Website Design though simple may require some graphics as well as programming knowledge and hence if you are totally new to this it is best left to the capable hands of the Indian web developers.

A website design for Magento consists of several different sections. This can be mainly broken down into two sections the design and the skin. The basic directory structure of the Magento design is as below considering the new theme that we are about to make is called theme5.

1. Base – contains the theme files
2. Default – contains the default theme (basic theme)
3. Theme5 – contains the theme by the name theme5.

Here we will assume that we have set Magento to use the theme by the name Theme5. Thus if we were to try to load the website in the browser Magento would first attempt to load the file package/theme/catalog/product/view.phtml under the theme5 directory. When it doesn’t find the file it will check the default theme in the same directory, theme 5 again when not found it will revert back the default theme in the default directory. And if for some reason that is not found too then and then only will Magento throw an error message. The files Magento tries to access are listed below:

1. App/design/frontend/theme5/theme5-theme/catalog/template/product/view.phtml
2. App/design/frontend/theme5/default/catalog/template/product/view.phtml
3. App/design/frontend/base/default/catalog/template/product/view.phtml

For the sake of simplicity we shall allow Magento to load the default theme files from the base/default directory and not copy a copy of the basic theme to the theme5/default directory. Although it is possible to do so it is beyond the scope of this article.

Magento Extensions That You Should Install on Your Website

A similar kind of theory applies to the skin folders. It too falls back on the base/default directory. The templates may have a similar theme however the style sheet and Java Scripts files of the theme are usually different.

To make matters even simpler we shall have a look at the proposed directory structure considering the name of the theme is theme 5.

1. App/design/frontend/theme5
2. App/design/frontend/theme5/default
3. App/design/frontend/theme5/default/layout
4. App/design/frontend/theme5/default/template
5. App/design/frontend/theme5/theme5-theme
6. App/design/frontend/theme5/theme5-theme/layout
7. App/design/frontend/theme5/theme5-theme/template
8. Skin/frontend/theme5
9. Skin/frontend/theme5/default

Once the folders for the new theme are created you need to copy over the contents from skin/frontend/default/default to skin/frontend/theme5/theme5-theme. Once again we need to make sure that this custom theme of ours is enabled. This custom theme can be enabled by going to the admin panel menu System Configuration Design and selecting the new theme.

Now fire-up your favorite FTP program and make the following directories:

1. App/design/frontend/theme5/theme5-theme/template/catalog
2. App/design/frontend/theme5/theme5-theme/template/catalog/product
3. App/design/frontend/theme5/theme5-theme/template/catalog/product/view.phtml

Now add the following code to the view.phtml file to prove it is working:

If it works this means the new theme we created is working. We can now customize the theme further to suit our needs. To start with we need to copy the contents of the file base/default/catalog/product/view.phtml to our file above, overwriting the existing content. We can now modify this basic template to suit our needs.

As you may have now guesses it is possible to create a new theme in a jiffy by simply change this basic theme that we have and adding custom Style sheet and JavaScript (making new CSS and JS). This new theme of our can be based on an HTML design provide by a designer or on the other hand can be made directly by editing the file. It is a good idea to first make the design in HTML and then integrate it into the structure above to have a new theme ready to use.

Feel free to contact our Magento Web Developers team today.

Why Choose Alakmalak As a Your Growth Partner?

Using a Magento Demo Website to Understand its Features

Alakmalak is a web development company in India that offers services for several technologies. There have been around for a very long time and have developed over 2500 projects for clients all around the world. They have highly skilled web developers with a great deal of experience.


  • How to Make Magento E-Commerce Website?
  • Top Magento Ecommerce Website Designs
Rushik Shah 25 October , 2013

Comments are closed.

Share via
Copy link