Magento 2 Custom Themes: How to Make a Theme from Scratch

In this video you will learn basics of a theme creation in Magento 2. The video covers theme structure and location, creation of a layout, template, theme assets, etc. You will learn how such tools as grunt javascript task manager and Live Reload Chrome browser extension for a faster theme development. Finally, you will build your own theme by following the instructions in this video.

Chapters:
0:00 Before you start watching the video
1:48 Theme structure and layout
4:09 Theme activation
5:57 Custom logo
9:18 Grunt and LiveReload
13:49 Custom header section
19:08 Custom product page
22:16 Custom template
23:20 PHTML template overview

Some of the ways you can support the channel:
👍 Smash the like button
🤝 Subscribe to the channel & turn the notifications on
💬 Post comments, any feedback is greatly appreciated

Thank you!

Tools & Services I use:

[robertslipko]

Hi Max, Thanks for the video. I have created vendor and theme folders. Also, the registration.php and theme.xml files. However, I can't see the new theme under the Theme list in Magento UI? do you know why?

[Alex-bctt]

This is great... thank you very much Max for all the effort that you put in to make those tutorials🙏🙏🙏

[pslamba]

My Magento instance (local Docker-Magento) is picking up the logo file from and isn't looking at ".../Default/web/images" where I placed the logo file. I guess this video is old now. If I put anything in _extend.less it breaks the entire page. Also, the variable header__background-color no longer seems to exist

[liamwinterton]

After running all the grunt commands, I don't see the correct less files in the dev tools window.

[raunaksahni]

thank you so mush for this tutorial, Can you please another tutorial for modifying the product category page (list.phtml) ?

[MaximGordin-im]

Thanks for the video! There is a small question, why use lib-css mixin? Does it make any practical sense?

[tomruff]

After running the activation script "php bin/magento setup:upgrade" I lost all styles for front and admin side of magento. stuck @4:59. did anyone else get this? 😬

[Atonb]

Thanks for the video, it's the best and most up-to-date theme customization for magento 2. I have a question with magento (actually many) but why is it better to directly upload the image in the code than to upload it from the magento admin panel, in the theme settings?

[gautam]

Great video thank you,
Can u make a video, how do you work on server? Or do u work locally and update it later

[tintin]

Hi Max, really nice video. I have one question. I want to configure live reload with my server is it possible? If yes please give me steps so I can configure it.