Themes are an integral part of any ecommerce store. They are a major chunk of the front end UI and the back-end developer interface. Magento, the world’s leading ecommerce application, provides the options to customize the store as per the need of the business. It is not much difficult to customize the Magento store and neither is it difficult to develop a Magento theme.
When you start a new project on Magento you will either need to create a Magento theme (if you have the expertise) or you would have to buy a theme for your Magento project. You would want a theme which you can customize and make according to your needs. It is a bit technical to make a Magento theme, but it is not difficult. You just need to follow Magento recommendations and rules, to help you make your project.
Before I go any further it is important to tell the purpose of this series. This theme development series is for beginner and will cover the basic of front end theme development. If you are an advance Magento developer this may not be for you.
Folder Structure In Magento
First, You need to understand Magento hierarchy and where your theme files are placed. In Magento there are many folders and thousands of files. In this series, I am only focusing on those that we need in theme development.
Look at the directory’s structure below and see whether you recognise it.
Before we go any further, it is important to understand what packages and themes are.
Packages And Themes
A package is a collection of related themes. In Magento, there is no limit to the number of packages you can have. Magento comes with a special package that is called base. It’s an archive for making Magento core files available to the front end.
A theme on the other hand is a direct sub folder of a package which contains the files that make up your store. There is no limit to how many themes you can have within a package. A theme can only belong to one package and by convention, every package must contain a theme named default which is the main theme for that package.
Magento Base Directory
Base package contains one theme named default. It comes bundled with every default Magento install and contains front end files that help your Magento store run. There are some rules with the base package and we must accept this.
As I mentioned you may not edit these files that are under the app/design/frontend/base/ and skin/frontend/base, they are only used for reference. Files that need to be edited should be copied from base folder to yourpackage/theme.
Magento Fallback Logic
To make theme easier, maintainable, and upgrade friendly, Magento has the feature of fallback logic. With this you can edit and maintain only the files your need within your theme. If you don’t want to edit the file you don’t need it in your theme. I’ll explain in detail with an example. I have my own website which is set up for using my own theme like:
My website requests a template file named column.phtml and CSS file named style.css but Magento did not locate these files within my theme. Magento fallback logic will now search the next theme in the hierarchy for the files.
Following order explains the fallback logic Magento goes through when looking for my files.
Create and Enable Package/Theme
To start, you need to create your package/theme setup. We start by creating the following folders:
We have a package called cloudways and a theme called w-c, you can rename your package as per your liking. Just remember, that “default” is automatically part of fallback logic.
After this, you need to enable the package via Magento admin. Just login to your Magento admin and go to system > configuration. In configuration, click on design (shown in left menu) and then enter your package name in the package name field.
You can see the theme options as well after packages. This is where we enter our theme name (c-w in this case). Check the image to see where to insert the name of the theme.
Boost Your Magento Store Performance by 5x Times & Maximize Your Sales
Our fastest Magento hosting can help you in growing your business revenue by 500%