Magento 2 v/s Magento 1.X in design aspects.
Magento 2 will remove Prototype and all extJs and will use jQuery in place. Magento 2 targets to create a frontend theme using jQuery only and will not contain any inline JavaScript’s and CSS in the template which means that the designer can achieve their task more easily as compared to magento 1.X.
Fall-Back In Magento 2
Magento 2 will give you the privilege to create unlimited themes for your Magento store. This conveys that you can build unlimited themes inheritance which avoids code redundancy in the templates, CSS and JS files completely.
Magento 1.X provides only three levels of inheritances, but Magento 2 will provide Multiple theme inheritance.
Multiple Themes Inheritances in Magento 2
In addition to these various useful changes for designing, Magento 2 will also provide an GUI Design Editor which will provide functionality like moving the blocks in layout via drag and drop.
How to activate your first Theme in Magento 2?
Creation of theme in Magento 2 is quite different from Magento 1.X, here we will see how to activate your first theme in Magento 2.
Different Folder Struture
The folder structure in Magento 2 is vastly changed with respect to Magento 1.X
What is the difference?
Magento 2 has introduced two new xml file named as theme.xml for the design activation for your Magento store and allows you multiple themes inheritance, and the other new xml file named as local.xml from where you can set all the CSS and JavaScript file for your particular theme. This both file can be found in the following Magento path appdesignfrontenddefault[your_theme].
Here is the code snippets of theme.xml to activate your theme, first you have to create a folder named as your theme say insync in the following path appdesignfrontenddefault, then create a theme.xml file in the insync folder, from the snippets of the xml we can get that Package of our theme is default and parent of the theme is demo and title is Insync.
Similarly if you have any JavaScript or CSS for your particular theme then you have to add local.xml in following path appdesignfrontenddefault[your_theme], Here is a sample code snippets of local.xml from modern theme.
Check your First Theme Now
Now go to your Magento admin panel System=>Design=>Theme, you can see your new activated design theme here.
Now, I hope you can easily activate your first theme in Magento following the above procedure.If you still face any problem feel free to contact us.We will be happy to help you.And don’t forget to share this !
