Top 8 Magento 2 themes on Github and links

8-Magento-2-themes-on-Github

If you want a list of all the Magento 2 themes available on Github in one place, you would LOVE this article.

We personally test the themes demo ourselves (if any) to give you a list of Github-link-available theme.

You would find 8 Magento 2 themes, with demo image, Github link, demo link, demo status and the industry it suits.

Have a great time browsing the themes!

1. Optimus

Vendor: StudioEmma

Demo status: Available

Industry: n/a

Free

This is a quite basic theme that extends from Magento 2 Blank theme. The theme has auto-open cart function which tends to make user check out faster.

magento-2-theme-github_1

Github link: here.

2. Craft

Vendor: UberTheme

Demo status: Available

Industry: Jewelry and luxury goods

Premium

Craft is a theme that focuses on luxury goods. Claimed to be the first theme UberTheme ever made for Magento 2, Craft also has good page speed, and some optimization regardings checkout.
magento-2-theme-github_2

Github link: here.

3. Rapid

Vendor: Divante

Demo status: Available

Industry: Fashion

Free

Rapid is an impressive theme built with Open Source project in mind. The homepage is full of images that catch users’ attention. This suits fashion store, and above all, anyone can download it on Github.
magento 2 theme github_3

Github link: here.

4. Fasony

Vendor: VES

Demo status: Available

Industry: Fashion

Free

Fasony is a fashion-oriented theme that has quite a standard font and color choice. This make the theme actually can be used in various industries, although the speed is a little bit slow.
magento-2-theme-github_4Github link: here.

5. Absolute

Vendor: swissup

Demo status: Available

Industry: Outdoors

Free

This theme provides a simple user interface for outdoors good vendors. The theme follow good standard of coding, as it is approved by Magento 2 Marketplace for the code quality.
magento 2 theme github_5

Github link: here.

6. Strive

Vendor: trive-digital

Demo status: Available

Industry: n/a

Free

Strive might be the theme that is closest to Luma. Only very little elements are customized in this theme to distinguish it with its parents. This makes the theme stay away from bugs.
magento-2-theme-github_6

Github link: here.

7. Blank SASS

Vendor: Snowdog

Demo status: Unavailable

Industry: n/a

Free

The theme is Magento default Blank theme, made in SASS. Although the majority of Magento 2 theme make use of LESS, some developers might prefer SASS for its complexity, making this theme relevant and useful.
magento 2 theme github_7

Github link: here.

8. Boostrap

Vendor: webgriffe

Demo status: Unavailable

Industry: n/a

Free

Boostrap theme has an old-style design, with the buttons and menu and various other elements in 3D style.
magento 2 theme github_8

Github link: here.

Magento 2 theme on Github: In conclusion,

So that’s 8 Magento 2 theme on Github. With this article, we hope that you can browse the best Magento 2 theme on Github.

If you are looking for a premium theme that makes your business sustainable, try out our theme below.

magento-2-theme-github our theme

[2018 Updated] Step-by-step guide to considering Magento 2 theme’s technical aspect

considering-Magento-2-theme's-technical-aspect

You have spent a good amount of time browsing different themes description, demo, user’s review.

For the last few hours or even days, you have seen several fancy theme functions, technical advantages and feel both impressed and unimpressed.

Now you have acknowledged which theme design you should go for.

And yet you have figured out which makes up the theme’s technical aspect.

  • Which theme function should you prioritize?
  • Is there any bug remaining in the themes?
  • When comparing the themes, which theme is really faster?
  • Which element of the theme is configurable, and how easy is it?

All these questions are important to you when you choose your online store theme.

This article answers all questions from above, plus help you optimize your time spent on choosing theme.

That means helping you choose your theme faster and more accurately, and stick with that theme for a longer time before having to change theme.

And we think that Magento 2 store owners from all around the world need this.

This article outlines 7 simple steps to consider Magento 2 theme ’s technical aspect: responsive check, bug test overview, demo number count, basic page speed test, desired feature check, and design configurability check.

The first 5 steps are the preliminary check to wipe out all under-qualified theme, and should be executed in under 7 minutes/theme tested. The remaining 2 steps are the in-depth technical check of the theme, and you should spend up to an hour on checking each theme.

Preliminary consideration

The preliminary check is designed to exclude all themes that are too bad.

In this case, “bad” means that the website is not devices friendly (such as mobile/tablet port view), full of bugs, slowly loading or incompatible with the Magento version you are using.

All of the tests in preliminary check should be standardized and takes no longer than 7 minutes/theme.

A small caveat: you may find some parts of preliminary check obvious, and that’s ok as it can serve you as a checklist.

Step 1: Responsive check

Responsiveness is a must in Magento 2 website design in 2018.

A study has shown that in January 2018, 68% of Internet users use web with Mobile device.

Even from 2012, Google has claimed that 67% of users are more likely to make a purchase on a responsive website.

Responsive layout guarantees the user experience of your users across multiple devices, as well as increases your visibility in the Google search engine.

How do you check if a website is responsive or not fast?

Easy. Inspect the Demo website (in Windows/Linux, press F12; in Mac, press Command + Shift + C). Then click the devices icon, and test with all the different screen sizes.

considering Magento 2 Theme's Technical Aspect_1 - pagespeed

Any theme that makes you needs to zoom in to see the content, or feel the text and image size is unnatural and not well-made responsive.

What should you do with a beautiful theme with unresponsive layout?

Forget about the theme, as there are more beautiful AND responsive theme in the market.

Step 2: Basic Page speed test

A study from Google and SOASTAS in2016  have shown that 53% of visits to mobile sites are abandoned after 3 seconds.

That’s why your website would miss out a lot of potential buyers if the load time is high.

considering Magento 2 Theme's Technical Aspect_2- research result

Source: Google/SOASTA Research, 2017.

There are many benchmarks in the internet era. Google’s best practice for website’s page speed is 3 seconds, while Magento encourages website to load in under 5 seconds.

Either way, err on the site of the fast themes.

How do you determine the page speed of a theme?

There are tools like GTMetrix or Google PageSpeed Insights that helps you study in-depth and find ways to optimize your theme.

But when testing in preliminary consideration, you do not need that level of complexity from a page speed report.

In order to save your test waiting time using the 2 tools above (usually more than minutes), we suggest you using a less objective but much faster method.

Simply press F12, choose “Network” then CTRL+F5. Look for the red Load time.

considering Magento 2 Theme's Technical Aspect_3 - pagespeed test

What should you do if the theme Homepage’s red load time is more than 5 seconds?

Just move on to the next theme.

Otherwise, the theme is good regardings page speed.

Step 3: Bug test overview

Bug test is a long process in software development.

In general, the more users, bug tests occurred by vendors and versions released, the fewer bugs remain.

However, you do not need to be a professional tester when you test the themes’ bug.

