Magento 2 – Theme Development and Theme Structure

Folder Structure of Magento 2 – for themes

Before creating theme in Magento 2 one should know about folder structure of design part at least. As there is significant change in folder structure for theme in Magento 1 and Magento 2.

In Magento 1 there was separate ‘skin’ folder for css/image/js files.But in Magento 2,skin folder is removed and instead ‘web’ folder is added in theme directory. Also there are some additional files/folders added in theme directory.

Here is the screenshot for theme structure of Magento 2.

magento 2 theme development - theme structure

Magento 2 Theme Development

Detailed steps and info are given on Magento docs. Here I have listed the steps in brief but understandable.

Create new vendor folder in app/design/frontend/. Under that folder create new theme folder. All these following folders/files should be copied to <theme_name>.

1) Required Files for theme :

i) /theme.xml : This file is used by Magento to recognize the theme.It contains data like theme and parent theme names.

iii) /etc/view.xml : This file controls the product images configuration like thumbnail size,small_image size etc. Skip it if you do not want to change images configuration. (As it is already available in blank theme.)

iii) /media : This is required. For preview of the theme. You can take a screenshot of theme and copy a file in this folder.

2) Necessary Files/Folders  for theme : 

i) /web : This folder is identical to skin folder from Magento 1. It contains css files,images,fonts and js in respective folders like /web/css,/web/images or /web/fonts.

ii) /i18n : This folder is contains  .csv files for translations.

3) You can copy other required folders for default modules from the blank theme (it is like base theme of Magento 1) to <Themename>.And change the layout in those files as per requirement.

Your new theme is ready.Now go to Admin panel > Stores > Configuration > General > Design tab. From here you can see your theme name in dropdown of Themes and change it.

Other changes compared to Magento 1 :

  • Modules folder structure would be :
    • <Vendor_Modulename> (In Magento 1 it was <Vendor>/<Module>)
      • /layouts – xml files
      • /templates – phtml files
      • /web – css/images/js files
  • Modules have their own web folder for styling and images/js.
  • Layout files are divided in small parts,Each layout handle has now separate files.
    • For example,<catalog_category_default> and <catalog_category_layered> have separate files instead catalog.xml.
  • UI Library of Magento 2 comes with css pre-processor, LESS.However you can use other pre-processor or direct css for modifications.

So this was all about new changes in Magento 2 and Steps for theme development. For additional details about frontend structure read Inchoo’s post.Also you can check Magento 2 frontend / backend demo here.

Share your experiences about Magento 2, if you have already started working on live projects.

The following two tabs change content below.
Ankur Dholakia

Ankur Dholakia

Magento Developer | Entrepreneur at iBiz Technologies
Magento Developer, Entrepreneur, Day Dreamer!
WhatsAppShare

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Start typing and press Enter to search

Shopping Cart