Knowledgebase

How to create a subtheme in Magento

If you want to edit the layout, style or you anything that has to do with the theme of your Magento store, the recommended way to do it is not to change the code of the original files but to create a child theme and modify its files instead. This will protect the changes from being overwritten when you upgrade Magento or the original theme.

Magento's structure is based on a fall-back hierarchy, which means that if you have set a custom theme to be the default one, Magento will use the files of that theme, and if it doesn't find some of the necessary files it will use the ones from the base theme that comes prepackaged with Magento.

For example, let's say that you use the default base theme and you want to edit the code of the file catalog.xml. If your Magento is installed directly in the public_html directory on your Magento hosting account, meaning the store is accessible at yourdomain.com, you need to go to public_html/app/design/frontend/default on your account and create a folder for the subtheme (e.g. custom_theme). Then inside that folder you need to create another one called layout. After that you need to go to public_html/app/design/frontend/base/default/layout, download to your local computer the file catalog.xml, make the desired changes with a text editor (e.g. Notepad, Wordpad) and then upload it in public_html/app/design/frontend/default/custom_theme/layout. You can create folders and upload/download files from the Files section of the Pixie control panel or you can do it with an FTP client (e.g. FileZilla). The next step is to log in to the admin panel of your Magento, go to System>Design, click on the Add Design Change button and select the custom theme/subtheme.

The above mentioned fall-back hierarchy means that you don't have to copy all the files from the base theme to the custom theme. You can only copy files that you want to change. In this way you can change any XML file. You only need to download it from public_html/app/design/frontend/base/default/layout, edit it and upload it in public_html/app/design/frontend/default/custom_theme/layout. You can also do the same things with any of the base theme files (e.g. template files); simply check the name of the folder containing the file as it exists in the base theme, create a folder with the same name inside the subtheme's folder, download the file, modify it and upload it in the newly created folder.

In case you want to change the style, meaning the CSS files, and the images of the base theme, on your hosting account go to public_html/skin/frontend/default and create a folder for the child theme (e.g. custom_theme). Then go to public_html/skin/frontend/default/default, copy the folders css and images and paste them in public_html/skin/frontend/default/custom_theme. And you can safely edit any of the newly copied files that are in the directory of the custom theme.

You can also create a subtheme of any theme not just of the base one. For example, if you want to create a child theme of the theme called modern (it comes prepackaged with Magento), go to public_html/app/design/frontend/default/modern, copy the folders inside and paste them in the newly created custom theme directory (e.g. public/app/design/frontend/default/custom_modern). You have to do the same for the CSS files and images by copying the folders from public_html/skin/frontend/default/modern to public_html/skin/frontend/default/custom_modern. Then you can edit the copied files and change the default theme from the admin panel. Note that in this case you should copy all the files not just those that you want to edit.

Was this answer helpful?

 Print this Article

Also Read