Magento 2 Custom Theme Development: speaking from experience

Mirasvit has been working with Magento for over ten years now. One of the core components of any Magento store is a theme. For instance, we changed our website’s theme four times! So why don’t we discuss Magento theming today? We will compare approaches, weigh the pros and cons, and share our experiences. Let’s dive in!

Theming Magento 2 to your liking

First of all, we need to cover the basics. Themes control how a website looks via layouts, styles, images, etc. By default, Magento 2 shops run the Luma theme. It is a simple yet handy starter. There is also the Blank theme, but it’s not truly a theme – rather a base for custom themes.

What is a Magento custom theme?

The definition is simple: custom Magento themes are unique templates developed for a certain shop. They change how the website looks and performs and what modules it can use. For example, a custom theme can add moving graphics, redesign a color scheme to match a certain brand, or even simplify design for performance's sake.

Customizing the Magento theme is possible for everyone. Basic themes consist of blocks and containers with content and styles. Editing them on a small scale with the help of a guide is fairly simple. However, you will need programming and designing skills to develop a Magento theme from scratch.

The importance of a custom Magento theme

But if editing or creating a Magento theme requires extra effort, why pick it over standard ones? The answer lies in three factors:

• Brand. Custom theming helps you define a unique style for your website. If visitors remember it, there is a higher chance they will come back.
• Flexibility. Basic Magento themes are limited in their toolkit. Some visual effects and changes can be achieved only via a custom template. For example – scroll-responsive background.
• Optimization. Standard Luma is notorious for poor optimization despite other good qualities. Custom themes often strive to optimize a website’s performance.

Main approaches for Magento theming

As of now, there are two main approaches to Magento template development. One stems from modifying Luma, and the other is a relatively new Hyva template. We won’t discuss all hundreds of individual themes created on their basis. Instead, we will talk about their general approach to Magento theming.

Luma

The Luma approach is a classic for Magento shops. Many shops use it because it’s free and exists as a demo theme. It is characterized by using the Less preprocessor and JavaScript libraries such as RequireJS and JQuery. This approach and toolset are considered typical for many websites.

Our Magento theme development began with the Luma\Blank template. We had two themes on this base.

✅ The main pros of Luma are its spread and accessibility. As a solidified classic, it supports almost any module without issues. Both Less\CSS and JS code are divided into components that are easy to differentiate and understand. It is reliable and accessible.

🚩 The main con of Luma is its poor optimization. Using the Less preprocessor creates large CSS files that are slow to load. The same issue is with the JS libraries. Putting it simply – you need to load more libraries than you will use just for them to work. It also slows down the website.

Hyva

The Hyva approach emerged around 2020 and quickly gained popularity. Our website currently runs on Hyva! It is characterized by using Tailwind CSS framework, AlpineJS, and a mix of HTML with plain JS code. Speaking simply – this approach is all about speed in everything.

Our current website results from a Magento 2 theme development on the Hyva base.

✅ So, the main pros of Hyva are obvious: it is fast working on both the client and developer sides. Due to a more modern and straightforward toolkit, developers can create and modify a custom Magento theme faster than with Luma. It also provides better front-end performance. Websites with Hyva generally score better on the Google Pagespeed test.

🚩 However, Hyva's main con is its inconsistency. If developers are not extra careful, mixing HTML and plain JS can easily result in spaghetti code. Unchecked backend structure quickly becomes hard to comprehend. Also, not all modules support Hyva. This approach is not unpopular, but you will occasionally stumble upon unsupported yet needed extensions.

Our experience with Luma and Hyva

Our website was Luma-based right from the release of Magento 2. The theme served us quite well for over two years. It was reliable and stable, but our devs fought a constant battle for performance. Even with modern optimization techniques, our Google Pagespeed score was always behind the desired numbers.

We switched to the Hyva-based theme two years ago. The transition took around two weeks, including custom details and modules. The frontend's speed, even without much optimization, was noticeably faster. But let the words of our developer speak for themselves:

"As a developer, I felt the difference in the speed of the front part of the project. Starting with feedback on menu clicks, ending with the operation of the checkout page – everything responded faster".

So, this is our conclusion: Luma was a good old friend, but Hyva let us achieve more than before.

Alternative Magento 2 theming approaches

However, Luma and Hyva are not the only Magento theme structures. Two more recent additions gained some traction but didn’t solidify themselves. We tried their toolkits and can share our brief experience. Let’s talk about PWA and Breezefront approaches.

PWA

PWA was also developed around 2020. This frontend Magento theme design approach is based on ReactJS, Next.js, and GraphQL API. It is open-source, optimized for performance, and highly customizable. It aims to give developers a vast collection of tools and abilities.

💬 Our experience was polarizing. While the basis does give devs a sea of opportunities, the implementation is currently lacking. The PWA approach is still raw and doesn’t deliver everything it can with such a great basis. It is also expensive to build and maintain and doesn’t support many modules.

Breezefront

