Magento theme – Folder structure: Magento 1.9.x vs 2.x

When we work with a new merchant to develop his/her online store, we all know that you must have certain processes that are the same in theory for all other businesses that sell online, such as product list, product detail, my cart, checkout, successful purchase page , transactional emails, etc, but the big difference between each store is largely due to the experience that the final customer has when buying and how this experience is visually implemented.

However, is true that when we work with platforms such as Magento, Spree/Solidus, among others, there is already a predetermined design, since the challenge begins when we need to alter the original theme to obtain a design tailored to each one of our clients.

Focusing on the platform that we are afflicting in this blog post, we will analyze how structured a theme based on Magento, either in its latest version (2.x), along with a comparison for the previous version but very still used.

Magento 1.9.x

app/design/frontend/
|-- base/
|-- default/
|-- rwd/

skin/frontend/
|-- base
|-- default
|-- rwd

As we can see, Magento 1.9.x contains three folders that are the default themes and are based on the implementation of new themes. Each of these sections contains the following structure:

default/
|-- etc/
|-- layout/
|-- template/

Also note that each theme corresponds to the skin directory, a directory with the same name of the theme, the content of each one within the skin directory is:

default/
|-- css
|-- images
|-- js
|-- lib

Adding to the rwd theme the folder scss, based on that theme, we can define the file structure of a theme for Magento 1.9.x as follows:

app/design/frontend/
|-- rwd/
     |-- default/
              |-- etc/
                    |-- layout/
                    |-- template/

skin/frontend/
|-- rwd/
     |-- default/
              |-- css/
                    |-- images/
                    |-- js/
                    |-- lib
                    |-- scss/

Magento 2.x

In this new Magento version, things change, so by default it is difficult to define default theme directory structure, since these vary according to the needs of each theme. One of the advantages of Magento 2 .x is that it is modular, that is, not only in backend but in frontend the directories and files involved in a specific functionality or area of the operation of the platform are separated by modules.

Trying to abstract a default file structure for the themes in this platform version, we can define the following:

app/design/frontend/
|-- Magento/
     |-- luma/
              |-- etc/
                    |-- i18n/
                    |-- media/
                    |-- web/
                         |-- css/
                             |-- fonts/
                             |-- images/
                             |-- js/

If we want to modify the styles of a specific section, we have to add the following:

luma/
|-- Magento_SectionName/
     |-- layout/
         |-- templates/
         |-- web/
              |-- css/
                    |-- fonts/
                    |-- images/
                    |-- js/
                    |-- template/

Conclutions

As we can see, Magento 2.x theme structure is simpler than Magento 1.9.x, which does not exactly mean that it is easier to extend, modify, or create a new theme, further along in a separate post/article we will talk more about the differences between Magento 1.9.x and Magento 2.x.