How To Install A Magento Theme – Ultimate Magento Theme Tutorial

magento-theme-tutorial

How to Install Free or Premium Magento Themes

Magento is becoming one of the best E-commerce store which is gaining popularity by leaps and bounds. With this rate of increasing popularity, many existing and new stores are bound to migrate or start with Magento pretty soon. Although, Magento is quite good but it requires proper knowledge before you indulge yourself into Magento customization. If you want to create a new Magento theme by yourself that’s a different story altogether but if want to leverage the functionality and layout provided by any premium or free Magento theme then you should know how to install the theme soon after successful download.

There are two ways to install a Magento theme

  1. Install via Magento Connect
  2. Install via placing appropriate theme template folders in your Magento Installation.

It entirely depends upon the theme availability and theme quality but if the theme is available in Magento Connect (it has a good collection of free & premium themes) then you can install it very easily without any technical knowledge. Following is a breakdown of how to install a Magento theme via Magento Connect and via inserting new theme template in your existing or new Magento installation.

How To Install a Magento Theme Via Magento Connect

To install a theme from Magento Connect you need to follow certain steps which are explained below (Advance users may skip few steps):

1. Select the theme by browsing the huge Magento theme archive. OR, If you know the direct URL of your favourite theme just open it’s Magento connect URL

2. Now, you will see a button right under the theme image called “Get Extension Key”. You need to click “Get Extension Key” and agree to extension license agreement.

magento-connect-themes

3. After you select agree checkbox and click “Get Extension Key” you will see the Magento extension key right there itself (displayed in the box). You need to paste this extension key in your store’s Magento connect tab. Keep it safe.

4. Copy this Magento extension key. E.g. It will look like “magento-community/Magik_Autocomplete”

5. In order to install this theme into your Magento store you need to login to your store admin panel and go to System->Magento Connect->Magento Connect Manager. Magento connect manager will ask you to login again. You need to use your store admin login credentials to get past the login screen.

magento-connect-manager

You need to paste the theme extension key copied from the Magentocommerce.com’s Magento connect here.

Magento connect checks for the extension key validity and downloads the theme on your system. Depending upon your internet connection speed (bandwidth) and theme size it will take time to install. These extension keys are specifically created with a unique combination so that there is no confusion over which extension to download. If you have correct extension key and there are no errors in theme or your internet bandwidth you will not see any error messages. In case there are any error messages try downloading and installing again. If you do not succed at all then you can contact the theme owner or ask questions in the theme documentation tab.

6. Soon after you see “Theme successfully installed” message go to System->Configuration->Design->Themes and provide the theme name in Default field (which will change your default theme to this new theme) and click “Save Config” button at the top right corner of your screen.

magento-system-design-configuration

7. A Magento theme revolves around different columns in your theme layout. In case your store home page doesn’t load properly and shows weird design then go to CMS->Manage Pages. You will notice that there are two different layouts for the home page (may be more depending upon how many themes you have tried in the past). Based on your new theme layout disable all the other home page layouts. You can easily disable/enable the layouts by clicking “Enabled” or “Disabled” links provided in the status field.

magento-cms-manage-pages

