April 17, 2018
Themes are the basis for creating a great looking website. Quality themes help developers ensure consistency of look and feel with such things as font types and sizes, color scheme, and other design elements that affect the aesthetics of your site. A theme helps to reflect your identity through your site and helps to improve your customer's experience.
In a recent discussion with Dmitry Shatkov, Chief Content Officer of Aheadworks, he shared some key learnings with us about how Aheadworks developed their Ultimate Theme, which was used as the foundation for building the Magento Marketplace launched in July 2017.
Magento: What are the most important things to keep in mind when developing a Theme for Magento?
DS: From a technical point of view, we found that following all the required Magento 2 standards and not modifying any files of the default Magento themes is the best approach. This is probably the most important thing that we always start with. Secondly, with our Ultimate Theme, we distribute it both as a set of archived files and a Composer package via Magento Marketplace. So, customers can choose the most appropriate way to install and update the product based on their implementation of Magento.
Magento: What are the business drivers behind the features and capabilities of a good Theme?
DS: All eCommerce stores need to be convenient and attractive to any online visitor. This foundation determines the logic of both the technological and business development of any theme. Our Theme is focused on three key requirements:
Easy and Convenient Shopping: Customers feel comfortable looking for products from the provided header menu, or dedicated product banners. The shopping filters allow customers to find the products they need easily and sort them according to their preferences.
Responsive Design: The theme is fully responsive and makes shopping convenient on any device. The quality of pages is adjusted to Retina screens making the store look great on desktops and smartphones. Mobile users can easily navigate and purchase products due to the full-gesture support and ad-hoc layouts with always visible product filters and shopping cart buttons. The responsive behavior of the theme is implemented with the help of CSS3 media queries, which is a flexible cross-browser way to provide accurate content scaling.
Customization Ready: To make any store unique and align with brand designs, you can easily implement the original vision with the provided LESS styles, Magento 2 widgets, and CMS blocks. Two default home pages initially meant for fashion and electronics stores make it easy to customize the theme for multiple storefronts.
Magento: How does your Theme integrate with Magento?
DS: Currently, the theme affects store frontend only. However, it is bundled with the extension, that allows changing display options directly from the Magento backend without coding required.
The Ultimate theme inherits directly from Luma but includes a lot of layout, template, and other enhancements providing its own vision of the Magento frontend and the shopping process.
We found that using the provided LESS styles of the theme guarantee several distinct advantages:
Cleaner structure with nesting
Use of variables
Use of classes
Operations and mixins in use
LESS is especially useful for customizations allowing you to define a set of readable variables (e.g. the color of all headers) and change the entire theme look easily instead of finding and replacing particular values (e.g. colors) in the text editor.
Magento: Thanks Dmitry for talking with us and sharing these key learnings.
DS: It was my pleasure. The more themes that are available on Marketplace the better off for all Magento customers.
Interested in promoting your Theme on Marketplace? Click here to submit.