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.
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.
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.
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.
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.
Then check if that version is supported by the theme in the theme description.
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.
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:
|
|
- Multiple layouts for product page
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- Multiple layouts for category page
|
|
|
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.
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:
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.