You just need to perform a basic test on 6 fundamental pages of the theme.

The key here is not to waste your time testing in-depth any theme, but just test its core function on the surface.

Indeed, spend no more than 5 minutes in this section.

How do you perform a basic bug test on the theme?

Simply become a customer and try to make a purchase from the demo website.

If you can successfully make a purchase and view the company’s about and contact page, the theme passes the basic bug test.

What should you do if you have to click back or refresh many times to make the purchase, or cannot purchase at all?

Forget about that theme and move on.considering Magento 2 Theme's Technical Aspect_9 - bug test

Step 4: Compatibility check

The theme has to be compatible with your website’s Magento version to operate normally.

If you are using Magento version 2.2.4, but the version supported by the theme vendor is only 2.2.1, then move on to the next theme.

How do you check theme and website version compatibility?

Check your website’s version by checking the bottom of your Admin Dashboard.

considering Magento 2 Theme's Technical Aspect_4 - website version

Then check if that version is supported by the theme in the theme description.

considering Magento 2 Theme's Technical Aspect_5 - theme supported versions

What should you do if the theme is not compatible with your website’ Magento version?

Change your website versions by spending weeks of work and a ton of money.

Or just comfortably move on to the next theme.

Step 5: Demo count

This is an optional step, and is occasionally overlooked.

Because the more you know your theme demand, the less demo you need from a theme.

However, a theme that includes many demos is safer to select, because there are many CMS blocks for you to choose and customize, and call from different pages.

That means delaying the task of designing your website and just choose a theme that has many options for you to choose later.

You still need to figure out your desired design later.

That’s why the number of demo inside a theme matters only when you do not know your theme demand.

If you’ve already known exactly what you need in your theme, you would not want to waste time changing the theme later, and a theme with only 1 demo can fully serve your purpose.

With that being said, we strongly recommend you do a good job at planning your theme demand before choosing themes.

considering Magento 2 Theme's Technical Aspect_6 - choose from multi-demo theme

What should you do if the theme does not have any demos?

Only move on if you cannot clarify your needs.

If you are unsure what you need, err on the side of the themes that has many demos.

Detailed consideration

Detailed consideration occurred after you have shortlisted all the themes that you like the design of some themes that are not “too bad technically”.

Now you have to consider the theme’s technical aspect in detail.

This may take hours of browsing theme demo, user’s guide, theme reviews even asking the vendor for technical information.

Step 6: Desired features check

If you have carefully planned your desired feature ahead, you will find this step very easy.

By carefully, we mean having a list of desired feature.

How can you check your desired feature?

You can use excel to compare different themes regarding your desired features. Occasionally, your theme will not have sufficient feature you desire.

And that is good for you because you are not looking for a custom development.

The good news is not all the features are equally important. There are features that are critical to your site, and there are ones that are not that important.

Therefore, a rule of thumb is sorting features by priority and choose the theme that has most features with the highest priority.

For example, let’s say you want your theme to have 17 features:

  • AJAX Add to cart
  • Multiple layouts for product page
  • Hot Deals
  • product slider
  • Paralax background
  • Megamenu
  • Retina ready
  • RTL
  • Multiple currencies
  • AJAX Search
  • Newsletter popups
  • SEO optimized
  • GG Rich snippet
  • Multiple languages
  • Layered navigation
  • Multiple layouts for category page
  • Blog module

Now you have theme#1, theme#2, and theme#3. You should have a sheet like the one below, and Sort all features by their priority.

considering Magento 2 Theme's Technical Aspect_7 - feature list with priority

Now the theme with the best feature is the theme with the most “Yes” in the D Column, starting from the highest priority feature. Consider choosing that theme.

What should you do with your desired feature list?

Download our template file just like above to evaluate theme feature reasonably.

Step 7: Design Configurability check

The theme having the design closest to you expectation can still be wiped out in this step. They can be very beautiful to look at, but painful to configure.

After purchasing the theme, you would want your website design to go live fast. That means the setup is simple, and the configuration is easy.

When your configuration is all set, you would want it to be stable and remains the same.

But if the design you want is not configurable in the admin panel, you would have to spend a significant amount of time customizing the code.

That’s why the difference between the theme demo and your expected design should be configurable.

How can you check the configurability of the difference between the theme demo and your expected design?

Browse the user’s guide.

Occasionally, a good theme user’s guide provides the How in configuring the theme. The great theme user’s guide presents the How in a visually understandable way.

Consider the example below:

considering Magento 2 Theme's Technical Aspect_8 - user's guide

This is the Footer section in our Thinnk Theme user’s guide. Looking at the red-boxed sections, you can see which section – like Address, Email, and Phone – can be changed. Other sections outside the red box – like the newsletter form – cannot be changed.

If the user’s guide is in more detail, you should know actually how you can configure each section. For example, in the example above, you can edit the “Address”, “Email” and “Phone” content in the bss_footer_store_info.

What should you do if all shortlisted theme cannot be configured to meet your expectation?

We recommend you to make an excel sheet like Step 6 and accept sacrificing the unimportant ones.

Otherwise, you can customize on your own, or hire professionals to do for you, but those options are more costly in terms of time and money.

Considering Magento 2 Theme’s Technical Aspect: In conclusion,

That’s quite a long read. We hope that by now you can evaluate several themes and choose the best theme in term of technical aspect.

However, aside from technical aspect, a theme also needs to have a great design and provide professional support. You can see our guide to choose theme based on design, and based on support.

So do you want anything to be added to this article? Let us know in the comment below.

[2018 Updated] Guide to choosing premium theme designs for Magento 2 websites

choosing-premium-theme-designs-for-Magento-2-websites

After considering the difference between free and premium Magento 2 theme for your website, you should make a decision. If you are serious about doing business, we highly recommend you going for the carefully-designed paid theme.

Besides good technical and support, the first thing to consider in choosing website theme for your store is the design.

Remember: people judge a book by its cover, your users judge your business by its theme, and you definitely should judge a theme by its design.

But what aspects of design should you judge when it comes to website theme?

In this article, we present 3 critical elements of a premium website design in a Magento 2 store: clear visual hierarchy, consistent color, suitable font.

A theme having all these 3 design elements can assure the aesthetic aspect of your website. And a beautiful website helps communicate the quality of the brand, improve the visibility of marketing campaigns, make the foundation for increasing conversion rate and emphasize all the messages you want to broadcast.

1. Clear visual hierarchy

The purpose of design is to communicate the message visually. However, whether the message is communicated successfully or not depends on the navigation of the information.

An organized hierarchical can guide website visitors to follow the flow of the story you are telling.

Visual hierarchy refers to the arrangement or presentation of elements of information in a way that implies importance.

With a website designed with clear visual hierarchy, the users visiting your site can find and understand the most important message you want to communicate. Consider 2 pages below:

visual hierarchy in choosing premium Magento 2 theme design

Which one do you think is more understandable?

