My last article was “How to install Magento step by step in wamp server”. . Recently I came across a task where I need to integrate a custom theme into Magento. I would like to share my experience with you step by step. Magento is another most demanded open source ecommerce platform by e-bay inc. Its modular structure, flexibility and robustness made it very well known in PHP world. In this article I will show you how to integrate custom theme in Magento.
To achieve this we will download any theme from online and install into magento. Magento uses “app/design/” and “skin” directory for enhancing visual experience of the store shortly we call theming / skinning.
• app/design: used to render template and html into browser.
• skin: used to hold all your CSS, JS, Images etc.
I am using Magento 1.9 version and community edition. Below are the steps to install your custom theme into magento.
Download Magento Theme & Save Into Magento Directory:
Download the theme according to your application needs, I have downloaded ebajes theme from https://www.halothemes.com/theme/ebajes-free-responsive-electronics-magento-ce-theme and we will install it into our magento application.
I have created package name as myebajes into my app/design/frontend and copy all files into it, from the downloaded theme. After copying my folder structure look like below.
I have copied layout, template, locale etc. folder from the downloaded theme into my custom theme ebajes directory.
Copy all files and folders to respective magento folder. I copied downloaded theme skin and paste it contents into magento skin directory, likewise you need to copy all respective contents into your magento local directory. Make sure you are following same folder structure while copying things.
Directory Structure of Custom Package:
Switching Theme Using Magento Admin Panel:
Now login to magento admin panel and visit design tab from system/configuration link.
System > Configuration > Design
From the upper left corner you will find drop down box called “Current Configuration Scope” by which you can select the store for which you are applying theme configurations.
Now enter your package name (“Current Package Name”) where your custom theme exists. In my case my package name is “myebajes”. If Current Package Name left blank magento automatically take “default” one.
Some cases if only for home page you want different theme then you may go to cms > home > design tab, in the “Custom Design” select "Custom Theme" to preferred one. Doing so you will be able to see different theme only for the home page.
Now click on “Save Config” to save your configuration changes in order to reflect into out frontend pages. Reload your website and you will be able to see your new custom theme.
If you wish to switch to your default theme then you need to change all configuration which we have changed above as “Current Package Name” to “default”, change “Templates”, “Skin (Images / CSS” name, “Layout” name etc. if you made changes.
Hope you found this article helpful for step by step magento theme customization. If you are also interested to write tutorial for us you can post me. Please don’t forget to like, share with friends, or leave your comments below.
Keep visiting for upcoming posts. Have a nice day.