You are here:

Use five easy steps to master Magento templates

For beginners, Magento front-end customization can be a difficult task. And the level of difficulty bases on the design complexity or the need for customizing and moving the pre-built objects within or between the templates. In this post, we will cover 5 lessons of the sections that involving Magento front-end development.

  1. Magento installation

  • Download the latest version of Magento community edition
  • Open up the tar or zip file and extract in your web server and assume that you have an Apache web server installed
  • Go to your phpMyAdmin and create a new database, assuming you have MySQL installed
  • Open up the directory URL that you just created in your web browser and extract your Magento files in it, and it should run installation process
  • Go through the installation process, except when it tasks for the Database type, choose database, not file system
  1. Setting up package and theme

  • Go to your Magento folder and app/design/frontend/. Create a new folder and then name for it. It will be your package name
  • Create another new folder in the folder you’ve just created and then name for it. It will be the theme folder and contain all the templates you customize
  • Back to the root of your Magento folder and then go inside the skin/frontend and create the same folder structure as above
  • Log in to your admin section, which should be your local URL/admin or simply add/admin to the end of your Magento URL in the browser
  • Go to System→ Configuration→ Design and then enter the package and theme name into the appropriate fields and then tap Save Config
  1. Theme customization

  • Go to your root folder of Magento and then go to the app/design/frontend/base/default/template and copy the page folder and paste it into your theme folder. In this case, it is app/design/frontend/your package folder/your theme folder
  • Refresh the home page and you should see your change. If you want to make changes in header, you need to open up the page/html/header.phtml or if you want to customize product page or checkout, follow the same way you copied the folder and files from default/template and then paste it into your-theme/template and customize it as per your needs
  1. Layout customization

  • Go to the app/design/frontend/your package folder/your theme folder and then create a folder for layout. All the XML files will be stored by this folder, therefore, the final URL will be app/design/frontend/your package folder/your theme folder/layout
  • Copy the xml from app/design/frontend/base/default/layout and then paste it in the layout folder that you just created in your theme folder
  • Open up the xml and type <remove name=”right.poll” />. This will remove the whole poll block
  • Refresh your home page
  1. Styles customization

  • Go to the root folder of your Magento folder and from there, go to the skin/frontend/default/default/ and then copy all folders and files to skin/frontend/the package folder/ the theme folder, which you created when setting up package and theme
  • Open css and change CSS

That’s all 5 simple steps we advise you learn to master Magento templates. We think that all Magento users need to hold these tutorials for multiple benefits.

Thanks for reading!

>>>>> View more Magento tutorials

Related articles


Back to Top