It is clearly the page on the right, which provides a way to catch the key information. In order to understand the left page, users have to read each sentence one-by-one to catch the idea.

In the context of flooding information on the internet, contents are abundant that users even develop banner blindness.

Even if you have very good products and value proposition, a rock-solid message but your website design does not follow the page on the left above, users would just ignore your effort.

They would not hesitate to hit that “comfortable back button”.

As you can see, visual hierarchy system helps prioritizes the content of websites.

In Website design, a good visual hierarchy system means clearly discriminate the importance of the contents of a website page.

This can be achieved by setting up the contrasting colors, a large difference in font size, or line spacing. with the use of font of the text element or images.

When considering website design, you can try this visual hierarchy test: zoom out to 50% (by holding CTRL + mouse scroll down), have 3 seconds to look at the design then look away.

If then you cannot tell what the website is about, the website is bad in term of visual hierarchy.

A website that is bad in visual hierarchy, you cannot expect your users to understand what you are trying to tell. So a rule of thumb when choosing a Magento 2 website theme design is: go for the ones that are easy to understand hierarchically.

2. Consistent color

Color is one of the most visual aesthetic aspects that easily affects human’s emotion in an immediate way.

color emotion in choosing premium Magento 2 theme design

Image credit: thelogocompany.net

People would perceive brand personality differently when it associates with different colors. That’s why there are some colors that are very commonly used in certain industries.

For example, in the restaurant industry, the most used color for the logo is red, to trigger energy and even feelings of hunger.

restaurants popular color in choosing premium Magento 2 theme design

Image credit: visualcapitalist.com

However, in the communication industry, the color dominates logos is blue, as it conveys clear thinking and communicating.

communication popular color in choosing premium Magento 2 theme design

Image credit: visualcapitalist.com

In branding, the brand color helps customers memorize the brand, including its name, industry, products, and attributes. There is no exception to this rule, whether the (potential) customer interacts with the brand via offline or online stores. According to Kissmetrics:

85% of shoppers place color as a primary reason for why they buy a particular product

Color increases brand recognition by 80%. Brand recognition directly links to consumer confidence.

The Magento 2 website design color, therefore, needs to be consistent for users to easily recognize the familiar brand, making the more purchase in less amount of time.

At its best practice, an Magento 2 website design should follow a color palette.

color palette in choosing premium Magento 2 theme design

You can learn to create your own color palette here. If you have already had a primary color, you can consider adding colors to different elements of your website using Adobe’s free Color CC.

After that, you would want to change the color of multiple elements of the theme to the colors in your color palette. For example, you would want to configure the color of some texts, buttons like below:

example color configuration in choosing premium Magento 2 theme design

Technically, in this section, the theme that you can configure many elements color wins. These elements can be text color, background color, and button color.

So in order to get the best out of the brand’s color, go for a theme that you can configure many elements’ color.

3. Suitable font

When choosing website design, font choice should be considered seriously. Poor font choice results in an unprofessional website.

poor font choice in choosing premium Magento 2 theme design

In the 3 examples above, website owners make terrible choices in selecting fonts.

The font usage of the left one conflicts in both colors and angles, with dense paragraph line spacing, minimize the desire to read the paragraph.

The font usage of the middle one is misleading, as the header and body font have the same weight and typeface. The font is the default Times New Roman, which makes the website looks dull and extremely amateur.

The font usage of the right one is in its clarity. All elements are way too small to be readable.

So what makes a good font choice?

If you have had your fonts determined in your brand guidelines, congratulations. Just follow it.

However, if you have not determined the font for your brand, you need to know the font types.

Font Types

There are 4 most basic font types: Serif, Sans Serif, Script, and Decorative. Each type of font conveys different font characteristic. You have to choose website design which supports the font suitable for your business.

Among 4 font types, Serif and Sans Serif fonts are commonly used due to its simplicity. In website design, using Script and Decorative as elements’ font would be too hard to read.

Sans vs Sans Serif in choosing premium Magento 2 theme design

Image Credit: fonts.com (Serif: left, Sans Serif: right)

Sans Serif fonts give a sense of youth and active. On the other hand, Serif fonts create a feeling of maturity, classic.

Given that, businesses that target young people often use Sans Serif:

PEPSI banner in choosing premium Magento 2 theme design

In contrast, high-end ones commonly use Serif:

Hermes Banner in choosing premium Magento 2 theme design

Construction and real estate business makes great use of Bold Sans Serif for a solid, sustainable sense:

Frontline Roofing and restoration logo in choosing premium Magento 2 theme design

On the other hand, women-oriented brands eager on slim sharp Serif font:

Gucci banner in choosing premium Magento 2 theme design

Font conflict

You should keep your website design’s font number low. In fact, in the design world, there’s a golden rule that is rarely be crossed: no more than 3 fonts in 1 design.

In fact, you can just have just 1 font, with different font style, size, and color that can clearly communicate the message while retaining consistency of the font.

Burger King banner in choosing premium Magento 2 theme design

You should also note that the heading font should stand out, while paragraph font needs cohesion.

In choosing the website design, a theme should have font configuration options. You should be able to choose the main font that matches your business brand or industry. The paragraph and headings font size should be dramatically different.

Choosing best premium theme design for Magento 2 website: in conclusion,

The first thing to consider when buying a theme for Magento 2 website is the design. We have discussed in depth 3 critical elements of a premium website design that you should pay attention: clear visual hierarchy, consistent color, suitable font.

Choosing themes that has the design that has all 3 elements guarantees you an aesthetic and practical design at the same time. Your website can and should be both beautiful and able to convert.

However, a beautiful theme without configurability, function and full of bug cost both a great deal of time and money. The next step in considering the theme is checking the theme’s technical aspect.

Do you think there are other important elements that should be included? Any elements you want to add more details? Let us know your opinion in the comment below.

Magento 2 theme .xml file basic guide

Magento 2 theme .xml file basic guide

Now you probably are creating a custom theme to a Magento 2 website. In Magento 2 theme, .xml files usually determine the layout of web pages. This article gives you a basic knowledge of .xml files including function, location, and processing.

Magento 2 theme .xml file function

According to W3School, XML stands for eXtensible Markup Language, designed to store and transport data.

According to W3.org, XML is a simple text-based format for representing structured information: documents, data, configuration, books, transactions, invoices, and much more.

According to Wikipedia, XML is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable.

In Magento 2, the majority of .xml files represent the structure of the pages layout. Because XML does not carry any information about how to be displayed, the same XML data can be used in many different presentation scenarios in a Magento 2 site.

Magento 2 theme .xml file types

In Magento 2, .xml files are divided into 2 types: page layout and page configuration. These 2 file types make up the layout of any particular page of a Magento 2 website.

The Page layout file defines the page wireframe inside the <body> section of the HTML page markup. It divides the page into different blocks of container. Note that, page layout .xml files feature only containers.

