This year, we've already seen a number of TemplateMonster's hot releases. Modicate, MonsterAdmin, Landing page templates with builders ...what's next on the list? Our new release was not long in coming and today we are glad to introduce you to F2, our first Magento template powered by Magento 2 framework, which you can download at no cost. What makes it so awesome? Let's look inside!
Let's find out what Magento 2 framework brings us. As it's expected, the new framework is more powerful and feature-rich than its predecessors, and built with clean and modern code base. Let's highlight its basic functionality.
- Magento 2 comes with full page cashing, which means that all of your site's pages will be built in a static file system, meaning that the average page load times will be reduced to some mere 1-2 seconds (compared to 5-10 seconds for non-cashed files).
- Magento 2 checkout became more streamlined. Guest checkout is assumed. For the existing customers, there is an option to log out without having to remember their passwords. On top of that, the option to select credit card type was removed. Now the system figures it out automatically, based on the first digit that you enter (e.g. 3 = Amex, 4 = Visa, 5 = MasterCard, etc.).
- New file structure. With Magento 2, you will get everything placed under the "app" structure, except for config.xml. In such a way, it gets easier to access all templates, layouts, js and css files. With Magento 2, web developers gain more opportunities in terms of customization, without the need to change the site's functionality.
- Multi-shopping option is available, reduced table locking. This feature will be of great use to the owners of large eCommerce stores. Now, there will be no table locking when 100 or more people are trying to place an order on your website at the same time. Providing the users with an opportunity to compare and review multiple products, Magento 2 allows you to experience multi-shopping within a single transaction. With its new update, the platform has become the leading provider of open multichannel innovation.
- Easier editing. Magento 2 includes Visual Design Editor, which allows you to modify containers and blocks without any special coding skills.
Overall, Magento 2 includes a number of new and advanced technologies like HTML5, CSS3, Apache 2.2, Magento performance toolkit, Magento UI Library, PHP 5.5.x, Magento performance toolkit, CSS Pre-processor, MySQL5.6, PSR Compliance, etc. If you wish to learn more about all Magento 2 enhancements, welcome to the developers page.
Now, let's get back to the main objective of this post and take a closer look at TemplateMonster's Magento 2 freebie, and compare it with the default Magento 2 theme.
F2 - Free Magento 2 Template Compared to Luma
It has become our good tradition to present the release of new or updated products with a freebie. Magento 2 is no exception. Featuring a trendy layout, it is no less powerful from the inside. But let's put first things first.
In order to help you choose the best option that will meet your business requirements, let's compare the default Magento 2 theme called Luma and TemplateMosnter's freebie - F2, highlight their common features, and the options that vary the two.
Home Page Design
Luma is a default Magemto 2 theme, that has adopted all of the features of the updated platform. Clean presentation of content and tile-based structure are among the defining factors making Luma different from Madison Island (Magento 1 default template). Tiles were also featured in the F2 theme, but in a somewhat different form. Here is what the layout of Luma default theme looks like.
Tile-based banners of metro style occupy most part of the front page. Here the users do not deal with sliders or galleries.
When it comes to F2, the situation is a bit different. Instead of a large hero image, the header was enhanced with a usable full-width carousel slider, which allows you to bring emphasis on your store's hot offers. Below it, you will find a set of banners organized into a usable masonry flat style.
In terms of readability, F2 is more user-friendly. While texts written on Luma's tiles look good on desktops, the situation is different on touch screens. F2, in its turn, makes use of large, dramatic typography, which scales perfectly to any screen size.
In order not to overwhelm the users with multiple product banners, in F2 the latter were divided with the blocks of 'New' and 'Special' products, which were organized into functional carousel product listing. Each time a user wants to see more options from each category, he/she just needs to click an arrow on the front page, without the need to navigate anywhere else.
When it comes to Luma, here you will find one block of 'Hot Sellers' organized into a grid based view. A slider option was not included.
Luma category pages feature grid- or list-based view options. Organized in a clean and concise manner, the preview of each item includes star ratings, color and size variations, as well as CTAs that are revealed on the mouse-over. There is also an option to choose the amount of items that the users want to be displayed on page (9, 15 or 30). The default width of the page is 980px, which is 300px more than the width of the Magento 1 default theme, but still not as big as F2.
F2 is 2048px in width. In addition to the options to display items in a grid or list view, as well as set the number of items that are displayed on the page (4, 8 or 16), you will have an option to filter all products by name and price. The product previews are bigger compared to Luma, which allows the users to take a closer look at each item on the category page. Size and color variations, star ratings, pricing details and CTAs that appear on hover were included as well.
The product pages of both Luma and F2 are very neat and clean. Product images are big enough, so the users should have no difficulties with identifying peculiarities of each item. Each product is demonstrated by means of several images, and in different color variations. Both templates include clearly defined blocks with details, more information and reviews below the product image. Name, star ratings, pricing, size and color options, as well as a set of CTAs are placed to the right of the product image.
Though both templates have certain common features on the product pages, there are still some options that make them different. For example, take a look at a block with 'Related Products' from F2. Organized into a carousel product list, it gives the users more options that they can choose from. In addition, there is also a block with products that 'the users might also like', also presented by means of a carousel product list. In that way, when making a purchase people are introduced to a great variety of items that are somehow related to the selected item.
Luma features a neatly presently product with a set of images and product details, as well as a block of related items organized into a grid-based view. Carousel product listing option was not included, as well as the block of products that 'the users might also like'.
Summing it up, it's worthy to be mentioned that F2 boasts a custom page design, which was built as per the latest web trends. Neat and elegant look of the front page captivates the users' attention with its style and attention to details. Clear content hierarchy achieved by means of fonts of different sizes and colors brings a well-balanced and easy-to-follow look to the theme. Looking somewhat grunge on the front page, the template features clean and concise product pages, providing the users with a seamless browsing experience.
A Closer Look at the F2 Theme Features
Now, let's consider the functionality that makes F2 a theme worthy of your attention. In addition to being fully responsive and crossbrowser compatible, and coming with a set of layered PSD files, the template was loaded a host of other functionality that put it is a row with premium options. Let's begin with its navigation.
With the purpose to help you boost conversions and provide the users with a quick access to all the category pages, the theme's header was made fixed to the top. In addition, the shopping cart, live search, the users' profile and settings were also organized into a sticky right sidebar.
The dropdown menu makes the layout clean and easy-to-follow. While placing the most important menu items above the fold, you can make the key information more visible to the audience.
Sale, New Product Types
I have already mentioned this earlier, when comparing the design of F2 to Lumo. Still, I think that it's worth paying special attention to these elements once again. Featured products horizontal carousel add more interactivity and functionality to the page, letting you to showcase more than 4 products at a time. On top of that, for the users' convenience, each item is supplied with a 'New' or 'Sale' badge.
Added to the product pages, the functionality provides the users with an opportunity to preview a certain item in different color variations on the site. Color, fabric and size - you can opt for literally any attribute that you have on your mind.
Featured in the theme's header, the responsive image slider is fully configurable. Add captions, manage its transition effects, the number of sliders, CTAs, and other elements to create a more remarkable presentation of your special offers.
That's it. Go ahead and check out the theme's live demo. And do not forget to share your thoughts about our new theme below this post. What theme do you like more - F2 or Luma? Why? Your opinion always matters!