Magento articles and materials are filled with some specific words that might confuse the beginners and turn a logical process into something mystical. Sometimes on the development road, I’ve found myself wondering: “What is an interface? Is that the same as a theme? And what is a design package?”. In this article I want to put a little light on the road and make your path a little bit easier.
In this series of articles, I’m talking about how to develop a Magento theme. So, what is a theme? According to the Magento official documentation, a theme is a collection of files that determines visual output and frontend functionality of your store (you can check my previous article about the placement of those files in the Magento file system). In other words, a theme is responsible for control the look and feel of your store.
Themes are grouped into design packages. Direct to the point, huh?
Yes, but this term can be a little confusing! In Magento earlier versions and documentation a design package is the same as an interface. Now you know what a theme is and how a collection of themes is named… but what about a default theme? And a non-default theme?
Each Magento design package, by convention, needs to have one default theme. This theme is the one responsible for the main appearance of your store. Variations of this theme, like seasonal themes, can be part of the same design package and are named non-default themes or theme variants.
Going deeper in our themes, what are Magento themes comprised of?
A Magento theme is not a Lego® toy, but has a lot of blocks! Blocks are a way by which Magento distinguishes the array of functionalities in the system and creates a modular way to manage it from both visual and functional standpoint.
There are two types of blocks: Structural blocks and content blocks. Structural blocks are used to define the structure of a store page, acting as a container, like a header, left column, main column and footer. Content blocks are responsible for producing content inside a structural block, like category list, mini cart, product tags and product listing, etc.
Now is time to introduce some files that bring order to the scene: Layouts!
These are files that essentially define the structural blocks of your page and map content blocks to them. Also, they tell Magento how to connect them up.
Up to this point we have discussed themes and their components. But where do we apply our themes?
Of course, to our website!
Is a website the same as a store? What is a store view?
In one phrase, a website is a collection of stores, which themselves are collections of store views. Let’s use an example to illustrate this!
First imagine that you want to sell your Lego® projects and create a website to support your endeavor. Then, you realized that a store to sell accessories to customize your projects would be cool. But there is no reason to create a different website just for that! It’s better if the customer can use and make orders on both stores at once. Now we have a scenario with two different store ideas, but with common customers, order information and shipping cart. Here we have one website with two stores.
Now suppose you want to sell worldwide and want to have language options for your stores. Each instance of your store, like one in English, Portuguese, French, is named store view.
Your store can now reach more customers!
Do you know why?
Because of the words!
The same way your international customers can navigate through your website, now we can navigate through Magento universe and documentation. Each new word opens a new reality and infinite possibilities. Let’s go together in this journey!
If you want to share some words, just drop me an email.
See you in the next Magento article.
Web developer interest in e-commerce, interfaces, and some Lego projects.