On the other hand, page configuration .xml file defines detailed structure (page header, footer, etc.), contents and page meta information, including the page layout used.

Magento 2 theme .xml file location

In Magento 2, theme is one of the modules. However, while the .xml files in theme folder are used globally in all pages, .xml files in module folder are declared only in pages where the module is activated. Basically, .xml files are located in <module_directory>/view/frontend/layout/

Theme layout

The basic view of all Magento storefront pages is defined in two page configuration layout files located in the Magento_Theme module:

  • Page layout file: <Magento_Theme_module_dir>/view/frontend/layout/default.xml: defines the page layout. For example, vendor/magento/module-theme/view/frontend/layout/default.xml
    Magento 2 theme xml page layout file

  • Page configuration file: <Magento_Theme_module_dir>/view/frontend/layout/default_head_blocks.xml: defines the scripts, images, and meta data included in pages’ <head> section. For example, vendor/magento/module-theme/view/frontend/layout/default_head_blocks.xml
    Magento 2 theme page configuration xml file

In other Magento modules and in Magento themes, these basic page configuration layouts are extended.

Module layout

  • Page layout files: <module_dir>/view/frontend/page_layout.
  • Page configuration files: <module_dir>/view/frontend/layout. For example, vendor/magento/module-swagger/view/frontend/layout
    Magento 2 theme module lay out configuration xml file

Magento 2 .xml file processing

The Magento application processes .xml layout files in the following order:

  • Collects all layout files from modules, including theme, in the order determined in the module list from app/etc/config.php.
  • Identify the sequence of inherited themes [<parent_theme>, …, <parent1_theme>] <current_theme>
  • Repeat the sequence of themes from last ancestor to current:
    • Adds all extending theme layout files to the list.
    • Replaces overridden layout files in the list.
  • Merges all layout files from the list.

Magento 2 .xml file: in conclusion,

This article provides very basic information regardings Magento 2 theme .xml file. For more information about Magento 2 Layout, you can check out Magento DevDocs.

So do you have any question regarding .xml file in Magento 2? Let us know in the comment section below!

6 fundamental views any Magento 2 theme design needs

6 fundamental views for Magento 2 theme design

As an online store-owner, you may ask: so in order to sell goods on my site, how many views do I need? Answering this question ensures that you understand your user’s buying process, therefore helps you better organize the structure of your website and address your needs for the website theme.

This article focuses on the views that your Magento 2 site must-have in order to be able to convert a visitor into a customer. A starter in Magento 2 should think of this as a guideline to prioritizes the pages that need extra attention in the early days of their business.

Inside a Magento theme design, there are always 6 fundamental views: Homepage, Category page, Product page, Cart page, Checkout page and About page.

Let’s think of your website as a brick-and-mortar bookstore. When a person walks into your bookstore, what do they see?

Homepage

The website domain is the same as the address of the bookstore, for customers to come buy goods.

When a person walks in your bookstore, they see an overview of the goods the store sells: books. The bookshelves, which has category names with bold, large font size on it, helps navigate the person to the kind of book they want. Your bookstore visitors should find it easy to notice the best-selling and newly arrived books right at the welcoming door of your store.

bookstore overview most important view of bookstore

The Homepage of your site serves the same purpose as the overview of your bookstore: telling your visitors what you sell, provide good navigation, and promote the products that sell. Take a very quick look at e-commerce market leader’s homepage:

homepage - most important page of e-commerce website

For those purposes, the best practices of designing the Homepage are:

  • Present your goods in a visually attractive way. This means high-quality images and a great homepage design.
  • Provide good navigation. This means that the products should be categorized in an easy-to-understand way, and can be accessed in no more than 3 clicks. Using Mega Menu is a good option. For more information about e-commerce website structure watch the video below from Brian Dean:

  • Promote the products that sell. This means using attention-grabbing banners with clear promotion message. Using dynamic banner slider may be a good start, as Amazon still make use of it.

The Category page

When a person entering your bookstore knows which book genre he is fond of, let’s say it’s “classics”, he goes to the shelves with the name of that genre on it. Now he sees various classic books, presenting in an organized way. He can pick up some books that seem interesting to him, and knowing the name, the price, some basic testimonials without actually opening the book.

bookshelves - important view of bookstore

The Category page has the same function as the bookshelves. It should showcase your in-stock goods of a certain category in an organized way. Visitors should be able to have a glimpse of the basic information of each product you have: the name, the price, and some review. Take a look at Pet Shop’s Category page below:

category page - important page for e-commerce website

For those purposes, the best practices are:

  • Having a filter that can be used to narrow down to user’s specific needs: product price, brand or several other attributes. In Magento 2, the filter is called Layered Navigation.
  • The product price and review are easy to notice, and the product image is clear.

The Product Page

When a person examining your bookshelf is interested in a particular book, he picks up the book to take a look at the inside. Typically, he reads the table of content, the introduction, the detailed testimonials, the author biography, and sometimes a page of the chapter he is curious about. All of that is to have a more in-depth knowledge of what the book is about.

book content - important view of bookstore

The Product Page works exactly the same way. It should be able to give a sense of good understanding of the product, to further empower users to buy the product or not. All these good information are multimedia, detailed information (weight, size, color…), delivery policies, detailed reviews with ratings, warranty policies. Take a look at Take Lessons’ product page below:

With these purpose in mind, here are the best practices for designing product page:

  • Detailed information should be divided into criteria.
  • Review section should come after the product detailed information, to ensure the lead of the value and credibility of the product.
  • Of course, the Call to action that seduces the lead to add the product to cart should stand out, favorably sticky-designed.

The Cart page

After deciding to buy, the person picking up the book, and find some more books. Let’s say after sometimes, he decided to buy 3 more books and no more. Take a last look at 4 books on his hand to check if he has missed any, he holds all the books and head to the cashier desk.

hand - important view in bookstore

The Cart page is as important as the above buyer’s hand. In order for the buying experience to be good, the cart page is designed for the reviewing process of the buyer. The buyer should be able to raise or decrease the number of each product. Take a look at the Cart page of our website, when you want to purchase our Magento 2 Themes:

Cart page - important page of e-commerce site

Cart page design best practices:

  • Avoid function errors. This means that you should spend time checking bugs and debug at all costs. For example, if the “Go to checkout” button is not working, then all of your previous efforts have gone with the wind.
  • Simple design that is congruent with the website concept.

The Checkout page

The person goes to the check out to pay money for the books. He can choose to pay with his credit cards, or in cash. The tax is and all other fees are calculated so that he acknowledge the actual money he has to pay. He pays and leaves your bookstore with satisfaction.

cashier - important view at bookstore

The Checkout page is your cashier desk when the customers pay the money. The customer should be able to provide shipping location and method, choose preferred payment method, and check the final money he has to pay. Other information like email address can be added. Take a look at our Checkout Page below:

checkout page - important page for e-commerce

Checkout page best practices: the same as Cart page best practices.

About page

Lastly, although the offline buying process does not include detailed researching about the vendors, the online buying process relies heavily on the trust of visitors. If you are a new venture, it requires months or even years for your brand to be recognized. The starting point of visitor’s trust to your brand is inside the About page, where you showcase your company information: who you are, what you do, the vision you are achieving… Take a look at Ebay’s About page below:

About page - important page for e-commerce website

About page design best practices:

  • Divide the page into independent sections that tell different angles of your business. Many of potential customers need to be hooked on your brand first, then make a purchase later.
  • Spend time crafting and choosing among the best stories you can tell. I personally cannot stretch this enough, as it is one of the highest ROI activity to do when selling online.

In conclusion,

So that’s it. By now you have known 6 must-have views for any Magento 2 theme design: Homepage, Category page, Product page, Cart page, Checkout page and About page. We hope that you are now determined on the most important pages on your Magento 2 website.

The design of your website pages should be congruent with the importance of the pages. When choosing a theme, you need to acknowledge your design demands for each important page. Therefore, you can later choose between themes wisely. 

If you are using Magento 2, you might not need to have a new theme, as the default theme has covered these 6 must-have pages. The next step for you is to read more about what is configurable and what is not in Magento 2 default theme.

Do you have any opinion on Magento 2 theme design? Let us know in the comment section below, and we would have a discussion.

 

Magento 2 default theme: What is configurable and what is NOT?

Magento-2-default-theme-configurability

Having an interface that is beautiful, fast-loading and at the same time matches your desired website design is not easy. It includes understanding your theme demands and finding the solution that fits your demands.

However, there are times that you don’t even need a complex solution to fulfill your needs. There are two Magento 2 default themes that can cover some basic needs for e-commerce stores. So if you’ve already had what you need in the default, why make three right turns to make a left?

This article is all about what is configurable in Magento 2 default themes. By configurable, we mean the section of the website template that is changeable via Magento 2 admin panel.

You can expect to learn about what is configurable and how to configure after reading the article. Also, you can notice that everything that is configurable in demo theme, is configurable in any other third-party theme. So think of this as a training for basic theme configuration.

Disclaimer: Although there are 2 themes in Magento 2 default, naming Luma and Blank, in this article we will only talk about Luma, as it has many improvements in design when comparing to its parent theme. You can also use Luma demo theme right away.

What is configurable in Magento 2 default theme?

There are 6 basic pages that any e-commerce store owner needs. Now we are going to analyze what is configurable in each view. Remember that we’ve red-boxed what is configurable in the image at the start of each view.

Homepage

Magento_2_Home Page

  • In Header, you can configure the Logo image and the Menu items.
  • In Footer, you can configure the Footer links and the copyright text.
  • In the main content of Homepage, you can choose to display certain CMS Blocks.

You can change the logo to your company’s logo by going to Magento Admin panel > Design > Configuration > Edit the store that is set to your storefront > Header > Logo Image > Upload > Save Configuration.

You can change to Footer links by going to Admin Panel > Product > Inventory > Category, then organize your product categories and choose which to display/hide.

You can configure the main content by either changing the blocks that display at homepage, or changing the homepage block ‘s code. Choose another blocks by going to Admin Panel > Content > Elements > Widget > Widget options > Block > Select block > choose the block you want. Changing the code of homepage block by going to Admin Panel > Content > Element > Blocks > Home Page Block > Select > Edit

Product category page

Magento_2_Tops Women

  • On top of the product listings, you can insert and configure CMS blocks.
  • Just above the product listings, you can configure product view mode and listings Sort options.
  • On the right below the product listings, you can configure the number of product per page option.

You can configure the CMS blocks above the products view of each product category by going to Admin Panel > Catalogs > Categories > [The category of your choice] > Display settings > Display mode > Static Blocks and Products. Then go back to [The category of your choice] > Content > [choose CMS blocks and edit Content Description].

You can configure product view mode options for your users to be List only, Grid only, List (default) and Grid, or Grid (default) and List by going to Admin Panel > Stores > Settings > All Stores > Catalog > Catalog > Storefront > List Mode.

You can configure the Product Listings Sort options for your users by going to Admin Panel > Stores > Settings > All Stores > Catalog > Catalog > Storefront > Product Listing Sort by.

You can configure the number of product per page options for your users, by going to Admin Panel > Stores > Settings > All Stores > Catalog > Catalog > Storefront > Products per Page on Grid/List Allowed Values.

Product detail page

Magento_2_Celeste Sports Bra Tops Women

  • In the product page, you can only configure Product Details.

You can configure Product Details content by going to Admin Panel > Products > Inventory > Catalog > [The product of your choice] > Content > Description.

Cart page

Magento_2_Shopping Cart

  • In Cart page, you can only configure the orders of elements on Summary.

In Cart page, you can configure the orders of elements on Summary by going to Admin Panel > Stores > Settings > All Stores > Sales > Checkout Totals Sort Order > [You can set the Queue number for each section here]

Checkout page

Magento_2_Checkout

  • You cannot configure anything in Checkout Page.

About page

Magento_2_About us

  • You can configure your About page content.

You can configure your About page content by going to Admin Panel > Content > Elements > Pages > About us > Edit

Magento 2 default themes: What is NOT configurable?

Although being very lean and fast, Luma and Blank have many limitations when it comes to configurability. For example, you do not have the option to configure the font size, font family of your theme at all when using Magento 2 default themes. Knowing the limitation of Luma and Blank help you decide whether you can use those themes for your business or not.

Mega Menu options

Magento_2_Default_theme_configurability_sticky_header

Having a Mega Menu can be a game-changer for user experience on your website.

According to Hyrum Denney ‘s research on Website Usability in 2012, 100% users preferred web design with sticky Menu without knowing why. The article also suggests that, with the sticky menu, users could cut 36 seconds off for a five-minute visit to a website. Although even Coca-Cola website uses sticky header, default themes do not support this very important feature.

Using Luma theme, you also cannot change the width of the menu shown when you hover. You cannot showcase your products, blog content preview right on the menu, making it is impossible for your users to access the important content on your website fast. This is due to the fact that we cannot add CMS blocks to Magento 2 default menu.

Magento_2_Default_theme_configurability_CMS_Blocks

Body text

Do you know that the text itself has a personality? Indeed, looking at different fonts clearly give us different feelings. Some fonts are designed to convey sustainability and reliability, while others give a sense of gentleness and artsiness. Choosing fonts that are not in synchronicity with the personality of the brand is harmful in the long run, as it becomes harder and harder for your customers to recognize your brand and its messages.

Magento_2_Default_theme_configurability_font_choice

