Custom Magento theme Part 1

Magento theme customization will be a difficult task for beginners. The level of difficulty will be calculate by PSD design or customer’s requirement. It can only move an element to new position or hide or show an element. But it can create a new element, features etc. In this tutorial, I will help you how to custom Magento Theme (Magento front-end development).

Magento theme structure

After you install your magneto store, You can see the structure like bellow image:

The first part of theme is in /app/design/fontend/. You can see, there are 3 sub-folders. Base folder is the base theme. It can be override by other folder. For example, we have rwd theme. It will be override base theme. But if a file isn’t exist in rwd, Magento will load file from default folder and base.  You can edit HTML (phtml), configuration XML. HTML file will be contain in /template folder. For example theme rwd. The template folder is: /rwd/template/.

The second part of theme is called skin. It is in folder /skin/frontend/ . You can edit CSS, JS, Images from this folder.

We often using theme rwd to create a customisation theme for our customer. Rwd supported bootstrap. So you are easier to create responsive design. You can create your custom Magento theme by duplicate the theme and change name. This is a simple way to start convert PSD to Magento I will show you in next tutorial.

Before start customize you have to disable cache.

Follow is 6 steps to disable Magento Cache:

  1. Log in to the Magento Admin Panel as an administrator.
  2. Click SystemConfiguration > Cache Management.
  3. On the Cache Management page, click Select All.
    Note: The Page Cache option at the bottom of the list is available only in Magento EE.
  4. From the Actions list in the upper right corner of the page, click Disable.
  5. Click Submit.
    The following figure shows an example.disable-magento-cache
  6. Click Submit.
  7. The following figures shows all cache types disabled.


Now you can know about Magento theme structure. In next part, I will share more.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s