Magento is a very powerful and flexible platform and we plan on spending quite a bit of time looking how you can best make it work for you. Today is no different. In this article, we’re going to look at how to install new Magento themes using the Magento / extension key.

Installing Themes through the Magento Connect Manager

This tutorial on working with Magento themes uses a newly installed version of Magento Community Edition (1.8.1.0). When choosing themes for your website, you’ll want to make sure you check the theme’s compatibility with your version of Magento. Also, you’ll want to read the theme designer’s notes and tips for the configuration and control of your store. Usually, they give you a pretty good idea of what you’ll need to keep in mind when working with the Theme. Additionally, the notes will help you take advantage of any added features that might come with your theme.

As usual, before you do anything else, backup your files! I can’t stress this enough. I mentioned in a previous post that my team and I have been experimenting with Magento quite a bit lately and, while it’s a powerful system, it can also be a bit delicate at times. Make your life easier and perform a backup before installing any themes or extensions.

What we will be using for this tutorial is a theme from TemplatesMaster. As shown in the image below, the template we are going to use is compatible with the current version of Magento that we have installed. For the Magento Connect Version, we will choose 2.0 as we are using a more recent version of a Magento system. If you are unsure of which version you should select, you can find more information on the Magento Wiki by clicking here. Agree to the obligatory “License Agreement” and then click on the “Get Extension Key” button.

You will be taken to a new window showing the extension key after clicking on the “Get Extension Key” button. Copy and paste the link into a new document or a text editor for easy access to it later in this tutorial.

If you do not have your “Magento Connect Manager” window open yet, It can be found on your dashboard link menus. From your Magento dashboard, hover over the “System” link, and from the drop down menu, hover over the “Magento Connect” menu option and then click on “Magento Connect Manager”.

Because you will be making a change on your system, Magento will prompt you to login to your system again. This is the same login data you use to get into the Magento administration section.

After logging in, you will be directed to Magento’s “Extensions” tab. From this page, you may install various extensions using extension keys found in the “Magento Connect” pages. In our case, we are installing a theme. This is where we can place the extension key we received from the connect page. Notice under the “Settings” tab the section for maintenance mode. It is good practice to put your store into maintenance mode while making changes to your system. By default, it should be checked for you. But if it’s not, put a checkmark next to “Put store on maintenance mode while installing/upgrading.”

We will place the extension key on the space provided under the “Install New Extensions” tab. The extension key is actually a link to the file that is to be installed in our system. The file will be transferred and installed directly from the Magento website to your store. After pasting the link, you may now click on the “Install” button.

If you already downloaded the theme files you would like to install, use the “Direct package file upload” section and click on the “Browse” button to locate the files on your system. After selecting the file, click on the “Upload” button.

You will see a confirmation of the file connection through a small window asking you to wait a few seconds for your system to establish the connection. This is not the actual installation but rather Magento verifying that the link we are using is stable.

If you pasted the wrong extension key by mistake, you will receive an error that like the one below.

If your extension key is correct, you will be able to see the details of the files you are trying to install. As we are installing a theme, we can see that under the “Package Name” section is the theme files we are trying to install. You will want to verify the package name of what you are about to install as it is quite possible to paste a valid link to an extension or theme that you are not intending to install. Magento will gladly connect to the wrong extension if you instruct it to. If everything is in order, we can now click on the “Proceed” button. As an added note, the steps earlier established the existence and stability of the connection to the installation files. It is at this point that we are actually installing our theme’s files.

While the installation process is going on, you’ll be able to watch the progress in a console window showing what the Magneto Connect Manager is doing under the “Manage Existing Extensions” tab. Take note of the system message on the bottom of the screen for further information of what your installation status. As ours is green and includes a lovely message, this means the installation had no errors. If the system message is light red in color, make sure you read the error message and make the appropriate changes to your system. Since all went well, you may now click on the “Refresh” button below the tab to see the changes.

Just in case you get an error during the installation, you can try to reinstall the extension by selecting the “Reinstall” option under the “Actions” column. Or, if the extension you installed refuses to work for you, select the “Uninstall” option and click on “Commit Changes.” If no errors have occurred then we can simply leave the “Actions” option blank and click on the “Refresh” button again.

 

We have now successfully installed the theme and we will now logout of the “Magento Connect” window and go back to the dashboard to configure the theme we have installed. Take note that, while the theme is already installed in our system, we will need to configure and activate the theme first before it will show up on our public site.

After logging out of the Magento Connect Manager window, go back to your dashboard for the theme configuration by hovering your cursor over the “System” tab and click on the “Design” link.

We are now on the “Design” page of our store. As illustrated below, there are no other themes activated for our store. Should you have multiple theme designs for your store, this is the page where you will be able to manage them. In order to activate the theme you have just installed, go ahead and click on the “Add Design Change” button.

Clicking the “Add Design Change” button will open the “New Design Change” page. Select the “f001” option from the “Custom Design” drop down selection. When themes are installed successfully in your system, the names of the themes will be listed on this drop down selection. The theme we have installed is named “f001”. The other options (blank, default, modern, and iphone) are themes that came with the new installation of the Magento Community Edition version 1.5.1.0. You may want to check out the themes that are already installed on your system before installing new ones. You may find that, while basic, one of these designs is better suited for your purposes.

We may save the changes immediately if we want the theme we selected to become the default theme for our store. Leaving the date options blank.

The date options are there to allow you to change the theme only for a given amount of time. “Date From” is the starting date the theme will take effect and “Date To” is the last day the theme will be live. The date is based on the time configured on the server that Magento is installed on. This is nice little feature to allow you to run different themes based on a product launch, promotion, holiday, or anything else you can think of that might be suited to a custom design.

If you have entered the correct information, simply click on the “Save” button and a system message will show you that the theme is active or saved.

 

After saving our settings above, the selected theme will now show on the “Design” page. If this is saved and no errors on the system message appear, we can go ahead and look at our store and see if the theme shows up. Depending on whether you have caching on your website, you may need to refresh the page a few times to see the changes.

 

http://www.magentocommerce.com/magento-connect/themes.html

http://www.webdeveloperudaipur.com

https://www.youtube.com/user/websolutions4all

https://www.google.co.in

https://www.youtube.com