Another element that is correlated to the brand image is the color. To create a sense of professional, you should set the color of various elements of your site wisely. These elements are text, link, button, and different labels. Keep in mind that you want the users to connect the color of your website width the product they want to purchase, as this creates a sense of familiarity and therefore increase your website conversion rate.

Magento_2_Magento_2_Default_theme_configurability_color_variation

Banner Slider

Today it is hard for a static website to be found on the internet. So why not create a website that makes users engaged by making your site’s first look so compelling to click? You can do so by inserting a beautiful banner slider on top of your homepage, functioning as a persuading advertisement billboard.

Your promotions, highlights cannot be missed out when you use banner slider. Be like Amazon.com, use a web banner slider.

Magento_2_Default_theme_configurability_banner_sliderMagento_2_Default_theme_configurability_banner_slider_2

However, Magento 2 default themes do not support banner slider.

Product preview elements

So what do you want to include on your homepage?

If you are an experienced e-commerce owner, you would definitely know the answer: your best selling, cheapest, newest products and deals! If you have a love for your product, do not fall into the trap of letting your product speak for itself. Spend your love on promoting the products that make you proud, and displaying them on the homepage is a good place to start.

Magento_2_Default_theme_configurability_hot_deals Magento_2_Default_theme_configurability_product_preview_elements Magento_2_Default_theme_configurability_our_products

Luma and Blank do not have a function to call your best-selling in recent time, new products, and hot deals to a block.

A small caveat: the hot sellers block in default themes does not have a function to display products with great sales this month. We can know that by testing with our demo site, Admin > Sales > Invoice. There are only 2 products that are successfully bought this month in the database. However, there are still 7 products in Hot sellers block on the homepage.

Magento_2_Default_theme_configurability_invoice_demo_site Magento_2_Default_theme_configurability_hot_sellers

Category page elements

High-end customers don’t like to see the price tag right away when they see the product. That’s why high-end sellers do not show the price or choose to defer to do so, so they can have time to showcase the value of their product before giving out the cost.

Magento_2_Default_theme_configurability_hover_product_detail

However, Luma and Blank theme do not support price and ratings display options for product blocks in category. The content is also not available to be aligned to center. The product name cannot be shortened when it crosses a certain length.

Blog

Blog is neglected in Magento 2 default themes: there is no blog in Luma and Blank at all. So there is no design for you to showcase your industry expertise as well as do content marketing.

About us, contact

In Luma Theme’s About page, there is hardly anything but the plain information itself. The company is NOT presented in a way that seduces users to read more and buy more. In addition, there is even no contact page. This makes the brand looks aloof, and reduce the experience the users visiting your site deserves.

Magento_2_Default_theme_configurability_about_us Magento_2_Default_theme_configurability_contact_us

Magento 2 default themes: In conclusion,

So that’s it. By now we hope that you’ve understood of the main configurability and limitation of Magento 2 default themes. Of course, being a free theme , Luma and Blank are still good for people starting to try out Magento 2.  It can be enough for many basic shops that do not need many configurations in website design.

However, if your business is more complex, and you want more for your website theme, you should consider other options. These are: developing the theme in-house, hiring a custom developing service, or considering other themes. The last option helps you cut the cost of time and money the most.

In this article, we have showcased a lot of demo image from Thinnk Theme. This theme has the exact configuration options that Luma does not have. If you want a more flexible theme, click on the image below to view more about our theme.

Magento_2_Default_theme_configurability

Magento 2 theme comparison: Luma and Blank

Magento 2 theme comparison Luma and Blank

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.

For just-started users, you can browse our cloud-based Luma theme demos and Blank theme demos right away.

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.

Homepage


Magento 2 theme comparison Luma and Blank - Homepage
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.

Product category


Magento 2 theme comparison Luma and Blank - category page
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.


Magento 2 theme comparison Luma and Blank - product hover

Product detail


Magento 2 theme comparison Luma and Blank - product detail
There are also a lot of improvement in Luma in Product detail view. Luma separates information into blocks, making the page more user-friendly.

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.

Cart page

Magento 2 theme comparison Luma and Blank - cart page

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.

Checkout page

Magento 2 theme comparison Luma and Blank - checkout page

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.

About page

Magento 2 theme comparison Luma and Blank - About page

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.

Magento 2 theme comparison Luma and Blank folder

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.

Magento 2 theme comparison Luma and Blank PHP files

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.

Again, for further exploration, you can always browse our cloud-based Luma theme demos and Blank theme demos right away.

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.

Magento 2 theme comparison Luma and Blank

12 versions of magento 2 Blank theme demo

12 versions of magento 2 Blank theme demo

In the previous article, we have provided many versions of the Magento 2 Luma theme Demo.

Magento 2 Luma theme

Today, we introduce to you 12 demos of another Magento 2 default built-in theme: Blank theme.

Magento 2 Blank theme preview

We understand that, to a beginner in the best e-commerce platform Magento 2, seeing is believing. You are about to have a glimpse of our cloud-based Blank theme demo right away.

However, because many users like you might have configured this demo, the enabled theme might be Luma. In that case, you will see the instruction to configure the theme back to Blank in just 2 minutes at the end of the post. Then you can freely browse the website in Blank for however long you want. Good luck!

Note that to browse backend demos, you need the access: Username: admin; Password: admin123.

Magento 2 Blank theme Demo: Latest Version 2.2.3 (released on Feb 27, 2018)

Read more: Key update in Version 2.2.3 release:
  • Enhancements that help close cross-site request forgery (CSRF), unauthorized data leaks, and authenticated Admin user remote code execution vulnerabilities.
  • Support for Elasticsearch 5.x.
  • Change to Magento Admin to support recent USPS shipping changes. New layers of control for cache management tasks managed through the Magento Admin.
  • Updated copyright to 2018.

Magento 2 Blank theme Demo: Version 2.2.2

Read more: Key update in Version 2.2.2 release:
  • Advanced Reporting powered by Magento Business Intelligence.
  • Magento Shipping
  • Streamlined Instant Purchase checkout
  • Integrated dotmailer marketing automation software.
  • Magento Functional Testing Framework.

Magento 2 Blank theme Demo: Version 2.2.1

Read more: Key update in Version 2.2.1 release:
  • Integrated Signifyd Fraud Protection is now available
  • Ability to implement translations from themes.
  • Improvements to how the PayPal Express Checkout payment method processes virtual products.
  • Multiple enhancements to product security.
  • Twenty-two community-submitted bug fixes and multiple pull requests.

Magento 2 Blank theme Demo: Version 2.2.0

Read more: Key update in Version 2.2.0 release:
  • Bundled extensions
  • Significant enhancements in platform security and developer experience
  • Upgraded technology stack
  • Pipeline deployment
  • Performance gains from improvements in indexing, cart, and cache operations

Magento 2 Blank theme Demo: Version 2.1.9

