The whole world is heading to Magento 2 platform when finding a robust solution for their e-commerce stores. The next question is: how do websites in Magento 2 look like?
Magento 2 provides 2 default themes: Luma and Blank.
In BSS Themes, we always try to help Magento 2 new users to make better choices regarding their whole website looks. In this article, we will talk about the difference between the two themes that started them all: Luma and Blank.
As we have written in our guide to choosing a theme that fits your needs, there are three main areas of a theme that you should consider when buying a theme: what you see, what you can configure, and how the theme developers support. This article compares the two Magento 2 theme in three areas stated above.
Luma and Blank: What do you see?
Obviously, the first thing you want to consider a theme is what it looks like. Although a theme can contain how many views the developers want there are 6 pages that are critically important to any e-commerce store: Homepage, Product category, Product detail, Cart page, Checkout page and About page. Each of the view stated above needs an independent layout and view, so users can identify where they are on your site.
You can have a very quick look at our website’s basic views here: our Homepage, our Product category, our Product detail, our Blog category, our Blog post, and our About page. To examine our page’s Cart page and Checkout page, simply add any product to cart and view cart/check out.
As you can see, there is not much difference in the Homepage view of the two themes. The design of both themes consists of Header, Footer, Main content elements. The only difference is top header and bottom footer element. In Luma, as a child theme of Blank, the design has been added with a little more contrast due to the grey-color top header and bottom footer. In our opinion, the design of Blank is a little pale.
As you can see, in the product category view, Luma theme has been improved a lot, comparing to its parent theme Blank. The Layered Navigation on the left column has been compressed, providing a contemporary sense, making its parent theme seems so unorganized and obsolete.
Another small detail is that when you hover over a product in Product category view, the Luma theme provides shadow effect, while the original Blank does not.
As you can see, by just moving the Product name to the right column and the stock status to the right of that column, the product information is much more organized and easier to understand in Luma.
Luma emphasized product price, which is a very important information of the product. This makes the user easier to notice and remember product price.
The Add to cart button is also enlarged, in our opinion, making the call to action clearer, and more appealing to click.
Lastly, Luma aligns the Add to wishlist, Add to compare and Email section into one line, with a small, elegant icon. This small detail also boosts user experience a lot.
The Cart page is also a very important page in your e-commerce store. The Cart page design does not need to have fancy effect. It just needs to function normally and has a look that synchronized to the rest of the site.
By examining the Cart page of both Luma and Blank theme, we can see that the information in Luma Cart page is more organized. In comparison with Blank, Luma resizes the product name, estimated shipping and tax, and order value text to have a stronger informational leveling system. The previously out-of-place discount section is moved to the right column to fit in the summary block. Blank’s Edit and Remove item button is also replaced by icons to create a more visualize sense.
The Checkout page is not very different in the two themes. The input name and the input field are made duel-line in Luma, while they are laid inline in Blank.
In Blank, there is not even an About page. There is only Contact us page with almost no content but a form. The About page view of Luma at least contains content that you can replace with your information. There is also a boxed section, separating the content into easy-to-distinguish blocks.
Luma and Blank: What can you configure?
In short, what is configurable in these themes, stays configurable in any other Magento 2 theme. On the other hand, there is no difference in the configurability of two Magento 2 default themes.
Let me demonstrate my point.
Firstly, because these two themes are in Magento 2 default package, they are made with demonstration purpose in mind, not configuration purpose. Therefore, there is little-to-none configuration options for users in these themes. We have written an entire article what is configurable and what is not in Magento 2 default themes.
Secondly, for people who doubt, let’s dive into configurability difference in two themes. Since theme configuration is the main function of the theme, and the in Magento function files are either .php or .js, let’s look at those files difference in themes folders.
As we have written in Luma theme location, unlike third-party theme, the Magento 2 default themes are located in folder /vendor/magento. The two theme folders are named theme-frondend-blank and theme-frontend-luma.
As we have looked into the two theme folders, we find only two JS and PHP files difference.
The first one is the navigation-menu.js that serves solely as the menu function of Blank theme, located in theme-frontend-blank/web/js. However, since Luma is Blank’s child theme, Luma can get this menu file in its parent theme, so there’s no difference in function here.
On the other hand, the only difference between registration.php in theme folder is link structure.
So as we can see, there is indeed no difference in configurability of two themes.
Luma and Blank: What support do you get?
As we have known, Luma and Blank are made for demonstration purpose.
In Magento 2 Community Edition, you can only have support from Magento official support page. There are 4 options: browsing tech resources, reading DevDocs, finding in Magento Forums, or hiring a consultation from a Magento partner. Obviously, the theme developers provide no personalized support for this version.
In Magento 2 Enterprise Edition, you might receive support from Magento. You can read more about Magento Enterprise Edition support guide here.
Luma and Blank Comparison: In conclusion,
So that’s all we cover in today’s article. By now we hope that you have a decent understanding of like and the not-alike of two Magento 2 default themes.
Do you have any more questions about Luma and Blank? Let us know in the comment section below.
Also, if you want to add more beauty and flexibility to your new site’s design, you might want to consider a premium theme. Premium themes are built to easily configure in backend, beautiful in every small detail, and has great support. Moreover, our newly launched theme provides free lifetime support for a limited number of customers.
So click the picture below to check out our theme made by our pride below.