Get a Free Quote

We respect your privacy

How To Make the Best Ecommerce Website Design For Magento?

10:44 am

How To Make the Best Ecommerce Website Design For Magento?

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 Development Services

Magento Development Services
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.

Magento Web design

Magento Web design
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.

Magento Module Development

Magento Module Development
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.

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 customise 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.

If you like this blog Please Plus it, Like It ,Tweet It and best yet link to It.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)

Comments are closed.