If you are thinking about what Magento theme will bring your store more conversions and traffic, we highly recommend going with a custom theme. It’s branded, responsive, unique, and can be modified any way you want it.
There are out-of-the-box solutions that have their advantages as well. We’ll have a look at both before digging deeper into the essentials of custom theme development.
Table of Content
Custom vs. Out-of-the-box Themes for Magento
About a dozen e-commerce store owners per week e-mail us ask the same question: what is the best Magento theme?
By “best” they often mean different things, but everyone running an online store ultimately wants more sales.
There are two options in terms of themes: ready and custom themes.
1. Ready-Made Themes
Magento market themes come with a ready set of elements and features and allow slight customization.
Pros:
- Available: as soon as you find a suitable theme, you can buy it and integrate it into your store.
- Time and resource-saving: you will spend time on theme integration (and customization) only.
- Documents and guides: ready themes always come with supporting documentation and troubleshooting guides.
- UX-friendly: such themes are usually developed with UX in mind.
Cons:
- Poor code: ready themes often have poorly-written code that slows the store performance.
- Customization: most purchased themes have limited customization options.
- Irrelevant to the brand: because the theme was made with no specific brand in mind, it may not 100% correspond to your company image and brand identity.
Many ready-made themes copycat the themes of big retailers and that’s the reason for their popularity. For example, the Aliexpress Magento theme is quite popular among online retailers as it proved to be selling and UX-friendly.
But if you want your store to have a unique appearance and are ready to invest time and effort into that, a custom theme is your best choice.
2. Custom Themes
Custom themes are created from scratch. That may seem time-consuming, but these themes always pay off with excellent performance and deliver high results in terms of conversions and user engagement.
Pros:
- Customization: you can adjust the functionality to your specific requirements.
- Relevancy: the customized theme will 100% reflect your brand.
- SEO-optimized: you will be able to tailor the theme to suit your SEO needs and, as a result, drive more traffic to the store.
- Management: themes created by your developers will be easier to manage.
Cons:
- Cost: development from scratch can get pricey.
- Maintenance: To keep the theme’s scalability and performance on a high level, you will need to .
- Time: the development of a custom theme requires a lot of time, so get ready for this.
If you want the store to represent your brand and function in accordance with the needs of your shoppers, we highly recommend investing in the .
How Do You Create a Store Theme that Converts?
Here are the top 7 things to consider to create a converting and efficient theme.
1. Structure the Process
When you outline your goals, create a wireframe, and list down all the tools and elements you have at your disposal, you get a guarantee of a consistent work process with a minimal amount of bugs or unexpected errors.
These are the basic steps in the design process:
- Define the project: your target audience, brand identity, competition analysis
- Define the project scope: a clear timeline with arranged tasks will help you stay on track.
- Create wireframe and sitemap: this will help visualize the page content.
- Create a visual style: in accordance with your brand.
- Develop the content: create the necessary elements and build HTML and CSS.
- Test & launch: perform the testing to identify any bugs or problem areas and, once everything functions properly, launch your store!
2. Leverage Reusable Elements
We’ve already said that the development of a custom Magento theme is a quite time-consuming process since everything has to be developed from scratch.
Or is it?
To save time, double-check whether you have any elements that you’ve already used for the different themes and can use for the new one. As well, there may be some available shared patterns from the Pattern Library.
Such reusable elements significantly cut down the time that you spend on development and speed up the whole process. Also, estimate how long will it take you to create and implement each element.
3. Keep the Theme SEO-Friendly
There is no need to emphasize the importance of SEO for any website and e-commerce store, specifically. And because Magento is known to be incredibly SEO-friendly, it would be a shame to miss the point when developing a theme.
a) Headings
This is one of the main points to consider. Your e-commerce store pages should have one main H1 heading, which will be the page’s main subject. If we take a product detail page as an example, a product title will be the H1 heading.
Don’t forget about H1, H2, and H3 hierarchy when organizing content on the page. Try to include relevant keywords in the headings but keep it natural and don’t add keywords just for the sake of doing it.
b) Content Optimization
When adding images, make sure to fill in the image description and alt tags. Proper helps images from your store score higher in search results and helps search engines understand what the images are about.
The text content has to be optimized as well: include keywords, create unique meta tags and product descriptions. Optimization of text content eliminates the issue of duplicate content, causes higher ranking, and better visibility, which, in turn, leads to more organic traffic.
c) Duplicate Content
Duplicate content harms your ranking and is one of the primary issues to resolve when optimizing the store.
Some of the solutions are:
- Apply 301 redirects to those URLs that lead to the same content;
- Apply "nofollow", "noindex" tags to the URLs that lead to the pages that you don’t want to index;
- Rewrite the product description provided by the manufacturer;
- Write unique title tags.
4. Keep It Mobile-Friendly
Mobile commerce is steadily becoming a new (and huge) trend. About 40% of the online purchases last year were made via a mobile device and 80% of the shoppers use their smartphones to look for the products and learn about them.
All this data leads to an important conclusion: e-commerce stores have to be mobile-friendly in order to sell more.
But there is one more important argument in favor of . Google introduced mobile-first indexing, which means it will now rank the mobile version of your store first and will then evaluate the desktop one. This will influence both and the . You can see more information on mobile-first indexing .
What you can do to keep your store mobile-friendly:
- Eliminate unnecessary content;
- Make sure the design is responsive and light-weight;
- Optimize navigation to make it easy and intuitive;
- Optimize the images and video;
- Customize the data input to be mobile-friendly.
The thing to watch for in Magento mobile theme is the content on both mobile and desktop versions: it has to be the same, both in terms of the images and text.
5. Be UX-Oriented
User experience impacts your conversions heavily. Smooth and frictionless UX guides the user towards the purchase - that’s why poor UX results in the loss of sales and customers.
While UX is an incredibly broad topic to cover, there are some on-point guidelines, provided by Google in its . The playbook itself contains more than 100 pages.
Here are some of the biggest things to consider when creating a UX-friendly e-commerce theme.
a) CTA Buttons
Call-to-action buttons are the elements that encourage the user to take the desired action, like signup, purchase, or social media following. Like any other element, it has to be carefully crafted. It’s not enough to just place a CTA button and hope for the best.
b) Ghost vs. Color Buttons
While some designers still prefer ghost buttons, numerous studies have shown that people react better on bright buttons that stand out and grab attention. Thus, we would also recommend opting for the colored buttons that can easily be spotted when browsing the page.
c) CTA Placement
Google recommends placing CTAs as high as possible. Such placement gets more attention from the shoppers and, as a result, leads to conversions.
d) Content
Another important thing that many e-commerce store owners often ignore is what your CTA actually says. The majority of the buttons go with cliches like “Buy now”, “Learn more”, “Shop now”. Instead, try personalizing the CTAs by including the information about your products: i.e. “Discover the watches”.
It is crucial that you do the A/B testing and see what works best for your store specifically. It may happen so that ghost buttons perform better than the bright ones or vice versa.
e) Value Proposition
A value proposition is a must-have element for every page of the e-commerce store. It usually comes in form of a banner and is placed on top of the page.
A value prop contains information about the value the user will get once completing the purchase. Examples are “free delivery from $50”, “Shipping worldwide”, “15% off the first order”.
By placing the value prop on every page, you will be able to encourage the user throughout the whole shopping process and eventually lead them to close the deal.
f) Progress Bar for the Checkout
One minor thing that can impact your sales heavily is the implementation of the progress bar in the checkout area.
When seeing their own progress, the shoppers get more motivated to complete the process. Just make sure the progress bar is visible as shown in the example below. These screenshots were taken on the official website which is a great .
6. Consider Page Load Speed
Site load speed is one of the critical ranking factors. So create your theme with this in mind.
The factors that slow the performance down are:
- excessive code,
- unnecessary extensions and plugins,
- lack of caching,
- bulky elements,
- non-optimized images.
If you want to learn how to speed up your Magento store, check out our . But in general, keep an eye on the theme elements and their impact on the load speed.
An important thing to keep in mind is the skills of your developers that directly impact the store performance and speed. Novice developers with zero will to learn and try new approaches usually end up with bulky code that is hard to understand. Skilled Magento developers, like the Onilab experts' team, on the other hand, usually love picking their brains and delivering high-quality results.
7. Make Your Theme Cross-browser Compatible
Not all your shoppers will be using the same browser or device to explore your store, so take care of that by making the theme that works well in them all.
Magento 2 by default supports:
- Internet Explorer 11 or later, Microsoft Edge, latest–1,
- Firefox latest, latest–1 (any operating system),
- Chrome latest, latest–1 (any operating system)
- Safari latest, latest–1 (Mac OS)
- Safari Mobile for iPad 2, iPad Mini, iPad with Retina Display (iOS 7 or later), for desktop storefront
- Safari Mobile for iPhone 4 or later; iOS 7 or later, for mobile storefront
- Chrome for mobile latest–1 (Android 4 or later) for mobile storefront
Note: some features, like “space-evenly” value (for CSS justify-content) or certain JavaScript APIs (click for the list) may not be compatible with all browsers so double-check them before implementing them into the theme.
Installing & Changing Themes on Magento
Now let's go over the specific steps that you need to take if you plan to install a stock or custom theme on Magento, as well as what to do if you want to change it.
How to Install a Stock Magento Theme
Learn how to install it in Magento 2 in a few easy steps:
- Download the theme.
- Extract the archive. You will get app/ and pub/ folders.
- Upload everything from the archive to the root directory of your store.
- Connect your store via SSH and run the php bin/magento setup:upgrade command.
- Run the following command:
php bin/magento setup:static-content:deployThe first command upgrades the setup and the second one deploys the static content. After that, you can change the store theme.And here is a guide for theme installation in Magento 1:
- Download the theme.
- Go to the admin panel.
- From there, proceed to “System → Cache Management” and disable caches.
- Go to System → Magento Connect → Magento Connect Manager.
- In “Direct package file upload”, click on “Browse” and find the installation package of your theme.
- Once you found the package, click “Upload”.
- Wait for the theme to be installed.
- Return to the admin panel and go to “System → Configuration → Design”.
- In “Design”, click on “Themes” and enter the name of the theme in the “Default” field.
- Click on the “Save Config” button in the upper right corner.
- Enable cache.
How to Install a Custom Magento Theme
The process of installing a custom theme for Magento 1 and 2 is the same. Those developers who work on the theme usually install it. In case they can’t do it for some reason, here is what you should do:
- Disable caches.
- Extract the archive. You will get app/ and skin/ (Magento 1) or app/ and pub/ (Magento 2) folders.
- Upload them to the root directory.
- Change the theme in the admin panel (System → Configuration → Design).
- Enable cache.
How to Change Your Magento Theme
Once your custom theme is ready and declared to Magento (or installed), you will need to change your default theme to a new one.
The process of changing a theme in Magento 1.9 vs Magento 2 is slightly different.
In Magento 1.9, go to “Admin panel” → “System” → “Configuration”.From the dropdown on the left, go to “General” → “Design”. You will see a drop-down in the upper left corner, which says “Current Configuration Scope”. Click on it and choose the desired theme:
In Magento 2, to change the theme go to the admin panel. On the left side, choose “Content” → “Configuration” → “Design”. You will see a list of the websites that you manage. Choose the one that needs a theme change and click “Edit”:
You will see a Design Theme drop-down. From there, choose the desired theme and click “Save Config”:
A tip: for faster and easier theme development, use Bootstrap or a similar CSS framework. Magento Bootstrap theme is usually responsive, UX-friendly, and easy to customize and manage. The only flaw is: such themes are often instantly recognizable. In most cases, when asking “What Magento theme is that?”, you can confidently answer that it’s a Bootstrap one. However, remember that the theme appearance depends on the level of customization that you apply.
Magento Performance Checklist: Free Download
Ensure buttons, links, and images respond to clicks instantly and pages load fast. Follow our instructions from the checklist.
Final Word
Judging from our experience, custom themes bring e-commerce stores a 4.8% increase in conversions in comparison with the ready themes.
Of course, if you own a relatively small store and your main focus is growth and audience expansion, you can buy a ready theme and invest time and resources into self-promotion.
But if you’ve been in the business for quite some time, have a loyal audience, and established brand identity, the development of a custom theme would contribute nicely to your further growth and sales.
At Onilab, we have successfully helped numerous companies boost their sales by developing a unique custom theme. We understand how customer experience impacts conversions so we always make sure our themes are fast, efficient, and engaging.
Join the family and opt for professional to get a custom theme designed for your store!
