Change the Magento Theme (Magento1)

Do you want to change the magento theme on your website? One of the first things you will want to do to customize your store is to change the look and feel or learn how to change the magento theme to match your company’s look and feel. There are two ways to do this.  One way is to have a custom theme created for you by a developer or to create your own theme.  The other way is to purchase and download a theme from Magento Connect.  This article will cover both methods.

How to change the Magento theme using a Custom Theme

If you have a theme that you created or was created by a developer they should just give you a few folders that are named something relevant to the design or company.  One folder should contain the necessary design assets including css, js, images and possibly fonts.  The other folder should contain the necessary layout assets including etc, layout, locale and template.  These two folders contain everything you need to create a new look and feel for your website.  To install this theme first navigate to the skin/frontend/default/ folder.  Next, copy the theme folder with the design assets into the default folder. Next navigate to the app/design/frontend/default folder. Lastly, copy the theme folder with the layout assets into this default folder. 

Go into the Administration panel and navigate to System-> Configuration.  In the left hand navigation bar click on ‘Design’ under the ‘General’ Section.  Here you will see the Themes section.  This is where you tell Magento the name of your theme.  To do this, simply add the name of the folder to the input boxes for templates, skin (images/css), layout and default.  Your theme folder should also contain your new logo.  On this same page, farther down, under ‘Header’, you will see input boxes for ‘Logo Image Src’ and ‘Small Logo Image Src’.  Here you can input the path to your logo, for example ‘images/logo.png’.  Assuming you have turned off the cache or have emptied the cache you should now see your new theme when you visit your site.

How to change the Magento theme using Magento Connect

If you would like to purchase a premade theme you can easily do so through Magento Connect right through your administration panel.  Login to your administration panel and navigate to System-> Magento Connect-> Magento Connect Manager.  You will now need to login using the same credentials as you used to login to Magento itself.

Next you need to find a theme you want to install.  To do this open another browser window or tab and go to https://www.magentocommerce.com/magento-connect/.  Here you can search for a new theme.  You will need an account at Magento Connect so make sure to create one before you start browsing for a theme. Once you have found the theme you want you can click ‘Install Now’ (if it is free) or ‘Get Extension’ (if it costs money, in this case you will be redirected to the developers website to do the next steps).   Assuming you clicked ‘Install Now’ check the license agreement checkbox and then click ‘Get Extension Key’. Make sure to copy this and save it as you will need it later.

Now go back to your administration panel and the Magento Connect Manager.  Add the extension key you just copied where it asks you to ‘paste extension key to install’ and then click the orange ‘install’ button.  You have now just installed your new theme.  If you have any packages to upload or want to update any existing extensions you can also manage these from this page.  However you do not need to do anything more than install your theme.

Once your theme is installed go back to your administration panel and navigate to  System-> Configuration.  In the left  hand navigation bar click on ‘Design’ under the ‘General’ Section.  Under the ‘Themes’ section add the name of your theme to the input boxes for templates, skin (images/css), layout and default.

Make sure your cache is off or that you have cleared it. You can now view your new website with your new theme!

If you find you need expert help on how to change the Magento theme contact Brian Wade at https://cybersolutions-llc.com.