While I have seen quite a few tutorials on the internet that show people how to install Magento themes, I’ve noticed that few offer thorough instructions. While such tutorials may work well for demo or barebones stores — while still not really recommended — I’d be very wary of following such tutorials on production stores because they can end up doing more harm than good.
If you’ve watched some of my other tutorials, you already know that I don’t take shortcuts and I don’t expect my readers to take them either. For this reason, I have written this step by step tutorial which shows you how to install your theme the right way. While I encourage reading what I’ve written here because it clarifies what is happening in the video, I strongly recommend watching my video because it does a much better job of walking you through the entire process.
While I am installing the theme in Magento v1.7.0.2, I have verified that the tutorial will also work with later Magento versions such as 1.8.x.x as well as 1.9.x.x.
Can’t view the video? Watch it on YouTube
So without further ado, let’s get started!
Preparation:
As with any process that requires you to transfer files from your computer to your server (or web hosting account), you will need an FTP client. If you already have Dreamweaver or another type of program or are deciding to use your web host’s control panel, that’s fine, but if not you can use FileZilla which is the program that I am using in my video. FileZilla is actually very good since it’s compatible with various operating systems and it’s free which is mainly why I use it in my videos.
Connect to your server:
After you’ve set yourself up with an FTP client, you’re going to want to login to your server. This step requires you to have your server host information and login credentials handy.
Inspect your theme:
Once you’ve established a connection with your FTP client, you’re going to want to prepare your theme. In my case the theme was zipped, but I unzipped it in order to inspect the folder contents. Now of course, you can always upload the theme zipped and then unzip on your server but I prefer to see exactly what I am uploading prior to actually doing so.
Now I’m using a free theme in the installation video and interestingly enough, this free them is also backwards compatible. In other words, the designer created files for the latest version of Magento and also created (or maybe had) files that are compatible with older Magento versions and put those files in a folder named ‘backward_compatibility’ which you may have or not have because it depends on your theme.
Of course, what you will want to look for is the ‘theme’ folder, but in your case, you might not have a theme folder. Instead, you might only have the folders and files that go into the theme folder and those folders are ‘app’, ‘media’ and ‘skin’ which are folders that we need to upload to our existing ‘theme’ folder that is located on our server where Magento is installed.
Upload your theme (a bit of a process):
Before you upload any files, be aware that you can corrupt your Magento install by just uploading these folders over the existing ones.
Instead what you will want to do, is only upload new files from within the folders to the corresponding folders (directories) on your server. In other words, you will want to go into your ‘app’ folder and compare the contents of your ‘app’ folder to the ‘app’ folder located on your server which can be found where you have Magento installed.
For example, if Magento is installed in the root directory, the ‘app’ directory would be located there. Now if you have Magento installed in a subdirectory such as ‘magento’, then the ‘app’ folder would be located in that subdirectory.
So next we will click on the ‘app’ directory on our server so that we can see the contents. So once you get into that directory, you will see a few other directories which in many cases is ‘code’, ‘design’, ‘etc’ and ‘locale’. Now while we can simply upload the new folders from our new theme directly to our server and overwrite these directories, we won’t because it would overwrite existing files. Instead, we will go one level deeper and look at the contents of those directories.
For example, let’s click on the ‘code’ directory and look at the contents of it. Once in the directory, you will see that the contents may or may not match — in my case they don’t. Because my ‘code’ directory on my server contains a ‘community’ and ‘core’ directory while the directory on my local computer contains a ‘local’ directory which means that I can upload the ‘local’ directory directly to my server.
Now if I had a matching directory in the ‘code’ directory, I’d click on the directory and then examine the contents with the contents of the directories on my remote server and only upload files and folders that I do not have on my remote server so that I avoid overwriting existing directories and files. Which is what you will want to do with each and every folder of your new theme.
For example, you will want to go into the ‘design’ directory and compare the contents of that directory which in my case had a ‘frontend’ folder located in both the local and remote ‘design’ directory. So I then clicked on the ‘frontend’ folder to see whether contents match the contents on the remote server which in my case did because the directory contained a ‘default’ directory which again I didn’t want to overwrite because it would have made me lose my existing themes. So I went into the ‘default’ directory and then finally came across themes that are installed as default on my remote server.
However, on my local computer, I found the theme that I downloaded in that directory and it was named ‘bluescale’ and since I had no folders on my remote server that this folder would overwrite, I uploaded it to my remote server and then went onto my next folders which were ‘etc’ and ‘locale’ and repeated the same steps — compared the contents of each directory and only uploaded the files and folders that didn’t already exist. Which I then proceeded to do with the rest of the folders other than the ‘app’ folder — such as ‘media’ and ‘skin’ which you may or may not have.
Now in some cases, you might have files with the same name which you may decide to overwrite if you are no longer planning on using your old theme and if the name of the files and folders of your new theme match. Though, I would backup the old theme’s files and folders prior to overwriting them just in case something goes wrong.
Enable your theme:
So once you have uploaded all your files and folders, you will want to enable your new theme via your Magento admin panel. Now there are actually a few ways that you can enable your theme. For example, you can enable it on a page by page basis or globally.
In other words, you can use your new theme on specific pages and use other themes for other pages or you can change it globally and have your new theme displayed in your entire store.
Enable theme on a page by page basis:
To install on a page by page basis, you will want to click on the ‘CMS’ link in your admin panel which is located in the header section and then click on the ‘pages’ link in the dropdown menu. Then you will see the name of the pages that you can change the theme on. For example, you can click on the ‘home page’ link to change your homepage’s theme from the current theme to the new one.
Once you have selected a page you click on the design link that is located in the left column named ‘Page Information’ and down to the section of the page called ‘Custom Design’ and choose your new theme from the select menu that is located next to the ‘Custom Theme’. After you’ve selected your them, simply click the ‘Save Page’ button in the top right to enable the new theme.
Enable your theme globally (use the same theme in your entire store):
Now to enable your new theme globally, you simply click on the link ‘System’ which is located in the header section of your admin pages and then click on the ‘Configuration’ link from the dropdown menu and then once on the configuration page, you click on the ‘Design’ link which is located in the left column named ‘Configuration’.
Then in the themes section you will see an input box next to ‘Default’. Here you type in the name of your theme which in my case is ‘bluescale’ — in your case it will be whatever the name of your new theme is — and I then click the button ‘Save Config’ which is located on the top right of the page.
Now once you’re finished with these steps, you will want to keep in mind that some themes get a little fancy and therefore require a few extra steps. For example, you may want/have to change your columns or other parts of your homepage or product listing pages which in most cases is specified in a readme.txt file that is usually included with your theme. In such cases, you will want to look a little further into that.
Find an awesome Magento theme:
Now if you haven’t already found a theme that suits your store, I have created a list of themes that I think are pretty cool. While there are both new and free themes available, I recommend checking out some of the paid ones because they use responsive web design which I happen to be a fan of. If you’re not familiar with responsive web design, I have written about it here where I explain why I think it’s important.