Read more: Key update in Version 2.1.9 release:
  • Enhancements that help close cross-site request forgery (CSRF), unauthorized data leak, and authenticated Admin user remote code execution vulnerabilities.
  • Support for changes to the USPS API that USPS implemented on September 1, 2017
  • Fixed issue with logging information about exceptions caused by payment failures
  • Change to how Magento displays status updates during upgrade.

Magento 2 Blank theme Demo: Version 2.1.8

Read more: Key update in Version 2.1.8 release:
  • Multiple enhancements to static content deployment and generation
  • Improvements to indexing of large catalogs, cache tuning, and **URL re-writes
  • Reduction in the amount of memory that mass actions require
  • Faster deployments

Magento 2 Blank theme Demo: Version 2.1.7

Read more: Key update in Version 2.1.7 release:
  • Resolution of multiple high priority and critical security issues.
  • Reversion of the changes to image resizing that we introduced in 2.1.6

Magento 2 Blank theme Demo: Version 2.1.6

Read more: Key update in Version 2.1.6 release:
  • Improved performance of the Category page
  • Optimized image resizing
  • Improved performance of layered navigation
  • Minimized indexing operations after product import

Magento 2 Blank theme Demo: Version 2.1.5

Read more: Key update in Version 2.1.5 release:

Developers who contribute to the Open Source codebase can upgrade manually from the Magento Open Source GitHub repository.

Magento 2 Blank theme Demo: Version 2.1.4

Read more: Key update in Version 2.1.4 release:
  • Removal of vulnerability with the Zend framework Zend_Mail library
  • Updates to the catalog, payment, and sales modules

Magento 2 Blank theme Demo: Version 2.1.3

Read more: Key update in Version 2.1.3 release:
  • New PayPal and Braintree payment features
  • Increased storefront performance
  • Management of configurable products with many variations
  • Successful import or export CSV files with data that contains special symbols
  • The Sales module provides two new web API endpoints that allow you to process refunds from an order or invoice.
  • Enhanced performance in the processing of large catalogs

Magento 2 Blank theme Demo: Version 2.0.9

Read more: Key update in Version 2.0.9 release:
  • Shopping cart: Magento no longer displays an incorrect price in the shopping cart when using multiple shipping addresses.
  • Performance: improved storefront performance when you use many variations of a configurable product.
  • Marketing: Cart Price Rules are now applied as expected to Payment method conditions. Previously, discounts set in Cart Price Rules were not applied during checkout.

Bonus: How to change enabled theme from Luma to Blank in Magento 2 default

First choose a version of your interest, browsed the backend demo. Let’s say it’s version 2.2.3.

Log in to your backend of Magento 2

Log in using access: Username: admin; Password: admin123.

Then go to Admin panel on the left > Content > Design > Configuration:

magento 2 blank theme enable step 1

Then you Edit the Main Website Store > Default Store View

Magento 2 enable blank theme step 2

After that you select Blank theme in Default theme > Apply theme, and Save and continue.

magento 2 blank theme enable step 3

Then you Flush Cache by going to Admin Panel on the left > System > Tools > Cache Management > Flush Magento Cache.

Magento 2 Blank theme Flush Cache

And there you have the demo theme changed from Luma to Blank. Hope you enjoy it!

Magento 2 Blank theme demo: in conclusion,

After browsing the Blank theme of Magento 2 default, you must have some opinion on the matter. What do you think about Magento 2 Blank theme? Let us know in the comment section.

You can also browse the comprehensive theme we have spent all our time and pride on to develop below.

Magento 2 Blank theme

12 versions of Magento 2 Luma theme demo

12 versions of Magento 2 Luma theme demo

Since its publication, our previous article has helped site owners and web developers download luma theme. However, if you are a starter, you should try Magento 2 Luma theme demo right away.

Magento 2 Luma theme demo

In this article, we have listed 12 of our cloud-based Demo website that runs on Magento 2, both back-end and front-end. However, because many users like you might have configured this demo, the enabled theme might be Blank theme.

Magento 2 Blank theme demo

In that case, you will see the instruction to configure the theme back to Luma in just 2 minutes at the end of the post. Then you can freely browse the website in Luma for however long you want. Good luck!

Note that to browse backend demos, you need the access:

  • Username: admin
  • Password: admin123

Magento 2 Luma theme Demo: Latest Version 2.2.3 (released on Feb 27, 2018)

⇒ Key update in Version 2.2.3 release:

  • Enhancements that help close cross-site request forgery (CSRF), unauthorized data leaks, and authenticated Admin user remote code execution vulnerabilities.
  • Support for Elasticsearch 5.x.
  • Change to Magento Admin to support recent USPS shipping changes. New layers of control for cache management tasks managed through the Magento Admin.
  • Updated copyright to 2018.

Magento 2 Luma theme Demo: Version 2.2.2

⇒ Key update in Version 2.2.2 release:

  • Advanced Reporting powered by Magento Business Intelligence.
  • Magento Shipping
  • Streamlined Instant Purchase checkout
  • Integrated dotmailer marketing automation software.
  • Magento Functional Testing Framework.

Magento 2 Luma theme Demo: Version 2.2.1

⇒ Key update in Version 2.2.1 release:

  • Integrated Signifyd Fraud Protection is now available
  • Ability to implement translations from themes.
  • Improvements to how the PayPal Express Checkout payment method processes virtual products.
  • Multiple enhancements to product security.
  • Twenty-two community-submitted bug fixes and multiple pull requests.

Magento 2 Luma theme Demo: Version 2.2.0

⇒ Key update in Version 2.2.0 release:

  • Bundled extensions
  • Significant enhancements in platform security and developer experience
  • Upgraded technology stack
  • Pipeline deployment
  • Performance gains from improvements in indexing, cart, and cache operations

Magento 2 Luma theme Demo: Version 2.1.9

⇒ Key update in Version 2.1.9 release:

  • Enhancements that help close cross-site request forgery (CSRF), unauthorized data leak, and authenticated Admin user remote code execution vulnerabilities.
  • Support for changes to the USPS API that USPS implemented on September 1, 2017
  • Fixed issue with logging information about exceptions caused by payment failures
  • Change to how Magento displays status updates during upgrade.

Magento 2 Luma theme Demo: Version 2.1.8

⇒ Key update in Version 2.1.8 release:

  • multiple enhancements to static content deployment and generation
  • improvements to indexing of large catalogs, cache tuning, and **URL re-writes
  • reduction in the amount of memory that mass actions require
  • faster deployments

Magento 2 Luma theme Demo: Version 2.1.7

⇒ Key update in Version 2.1.7 release:

  • Resolution of multiple high priority and critical security issues.
  • Reversion of the changes to image resizing that we introduced in 2.1.6

Magento 2 Luma theme Demo: Version 2.1.6

⇒ Key update in Version 2.1.3 release:

  • Improved performance of the Category page
  • Optimized image resizing
  • Improved performance of layered navigation
  • Minimized indexing operations after product import