8. Check your home page if the store is looking just like your new theme, you are done. If you still see problems chances are that you haven’t disabled the correct home page layout. Repeat step 7 until you see a correct store home page (not required if you have only two home page layouts showing in your “Manage Pages” section.

This was the easiest and fastest way of installing a Magento theme using Magento Connect manager.

Many Magento theme sites don’t publish their theme template in Magento connect (sometimes their themes do not pass through Magento connect guidelines). These themes are provided directly by the theme owner sites. If you are interested in downloading a Magento theme from such sites then following are the steps required to install a Magento theme within your existing Magento installation.

How To Install A Downloaded Magento Theme

Unlike single template themes (WordPress) Magento themes are quite different as its layout depends on four elements i.e.

  1. Layout – Present is (app/design/frontend/your_interface/new_theme/layout/)
  2. Templates – Present in (app/design/frontend/your_interface/new_theme/template/)
  3. Skins – Present in (skin/frontend/your_interface/new_theme/)
  4. Locale – Present in (app/design/frontend/your_interface/new_theme/locale/)

In order to install and integrate a new theme you need to follow few steps more than what you are accustomed to follow in case of wordpress themes.

If you have already downloaded your preferred Magento theme then here is how you can install and integrate this new theme into your existing Magento installation.


  1. Uncompress the zip file containing theme templates (you can use winrar or winzip to uncompress files on windows machine or use unzip zipfilename.zip to uncompress files on Linux server)
  2. Copy entire app folder of your new theme under Your_Magento_Installation/app/design/frontend/default/ so it becomes like Your_Magento_Installation/app/design/frontend/default/new_theme
  3. Copy entire skin folder of your new theme under Your_Magento_Installation /skin/frontend/default/ so it becomes like Your_Magento_Installation/ skin/frontend/default/ new_theme
  4. Now, as you have added your newly downloaded theme in your Magento store you need to login to your Magento store admin to tell Magento which theme to use as layout.
  5. Sometimes Magento Cache doesn’t let you see your changes instantly. In order to test your new theme it would be wise to disable cache for the time being. Go to System > Cache Management and select “Disable” then click “Save Cache”. Once you are done with all the steps Enable the cache again.
  6. Now go to System -> Configuration and select the Design Tab
  7. Type the name of your new theme which you have copied in your Magento installation in front of skin (Images/CSS) input box and click “Save Config”.
  8. Optional – If you have downloaded a widget ready Magento template then you need to install the widget provided with the theme. In order to install Magento theme widget you have to go to CMS -> Static Blocks and click on “Add New Block”. Based on your widget installation instructions you have to add your new widget and activate that using this new widget block. Finally select “Enabled” and click “Save Block”. Go and select “Custom Design” Tab and in Layout select “Homepage” otherwise your widget won’t show on home page.
  9. Optional – Home page of default Magento store is a CMS block so you have to provide custom code there in order to display something on home page. To do so you have to go to CMS- > Manage Pages and select “Home page” and in the content area type the home page content code which comes up with your new theme. You can change this area anytime you want.
  10. All set. Open up a new page on your browser and type in your store name to see the new theme. Your new Magento theme is ready to be used.

I have installed a New Magento Theme but i can’t see any products showing up, why?
Well, It can only happen in case of a new store. You need to follow few steps to fix this problem


  1. Go to Catalog -> Manage Categories
  2. Select the category you want to show on your Homepage and look for its ID.
  3. Go back to CMS -> Manage Pages and select Homepage
  4. Paste the code for showing Products on home page with the selected category ID.

I hope this is quite comprehensive tutorial for installing Magento themes. I would love to hear your thoughts, views and experiences. Please leave me a comment and let me know.

  • Pingback: Removing Pet Stains | Surviving Your Home

  • Pingback: Steam Carpet Cleaning | Surviving Your Home

  • Pingback: How To Install A Magento Theme – Ultimate Magento Theme Tutorial … | Magento News

  • http://www.silverwebbuzz.com/ bradon

    To the point explanation of installation.
    really nice tutorial.

  • http://www.magentotechnologies.com/ Magento Technologies

    great tutorial. It really helps for people who are new to Magento. But at Magento Technologies we highly recommend that merchants should hire a magento developer if they want to maximize the everything for their ecommerce website.

  • http://www.magentotechnologies.com/ Magento Technologies

    great tutorial. It really helps for people who are new to Magento. But at Magento Technologies we highly recommend that merchants should hire a magento developer if they want to maximize the everything for their ecommerce website.

  • Spoam

    shut your ass spammer

  • http://starcraft-hack.com starcraft hack

    Just got sent to your site through stumbleupon, I thumbs-up’d it :D

  • S Gopalakrishnashetty

    superb tutorial

  • S Gopalakrishnashetty

    i have downloaded the magento blue theme and it doesn’t contain any of the files in app folder…my question is how it could be empty?

  • http://www.magentomagik.com/ Ashish @Magento Themes

    Magento Blue Theme? I am not sure which theme you are referring to but i know that sometimes zip files doesn’t download well. You can download same theme again and see whether it contains all the folders. Alternatively, you can also download free Magento Themes from our theme collection.

  • http://www.pinatacenter.com Dann

    Hello there I’ve been posting this everywhere with no results, I’m not a developer, I’m just a regular Magento user and I’ve been having this issue, I’ve been trying to install extensions without success, at the bottom in the black screen the following text appears: “Please wait, preparing for updates…” the page seems to be loading for about 2 minutes then stops, the screen goes black and it won’t do anything after that, if I try to navigate away or refresh the following message pops up:

    “Are you sure you want to navigate away from this page?

    There are PEAR processes running.
    If you will close the window or navigate away from the page, installation will be interrupted.

    Press OK to continue, or Cancel to stay on the current page.”

    It doesn’t matter if I click cancel still won’t do anything. Any help is appreciated, thanks!

  • http://sexozoid.com samtam022398

    awsome article can you add more?

  • http://www.wrdrkqwrn.com Gertrude Roccia

    Kudos for posting such a useful weblog. Your weblog isn’t only informative but also really artistic too. There commonly are incredibly few persons who can write not so basic articles that creatively. Maintain up the terrific work

  • http://legalize-weed.com SebrinaGrierqfixwgp

    whats the song

  • http://mobilethemesworld.net/ Mobile Themes World

    Thanks for this tutorial.its really helpful.

  • http://www.magento-themes.jextn.com magento themes

    Really a good tutorial with step by manner.Its very helpful as i am also new to Magento.I was in search of this kind of stuff.

  • Jacknon

    Brilliant post.. like it

  • Tapanysodagar

    Great Tutorial for installing magento them. Thanks it was very helpful

  • MOhanKumar

    what is code for showing Products? explain that part

  • http://www.orangecollarmedia.com Magento Install

    Installing magento themes can be a little tricky especially if you have never done it before. It is great to get the help from people who know what they are talking about.

  • Mpwdesigns

    you lost me at step 4, right above about paste code for showing products on home page where do i get this code

  • Anonymous
  • amit

     ThIs is a Fantastic Document… Thanx a ton

  • amit

    Hi there ,
        I am new to Magento. i have been trying to create my own template in magento since 3 days but can’t find the precise file that needs to be modified. and which are all files required to create a new template? 

    I would appreciate your help..:)

  • Yu

    Thanks for well written tutorial.  New to magento and trying to install a theme, which your tutorial helped me to do.

  • Jenit

    Roughly how long should it take to upload a custom theme to magento community edition ? I appreciate it varies, but can you give me a rough range of how many hours it might take ? Thanks 

  • Anonymous

    Thanks for the tutorial. it is very helpful. i would be back soon to see more updates from you.

  • Turjo

    Awesome Post…..

  • http://iamrahulroy.wordpress.com/ Rahul roy

    previously i was facing some problems as I’m new to wordpress i found this tutorial very helpful.

  • Showketbhat

    Great Man… It saved My Day..Thanks

  • Prakashdurai

    its very nice, i like it very much

  • http://rastasoft.ir/ محمد علی اکبری

    thanks for complete explanation

  • Nikki Sinha

    I am getting error Couldn’t resolve host ‘magento-community’

  • Admin

    When uploading products , can we make status enabled  by default ( currently default is disabled ) 

  • Issac Andy

    Fatal error: Call to a member function toHtml() on a non-object in /home/wwwbnd/public_html/pets/app/code/core/Mage/Core/Model/Layout.php on line 529

  • http://www.magento-themes.jextn.com/ Magento themes

    Excellent Tutorial.This is very important issue and this slide is very helpful. Good work.Keep it up.

  • Nick

    I followed the procedure to the letter for an installation with Magento connect, no error message but the new theme never diplayed… 

  • http://www.fmeextensions.com/ Magento Modules

    after installation i am unable to login, what is the reason!

  • http://www.clingpvc.com/ stretch film

    Excellent Tutorial.This is very important issue and this slide is very helpful. 

  • http://www.facebook.com/ashleykaysmoore Ashley Kays Moore

    I am so grateful to you for this post. It was so much more helpful than the documentation that came with the theme I purchased. Thank you so much!

  • Magento Tutorial

    It’s a nice post! Thank you!

  • Magento Tutorial

    But why I can log in after installing?
    ________________________
    http://magentotutorial.net

  • Webslike

    For more magento and php discussion you can visit Webslike technical forum.
    http://www.webslike.com

  • Alan Kelly

    Excellent tutorial, and much better explanation than the “help” file i got with my theme. thank you very much for sharing this!!

  • Rajesh Wellington

    Copy entire app folder of your new theme underYour_Magento_Installation/app/design/frontend/default/ so it becomes likeYour_Magento_Installation/app/design/frontend/default/new_theme
    Copy entire skin folder of your new theme underYour_Magento_Installation /skin/frontend/default/ so it becomes likeYour_Magento_Installation/ skin/frontend/default/ new_theme
    am sorry i cant get you…
    there will be another default theme i.e. folder of magento
    what should i do now….

  • Andrew

    Wondering the same thing