In this post I’m going to tackle how you would choose the best OpenCart Themes for your eCommerce Website. You’ll have an idea on how you would choose the right one for your site by knowing the various criteria to take note off when looking for the right template. Let us look more deeper and check what’s under the hood and not just visual style or design. I am not a wanna-be expert here, just sharing my insight and what to look for in a Theme.
Jump Links
A Theme should not only look good, but must also perform great in terms of speed, usability and SEO. In order to look for one, we need to see underneath the code and not just the rendered output or what users can only see with their browsers. You also need to check the code and how easy it is to modify in case you need to. Because there will always be a need to customize it further so it would be unique. A good Theme must not also be bloated with features that you won’t be using in the end. That would affect the performance of the site if that would be the case. So don’t be compelled by just looking at features and designs, you should also consider simplicity and performance.
Now, if I were to choose my own OpenCart Theme, I would check for the following criteria:
- Features
- Design
- Usability
- Code
- SEO Optimized
Criteria
The following are the criteria that you can check on, when looking for a Theme. Take note, that this is how I choose my Theme if I were the one buying it.
Version Compatibility
This should be the first consideration when looking for a Theme. That’s atleast according to me, you may also take this as the last step if you want to. But for me, I will take this as the very initial step.
You may want to head over to ThemeForest OpenCart Theme section, and use the filter block on the right side of the page. Click on Software Version then choose your currently installed OpenCart version.
After that, explore through the result page and use the criteria below when choosing.
Also Read: Installing OpenCart 2.x.x on various platforms
Features
This might also be your first consideration when looking for a better Theme. Features are capabilities and functions that the Theme Author is advertising as included with the Theme. These are the things it can do for your OpenCart website. These comes with extra files called extensions or mods, other comes hard-coded with the Theme files, but this is rarely done. Most, features/functions comes as extensions or add-ons. One example of Theme feature is the Mega Menu. Mega menus are versatile and usually complicated to setup. You can add several items to it and not just product categories. You can add a block that contains images or a summary of feature product. Another example of feature, is the product or image slider. OpenCart comes with a default slider, but third-party Themes offers more features and complex image slider. Some slider can be customized and you can add text overlays and effects.
If you’re starting an online store, you can do a research by typing the feature you want, for instance; “opencart theme with mega menu” or “opencart clothing theme”. By doing this, you are filtering the result into a more specific Theme Type or Style, you can see and review the Themes you might want, then scrutinize it later using the other criteria. If you see the features you need in a Theme, then take note of the name for deeper and later review.
Next thing you need to look for is Design.
Design
Basically this is the overall look of the Theme, and this include the layout and placement of blocks, color scheme and font-faces and the whole system flow.
After looking for the features you want, the next thing you should check is this Criteria.
Let’s say you found a Theme that has the features you want, your next move is to check the overall design. Are you attracted to it? Do you really like it? Or do you like the font combination and layout? Maybe the product product page looks awesome to you? If so, then rate it between the scale of 1-10 then take note of it.
Take note though, that what I mean of “Awesome” is not necessarily bloated with design element or lots of sliders on the front. It should be neat and simple. Remember, too much design element may bloat the Theme’s assets like; JavaScript and CSS, thereby increasing the page size which is critical to faster page load.
Usability
Third thing to check is “Usability”. This may include the question ‘how steep the learning curve is’. Is it too difficult to use the front-end during the first visit? Or using the site is too easy that users can find what they want in just a breeze?
Furthermore, this also means how users can efficiently use your site with ease and with satisfaction.
This could be both for your users or you (the Admin). I’ve mentioned above that some Themes may have complex features/function. And usually you will have to configure such feature via the Admin Dashboard. Theme vendors usually offer a demo, this includes admin dashboard demo. Using the demo, you can take a look and check how the features/functions were configured. You will have the chance to configure it yourself, and right away you can tell how easy or difficult it is to learn – how to set it. Is it too easy or difficult to learn? Have you configured it without resorting to manuals or guides? Now, rate the the Theme and take note of it.
Also don’t forget to check/test the front-end of the Theme and set your foot in the shoes of a buyer. Test the site how easy or hard for the user to find what they’re looking for, or easy it is to checkout. Can the user follow on with the buying process without reading your FAQ page, or is it too complicated? Ask these questions to yourself and rate the Theme.
Don’t choose a Theme because you like it, instead choose one that will benefit your users.
Don’t just buy any Theme you would want because you like the image slider feature or the mega menu.
Don’t pick randomly because you like the design, it looks awesome and trendy.
Instead, think of your users, will it benefit them?
Code
This criteria requires you to at least understand what’s beneath the page, the Page Source. Not necessarily the PHP codes, but HTML, JavaScript and CSS styles. You don’t actually need to learn how to code, you only need to know the very basic of it. Please read further to know what you need.
You need to check the source code in the Theme by checking the demo page, and hit ctrl + u.
Now, you should be able to see how many CSS styles and JavaScript were loaded. Honestly, it is time consuming and difficult looking for Themes with minimal number of these. Just try your best and look for something that has the least number of external CSS & JavaScript files, no exact number for the minimum.
Furthermore, check how CSS is delivered, to avoid “Optimize CSS Delivery” warning when using Google’s PageSpeed Insight
A good score to have when using the above tool is 85. But it’s the score you get based on several other factors.
Most Themes out there are bloated with JS and CSS files. The purpose of having a minimal page asset/resource, is to avoid too many calls, back and fort trip to call and render the page by the browser. Basically too much CSS call and JavaScripts may produce a negative impact on performance or page load time. But mostly, Theme developers couldn’t avoid such issue, and their Themes ends up to having too many CSS and JS files, that leads to slow page load.
Also, it would be great to have those JavaScript loaded at the bottom of the page. Again, for better performance and page load time.
The fewer the JS and CSS files, the better.
Some Theme Developer combine all their style sheet into one css file, while inlining other styles and JavaScript to avoid “render blocking”.
If you want to check how heavy a Theme’s page size, head over to tools.pingdom.com and drop the Theme Demo URL – to check the Theme’s load time, page size, number of CSS & JavaScript files, and few other details.
Note: Page Load Time can significantly affect conversion. Users tends to browse away your page if it loads to slow. In addition, don’t bore your users with circling loading gif animation while waiting your page to load, for nearly 60 seconds. Instead, impress them with your fast loading website.
In addition, the server that the Theme is currently on, can significantly affect the load time and response time. An optimized server will greatly help with this.
Ideally, your site should load within 2-3 seconds. You can use the tool I mentioned above to check on any Theme you would want.
Note: Page Load Time is one of Google’s Search Engine Ranking Factor.
SEO Optimized
It would be best to have a Theme that is SEO-optimized.
Basically, a page that has been optimized could have a better performance in Search Engine compared to a competitor site that is not SEO-optimized at all.
If you found a Theme that has a built-in SEO module, add-on or extension, then grab that Theme, provided it passed the other criteria. An OpenCart theme with schema.org markup would be great, especially when using the product schema markup.
Also, a Theme with add-on that can rewrite a product URL according to what you want is a good one.
Overall, look for a Theme that has a built-in feature that can handle the items discussed on this post.
The Best OpenCart Theme
For me, taking into consideration all the points I’ve mentioned above, the most excellent Theme for OpenCart is a Theme called Shoppica.
For me, this is the most suitable Theme for any OC-based online store. You can use it with any niche store, like; clothing or fashion store, electronics store, jewelry or even handicrafts you personally made and selling it online.
It’s an all-purpose Theme that fits on any type of OpenCart store. Best of all, it supports the latest OC version 2.3.0.x, as of November 6, 2016 – the time of writing this article.
It’s been out for years and continuously updated so it would work with the most recent version of OpenCart. Active bug fixing and improvement are being thrown in to this great Theme.
Shoppica Theme has been popular, ever since OC v1.5.
Okay now, let me discuss about the good features of this awesome Theme.
Shoppica Features
For me, the best feature that this Theme has is it’s Simplicity. I mean, looking at the Theme is so clean and simple, not cluttered and everything is layed out neatly. I would want this instead of those with fancy and big image sliders which causes your page to load longer.
Page Builder – From the Admin Dashboard, you can create a simple to complex page layout by just draging and dropping any blocks you want. You can choose from 40+ custom blocks like; Facebook or Tweeter like box, Latest products or articles and many more.
Responsive Layout – This theme uses Twitter Boostrap Framework, a framework not only used for responsive design but also for easy prototyping or custom modification if you want to. Most freelance developers or web designer knows about this thing, and in case you need a custom work, you can easily find one who knows how to work on it.
The responsive layout feature makes your Theme fits on various screen sizes, be it lapttop, desktop, tablet or mobile device.
Multi-store Compatible – It means this Theme is compatible with OpenCart Mutli-Store setup. A setup where you can run multiple individual store with their own and separate categories and products, using same instance of OpenCart. No need for multiple installation. So with this feature, you can use the Theme on any store you configured.
Mega Menu – Yes, you can create mega menus with this Theme, similar to Mega Menus that the Pavo Theme usually has in their themes.
Reference Image:
Shoppica’s Usability
If you test their Demo, you’ll quickly notice that the layout and flow is so smooth and easy to navigate. For me, this is the best example of a usable Theme. Shopping for a product is easy, as well as for checking out. Easy to follow flow, no confusing pop-up blocks and crazy hover effects.
Another great feature included by the way is, the one click Sample Data installation. With this feature, it won’t be difficult for store admins to setup Shoppica theme and make it look like the demo. You can quickly install demo products/categories and settings with one mouse-click.
Shoppica’s Design
Very simple design which is great, since you can make it more complex by adding more blocks, modules from the Admin Dashboard.
I’ve used the PageSpeed Insight tool to test how fast the demo is, and it got a score of 80. Take note, that other factors can still boost up the score. If you have your own VPS and use this Theme, then optimized your server… well sure you can bump up the score up to 85+ more.
Shoppica’s Code
If you look at the page source, you can see that it has minimal (2 of each – to render the page) CSS and JS files, which is so great, because the browser can load the page quicker. Take a look at the screenshot below. I used pingdom.com to test http://shoppica.net/ – the home page. See the load time which is 1.70 s, while page size is almost 1MB.
Take note that you can still shrink the size by further employing optimization techniques.
Screenshot here:
If you compare other Themes you find outhere and use the tool above, you’ll see how slow their page load time is.
Shoppica is SEO Optimized
As already advertised in their Theme Forest page, this Theme is loaded with SEO feature. SEO functionality is in-built into the Theme. Function like; Product Meta Title Generator, SEO friendly URL generator, structured data markup using micro-data and few more others.
This Theme has more to offer, if you want to read all, you can visit the Theme Forest Page.
It’s a Wrap!
Choosing the best OpenCart theme for your store is not that hard. It’s time consuming, but it’s worth your time and money, especially when you have chosen the most efficient one. Take note of those criteria I mentioned above, when looking for the right theme. Take Shoppica as an example or purchase it straight away and look no further. You can use it with any niche/type of online store setup like; clothing store, jewelry store or electronic shop. It’s fast, SEO-optimized, simple but not ugly, actively developed and customer support is top-notch.
If you’re looking for something different, then just head over to ThemeForest and look for one.
If you have something more to add or have something to ask, feel free to comment below.
Also Read: Installing an OpenCart Theme.
