Are you a front-end developer working on your first Magento theme?

This short guide will get you from a beginner level to having a basic theme that you can continue to build on. Hopefully, you already have intermediate skills in HTML, CSS, and JS. If you don’t, I suggest knocking out a few courses at Udemy.

Why Magento?

• One of the main reasons why Magento for eCommerce is the top choice for developers is the fact that it is open source. 

• Developers and site owners have full control over the front and back end of their site, allowing them to fully customize and control what features it will have.

• The Magento community. This association of developers, users, and service providers can be extremely useful resources for both new and existing users.

• Magento has a massive amount of functionality and extensions. This allows users to have a high degree of freedom and flexibility to control their website and make it exactly what they want it to be. 

• You can use what you already know about front-end technologies (HTML, CSS, JS), but you need to understand how to make it work with Magento architecture.

• It has had regular releases for over ten years, so it has plenty of plugins, documentation and a wide community supporting it.

What is a Magento Theme?

A theme is a component of Magento application which provides a consistent look and feel (visual design) for entire application areas using a combination of custom templates, layouts, styles, or images.

Themes are designed to override or customize view layer resources, provided initially by modules or libraries.

Basic Steps to Create a New Magento Theme

• Add your own theme first

• Understanding folders

• Creating your theme

• How to add and where my own JS and CSS

• Activate your new theme

• Understanding Magento fallback system

Add Your Own Custom Theme First

Magento always has a “default” theme with all the files necessary to work properly (we will explain in detail at the end of this article). You should always avoid modifying/deleting those files, and instead, you should work with your own theme copy. This best practice will mean that you always have a good base copy of all the files. This will be time-saving if you make a mistake, and you can always go back to default files. Out-of-the-box Magento application provides two design themes: Luma, as a demonstration theme, and Blank, as a basis for custom theme creation.

In our case, “melon-theme” will inherit from “Luma”, and we can override it as we need. In fact, it doesn’t need to have all the files. You can only have those files needed to be modified, and let the other ones “fallback” in the parent theme (in this case, Luma).

You can apply 4 types of customization, each with a level of difficulty:

You can make relatively simple changes to your site using cascading style sheets (CSS) to change colors and the look-and-feel of various interface components, replacing images, and other relatively cosmetic changes.

A small step beyond is to make changes to the HTML generated by existing modules. This requires rudimentary PHP skills to adjust PHTML template files.

The next level is to make structural changes to your site by moving functionality between places on a page or to completely different pages. This is achieved using the Magento layout engine.

Finally, you can develop new modules to add new custom functionality to your site or to extend the functionality provided by existing Magento or third-party modules (not covered in this guide).

Understanding Folders

Theme directory: Usually used when talking about custom themes, or any theme in general.

For Magento out of the box frontend themes, the absolute path is usually one of the following:

• app/design/frontend/Magento/<theme>

• vendor/magento/theme-frontend-<theme>

Module directory: When talking about a particular Magento module, also notation similar to the following is used: <Magento_Checkout_module_dir>

For Magento modules, usually one of the following:

• app/code/Magento/<Module>

• endor/magento/module-<module>-<name>

Unlike Magento 1, Magento 2 treats Magento as a third party vendor. This causes that the major code you will override is actually on:  “Vendor / Magento”  folder.

That being said, it’s a lot easier to override some specific module of the application. Right now, you have the main store in specific pieces that you can follow the lead.

To follow this, take this simple notation: “Vendor / Module”.

For example, the checkout is now all contained into his own module “Magento_Checkout” (vendor/module) and you can override plenty of it, without touching other modules.

Creating Your Theme

There are 6 simple steps to create your own theme (storefront):

1. Create a directory for the theme under: app/design/frontend/<your_vendor_name>/<your_theme_name>

2. Add a declaration file theme.xml and optionally create etc directory and create a file named view.xml to the theme directory

3. Add a composer.json file

4. Add registration.php

5. Create directories for CSS, JavaScript, images, and fonts

6. Configure your theme in the Admin panel

1 - Create a directory for your theme

This is pretty straightforward:

• Go to <your Magento install dir>/app/design/frontend

• Create a new directory named according to your vendor name (we will use Melon for example): /app/design/frontend/Melon

• Under the <vendor> directory, create a directory named according to your theme:/app/design/frontend/Melon/melon-theme

2 - Add a declaration file theme.xml

• Add or copy from an existing theme.xml file to your theme directory   app/design/frontend/<Vendor>/<theme>

• Configure this way:

3 - Add a composer.json file

To distribute your theme as a package, add a composer.json file to the theme directory:

4 - Add registration.php

To register your theme, add a registration.php in the root folder of the theme (change Melon/melon-theme, for your proper value of “Vendor/Theme”):

5 - Create directories for CSS, JavaScript, images, and fonts

Your theme will likely contain several types of static files:

• Styles

• Fonts

• JavaScript

• Images

Each type should be stored in a separate sub-directory of web in your theme folder:

app/design/<area>/<Vendor>/<theme>/

├── web/

│ ├── css/

│ │ ├── source/

│ ├── fonts/

│ ├── images/

│ ├── js/

In the .../<theme>/web/images directory, you store the general theme-related static files.

That being said, if  you want to override/extend the checkout part of your site, files will be stored on: app/design/frontend/Melon/melon-theme/Magento_Checkout/web/

6 - Configure your theme in the Admin panel

Go to the Admin, then go to CONTENT > Design > Configuration. This page will show up:

• From here, you can “EDIT” the current scope for your site. You can have multiple views/themes applied to the same site if you want. But just for learning purposes of this article, we will edit the “MAIN” view of the site.

• Next, you open that dropdown to change for your created theme (in our case “melon-theme”)

• Press the “Save Configuration” button

• Clear cache after you apply the change (go to System > Cache Management)

Now you’re finished and will see your theme on the homepage!

Understanding Magento Theme Inheritance

Magento consists of blocks which are rendered and combined to an HTML file to serve the client. The new Layout system is essential in this case. You can now create, move, or remove content simply by modifying an XML file (and will need another full article to discuss it!). This flexibility allows you to modify minor or major parts of the application. You can override or extend any part of Magento modules, and the vendor/plugins as well.

But… Do I need to rewrite all files or have a copy of the core files?

Not at all.

Magento is clever enough to fall back in the core files. That being said, basically, what Magento does is this:

1. Search for a specific file in your theme folder.

2. If found, will output it.

3. If not, will search on the “default” parent theme declared in your theme (in our case Luma).

4. If the file is not there, it will fall back to the base “Blank” (Luma’s parent) theme

5. If all of this fails, then Magento will output a render error.

For example:

Suppose you use some “cart.phtml” file (assuming Magento_Checkout module).

Magento will search on:

1. Custom Theme: app/design/frontend/Melon/melon-theme/Magento_Checkout/templates/cart.phtml

2. Luma Fallback Theme: vendor/magento/theme-frontend-luma/Magento_Checkout/templates/cart.phtml

3. Core file: vendor/magento/module-checkout/view/frontend/templates/cart/totals.phtml

That's it! If you have any additional questions about Magento 2 theme development, contact us to chat with one of our experts.