The Breezefront Magento 2 theme structure is even younger, released in 2021. It is also open-source and uses a lot of GraphQL API. However, it differs by reducing the JS stack only to the Knockout. It aims "towards all-green performance" for speed tests and, honestly, archives its goal.

💬 But in our experience, great results comes with a great price. Yes, Breezefront is speedy because it reduces the JS stack to almost nothingness. However, a custom Magento theme design on a Hyva base can yield the same results. Also, no modules that use JS will easily work with Breezefront. Devs can only integrate them by hand.

Frequently asked questions about Magento customized theme

On top of our development experience, we also want to answer some frequently asked questions. Custom Magento themes are popular, so many merchants have things they like to know.

What is the best Magento theme?

There is no one ultimately best custom theme in Magento. Different themes and layout approaches are designed for different purposes and eyes. While one theme focuses on performance, others lean into visual delivery or unique features.

However, we can certainly say what themes are the most popular. Magento has three most used and reviewed themes: Luma, Hyva, and Porto. We already talked about Luma and Hyva above. Porto, on the other hand, is popular since 2014. It is highly optimized, supports many modules without problem, and provides easy customization.

How do you choose a custom Magento theme?

First of all, you need to understand what you need to achieve. If you only need a good Google SpeedPage performance – many ready custom themes provide great optimization. For example, anything on the Breeze or Hyva base will most likely be "all green". But if you need a clear brand image and unique design – creating a Magento theme from scratch is a better choice. And if you want your theme to support any module under the sun – stick with Luma.

How to install a Magento theme?

When a Magento theme developer or an admin needs to install a new theme, here is how it is done:

1. Log into your Magento server as an owner. Upload the archive with your custom Magento theme to the owner’s home directory. You can use apps such as FileZilla for this step.
2. If you used the ".tar" archive, run this command: $ mkdir -p theme-files && tar -xf [archive].tar -C theme-files If you used the ".zip" archive, run this command: $ unzip [archive].zip -d theme-files You must replace "[archive]" with the precise name of your archive.
3. If you extracted your archive in the "app/" folder, run this command: $ cp -R [path-to-extracted-folder]/app/* [magento-root]/app If you extracted your archive in the "pub/" folder, run this command: $ cp -R <path-to-extracted-folder>/pub/* <magento-root>/pub You must replace "[placeholders]" with the respective paths to folders.
4. To avoid potential errors with your new Magento custom design, run this command: $ rm -rf [magento-root]/generated/metadata/* [magento-root]/generated/code/* Don’t forget to change "[placeholders]" with the respective root paths. This command will clear previously created classes.
5. Run this command to switch into the developer’s mode: $ php bin/magento deploy:mode:set developer
6. Clear cache with this command: $ php bin/magento cache:disable
7. Finish your Magento theme integration with this command: $ php bin/magento setup:upgrade
8. Apply the theme through the admin panel (Content – Design – Configuration – Edit Storeview – Applied theme).

How to change a Magento theme?

If you have several themes or want to fall back to the basic Luma, you can change them through the admin panel. To do so, you need to:

1. In the left-side menu, click the "Content" option.
2. There, in the "Design" category, choose the "Configuration" option.
3. Click the "Edit theme" button.
4. On the opened page, locate the "Applied Theme" field. Click it, and choose the theme you want to switch to in the drop-down list.
5. Don’t forget to click the "Save Configuration" button.

How to delete a Magento theme?

Removing a Magento 2 theme is quite simple. First, you must switch your shop to the default or other theme. Your store shouldn't run the theme you want to delete. Then, the process will depend on the way you installed the theme in the first place.

If you installed the theme manually:

1. Open the directory with the unwanted theme. It should look something like this: [magento root]/app/design/frontend/[vendor]
2. Delete this directory with a command like this: delete from [name].theme where theme_path ='[vendor]/[theme]' AND area ='frontend' limit 1* The [name] in the code should be replaced with the name of the theme you want to delete. The [vendor]/[theme] in the code should be replaced with the relative path to the theme directory.
3. Clean the website’s cache.

If you used a composer package:

1. Locate the JSON file of the composer (composer.json). It can be found in the root directory of your Magento.
2. Open the composer file with a text editor and find the "require" section.
3. Delete the line that references an unwanted theme.
4. Run an update dependencies command $ composer update.
5. Run the uninstallation command: $ php bin/magento theme:uninstall --backup-code --clear-static-content [theme path] The [theme path] in the code should be replaced with the relative path to the theme.

What are the default themes for Magento?

As discussed in the text above, there are two default Magento themes. The most popular one is Luma. It supports almost any module for the platform, comes as a free demo theme, and is easy to comprehend due to its structure. However, it is poorly optimized in terms of loading speed.

The second default theme is Blank. It is a simplified, barebones Luma, a basis for developers. If you want to create a new Magento theme, you can base it on Blank.

So, what is the result?

We tested and compared popular and newly risen approaches to theme customization in Magento. While Luma is reliable and offers great module support, Hyva's optimization overshadows it.

New approaches give great promises. PWA may lend developers a fantastic set of tools, and the Breezefront may be the fastest theme. However, both need more development time and expanded support for external modules.