Introduction to Magento Theme Design
For an eCommerce business, a website is more than just an online catalog — it’s a reflection of the business itself.
A website is one of the most significant touchpoints in a customer’s interaction with an online business.
Having an attractive, well-thought-out, and aesthetically designed website can help make a perfect first impression and instill trust in a customer’s mind.
There are hundreds of pre-made Magento themes available for purchase online today. Their price is usually quite reasonable, often lower than $100, making them a more convenient alternative to building a custom theme yourselves.
While they might do the trick for new stores starting on a small budget, for those who’ve been in business for a while, a custom-designed theme will work wonders.
Commercially available themes often appear more pleasing to store owners than their customers. The main intention behind such themes is to sell the theme to store owners by packing them chock-full of functionality that most store owners find appealing but usually never require or use.
While a fancy design and over-the-top functionality may make the theme look attractive, in reality, it often translates into poor performance for any store that ends up using it.
To make things worse, hundreds of stores worldwide could be using the same design, so being unique in a crowded industry becomes even more difficult.
The importance and benefits of a custom-built theme are often understated. Achieving a custom theme design is possible in two ways — by building on Magento’s Blank theme or designing one from scratch.
In this article, we’ll go over best practices to keep in mind for those looking to create a unique Magento theme design and some honorable mentions as well from a developmental point of view.
Design tips
Understand Magento & its levels of customization
Familiarizing yourself with how theme inheritance, layouts, templates, and styles work in Magento will make designing a theme a lot easier.
Being an extremely versatile platform, Magento provides three levels of customizability to enable store owners and developers to customize any store’s design and functionality.
The first level of customization is possible by adjusting CSS files for minor cosmetic styling, or LESS (Leaner Style Sheets) and XML (Extensible Markup Language) for more advanced styling.
In addition to this, you can also tweak the PHTML template files to modify the HTML generated by the website’s modules.
The second moderately advanced customization level is possible by making structural changes to a website via the Magento layout engine.
For those with PHP development skills, the final and most advanced customization level is possible by developing extensions to enhance the functionality provided by Magento.
Magento’s Frontend Developer Guide is a great place to start for web designers unfamiliar with Magento theme design practices.
Master the tools required
Although PHP development skills do help, you can design a Magento theme without it. When it comes to building a Magento store theme, some prerequisite skills demand moderate to advanced familiarity.
There’s no substitute for knowing CSS, HTML, PHTML, LESS, XML, and JavaScript when it comes to Magento.
These are at the core of the design of every Magento theme, and without these, there’s a tough chance you’d be able to create a truly impressive website.
Beyond these, knowing the basics of PHP will help make things a whole lot easier when designing a Magento website.
Having a strong understanding of responsive web design is also essential to designing themes or tweaking ready-made themes with a mobile-first approach.
Design with the user in mind
When designing a theme, understanding the audience it’s meant to cater to is essential. Without knowing who you’ll be selling to, it’s impossible to understand what the audience would like.
After all, the primary goal of an attractive design is to achieve conversions, and over-the-top designs can be distracting for specific audiences.
Younger audiences may find things like sliders, carousels, and other interactive elements engaging. However, for a B2B website, they can be bothersome and distracting, hurting the target audience’s online shopping experience.
Using appealing colors to highlight key elements, clear call-to-actions, and legible and straightforward text will help in ensuring every customer has a pleasant experience at all times.
A store must make it easy for customers to see and access the products on sale, understand their purpose and benefits, and, most importantly, take action whenever they’re ready.
By achieving this, customers will find the overall shopping experience less stressful and will be more likely to return.
Keep it responsive
Magento is responsive out of the box thanks to the default Magento Blank and Luma themes that achieve this using CSS and JavaScript.
But when you’re customizing a premade theme or building one from scratch, you need to make sure you design with a responsive approach at all times.
There’s no point in having a website that looks great on a desktop but is unable to adapt to a mobile device making it hard for a smartphone user to view content and navigate the website.
To utilize Magento’s responsive approaches in their Blank and Luma themes, you should declare either one of them as the parent theme to your custom child theme.
Using Magento’s default themes allows you to inherit view configurations, layouts, and templates, for your custom theme from the parent one.
You can apply mobile-specific styling using styles-m.less for media queries targeting specific screen widths. And when required, even override default breakpoints in your custom theme directory by adding variables for @screen__xl, and @screen__lg, and so on in the _variables. less file to adjust styling based on the device’s screen size.
Stay on brand
Store owners and designers are often so focused on making their website design unique or elements responsive that their focus shifts away from the business and the products that it sells.
A website should always reflect the business’s branding to breed familiarity, make it stand out from its competition, and, most importantly, inspire loyalty in their customer’s minds.
Researchers have found that almost 90% of the first impressions a product makes are influenced by the colors alone.
Selecting the right colors for your branding and implementing them consistently throughout the website, products, and every touchpoint with the customer will help maintain consistency and foster loyalty.
Using basic CSS, you can easily set or change colors, fonts, and media across your store, helping maintain consistency and making your website aesthetically pleasing.
Further visit: 8 Best Practices to Protect Magento Login
Development tips
While the best practices mentioned so far have focused on the design side of creating a stunning Magento theme, here are some honorable mentions of best practices from the development side when creating a Magento theme.
Extend instead of overriding
When inheriting a style from one of the defaults Magento themes, consider extending the styles by putting your customizations in _extend.less or _theme.less files instead of overriding a .less file from the parent theme.
Use layouts instead of templates
When trying to add, remove, or relocate a new container or block, it’s always better to use an .xml layout file to do it instead of overriding a .phtml template.
Keep it translatable
It’s good practice to wrap text used inside your Magento templates within the translate function to keep them translatable.
By keeping text translatable, if your store needs to go global in the future, you can easily localize it for multiple locations and languages without having to redo everything from scratch.
Add styling inside the extension
If you need to add styling to a custom extension, it’s always best to do it from inside the extension itself instead of adding it to the theme design. Styling inside and extension helps avoid the style from being loaded when the extension isn’t called.
Follow coding standards
Following coding standards helps keep things consistent and straightforward. Following Magento’s coding standards while designing a Magento theme will help keep the code consistent and easy to maintain.
Conclusion
Designing a good-looking Magento theme for your store is far from impossible. For those limited by skills, time, or budget, an off-the-shelf theme will be suitable.
They’re affordable and easy to use, especially when you’re starting from scratch and need to get off the ground quickly.
It’s worth noting, however, that this convenience comes at the cost of performance and uniqueness.
For established businesses, approaching a Magento design company for either a Magento Blank theme-based custom design or a fully bespoke theme will be the way to go.
The exclusivity of a custom Magento design will help your brand stand out in the crowd. Beyond appearances, custom-built themes give you microscopic control over functionality and are far superior in performance than off-the-shelf themes.
It’s also possible to design themes built from scratch using non-standard layouts exclusive to your store.
Custom-designed themes are often some of the best-performing ones as their design and functionality are implemented based on the store’s requirements, and there’s minimal bloat slowing the store down.
Those possessing the skills and resources required to build a stunning Magento theme should understand the platform, master the tools needed, and follow the best practices mentioned in this article to design an attractive theme.
Author: Jan Guardian
Jan Guardian is the Chief Business Development Officer at Staylime, a Magento development company headquartered in Redwood City, California.
He is responsible for developing and leading the sales and digital marketing strategies of the company. Jan is passionate about sales, marketing, and emerging technologies.