Magento 2 Luma theme Demo: Version 2.1.5

Magento 2 Luma theme Demo: Version 2.1.4

⇒ Key update in Version 2.1.4 release:

  • Removal of vulnerability with the Zend framework, Zend_Mail, library
  • Updates to the catalog, payment, and sales modules

Magento 2 Luma theme Demo: Version 2.1.3

⇒ Key update in Version 2.1.3 release:

  • New PayPal and Braintree payment features
  • Increased storefront performance
  • Management of configurable products with many variations
  • Successful import or export CSV files with data that contains special symbols
  • The Sales module provides two new web API endpoints that allow you to process refunds from an order or invoice.
  • Enhanced performance in the processing of large catalogs

Magento 2 Luma theme Demo: Version 2.0.9

⇒ Key update in Version 2.0.9 release:

  • Shopping cart: Magento no longer displays an incorrect price in the shopping cart when using multiple shipping addresses.
  • Performance: improved storefront performance when you use many variations of a configurable product.
  • Marketing: Cart Price Rules are now applied as expected to Payment method conditions. Previously, discounts set in Cart Price Rules were not applied during checkout.

 

Bonus: How to change enabled theme from Blank to Luma in Magento 2 default

First choose a version of your interest, browsed the backend demo. Let’s say it’s version 2.2.3.

Magento 2 Luma theme demo backend log in

Log in using access: Username: admin; Password: admin123.

Then go to Admin panel on the left > Content > Design > Configuration:

Magento 2 Luma theme enable theme step 1

Then you Edit the Main Website Store > Default Store View

Magento 2 Luma theme demo Enable theme step 2

After that you select Luma theme in Default theme > Apply theme, and Save and continue.

Magento 2 Luma theme demo enable theme step 3

Then you Flush Cache by going to Admin Panel on the left > System > Tools > Cache Management > Flush Magento Cache.

Magento 2 luma theme demo flush cache And there you have the demo theme changed from Blank to Luma. Hope you enjoy it!

Magento 2 Luma theme demo: in conclusion,

After browsing the Luma theme of Magento 2 default, you must have some opinion on the matter. What do you think about Magento 2 Luma theme? Let us know in the comment section.

You can also browse the comprehensive theme we have spent all our time and pride on to develop below.

 

Add new theme to Magento 2 website: Why and How?

magento 2 add new theme

Do you want to add a new theme to Magento 2 website?

This blog post guides you on adding a theme to Magento 2 website. First, we will explain the common reasons to add a new theme to your site (and common unreasonable cases). Then, if you are determined you should add a new theme, we will discuss the method to do that.

Why should you add a new theme to Magento 2 website?

There are several reasons to add theme to your Magento 2 website. For example, to leverage the conversion rate of your product/category page, or to expand the scope of your business. However, there are times that you should not try to add the theme to your website right away. Today, we take into account both reasons listed above, and the situations when we recommend you to add a theme and recommend you not to.

To leverage the conversion rate of your product/category

add-new-theme-magento-2

The marketers always care for conversion rate optimization for their websites, as this is a measurable metric that can determine the marketing efforts, campaign ROI and ultimately the efficiency of the marketing strategy.

As a store owner, you have to know the reason behind your website visitors’ reasons for not converting. Bad design and UX can be a reason.

However, there are times that you should not mind conversion rate: when you have too little traffic to your website.

A basic A/B test requires a sampling of at least 500 traffic to be trustable. For example, let’s say your product/category page has 10 traffic/day, and you split test that 10 traffic to test 2 designs of the product page and see which one converts, then you would need 100 days to have an answer for your test.

Therefore, testing to optimize at that stage is more time-consuming than having a great impact on your business result.

If your site has low traffic, we suggest you focusing on increasing your website traffic first, by using paid advertising for a fast result, or go for content marketing if you prefer taking a long-term approach. Only after having a decent traffic coming to your website should you concern about optimizing page conversion rate.

To expand the scope of your business

add-new-theme-magento-2-expand-business-scope

Let’s say your business is blooming recently with the use of Magento 2. Now you are confident that you have enough resource to scale it. It can be: expanding the target countries, selling different products to old customers, or just entering a whole new market.

  • In the first situation, expanding the targeting countries do not requires adding a new theme. Magento 2 supports multiple store views that can display your website in different language and currencies, and you can translate your Magento 2 website. And if your current site design works for United States customers, it works for French customers.
  • In the second situation, if you are trying to sell different products to old customers, you should consider whether you should build a whole new brand (and website look) or not. We suggest you consider the relevancy of your new product category to your current one. If the new product is highly related to current one, like Magento 1 extension and Magento 2 extension, you should keep your new product category in the same website with the same theme, to create familiarity to your brand, thus leverage the position of your brand in the mind of your customers. However, in case you’ve previously sold food for teenagers and now you want to sell sneakers to them, we suggest you adding a new theme that runs on a new separate store.
  • In the third situation, if you want to enter a whole new market, we recommend you choose a whole new domain for your launching venture. The next step is to choose a theme that fits your industry, regarding main font family, colors of the theme. For example, construction-related companies often use Bold, Serif fonts to create a firm sense that is associated with their products.

How can you add a new theme to Magento website?

After you have determined you want to add theme to your magento 2 website, you need to know how to do so properly.

Upload the newly added theme to your server

  • Log in to your FTP Account using FileZilla
  • Select your zipped theme file
  • Upload the file
    drag zipped Magento 2 theme to server to add new theme
  • Unzip Theme file using SSH:
    unzip [theme name].zip>

Install the newly added theme

  • Upgrade Setup: Input
    php bin/magento setup:upgrade 

    Upgrade to add Magento 2 Theme

  • Deploy
    • In case you use Magento version 2.2.x and above, input
      php bin/magento setup:static-content:deploy –f 
    • In case you use Magento version 2.1.x and lower, input
      php bin/magento setup:static-content:deploy
  • Go to your Magento Admin > Content > Design > Configuration > Edit Main Website Store >add Magento 2 theme by enabling themeThen Select your theme > Save Configurationenable the newly added magento 2 theme
  • Flush Cache
    Go to System > Cache Management > Flush Magento Cache
    add-new-theme-magento-2-flush-cache
  • Import Demo Data
    In some certain themes, there can be an option to import Data to make the enabled theme look exactly like the demo. To do this, go to [Vendor_name] > Import data.
    Import data from your magento 2 theme after upload
  • Flush Cache again

Add new theme to Magento 2 site: in conclusion,

By now we think that you’ve developed some opinion on when to add theme to Magento 2 websites. In general, you should think of your current situation and determine whether you should add a new theme or not.

If you have any more question regarding adding theme to Magento sites, feel free to leave a comment below. We will be more than glad to answer you.

Once you make sure you want a new theme, check out the theme that we spent months and pride developing.

Magento 2 add theme