Fierce competition is the state that defines the current eCommerce industry, therefore creating a storefront that is unique and stands out is crucial for your company’s success. To achieve that, your online store needs to function perfectly on the backend and at the same time, create a unique customer experience on the frontend. While the frontend and backend might be independent – like in a headless approach, or not, it is utterly important to make them work together seamlessly to offer the best user experience and performance.

Leaving aside architecture and functionalities, which is a very complex field, in this blog article we would like to focus more on the client side, on the way that visual elements of an online store are built and moreover, what choices do developers have when it comes to building a unique Magento storefront.

If you want to find out more about our eCommerce projects, we are here to help.

Please contact us

A unique user experience is not achieved only by designing a good looking website. Think about a time when you wanted to make a purchase and the shopping cart retrieved an error message. The chance is, this either affected your perception about the store, or made you abandon your cart altogether. 

This is precisely the reason why frontend development must follow certain pillars of good practice. Beyond achieving these objectives, storefronts must also work seamlessly with everything that happens behind the scenes, where the backend holds all the data, like products, prices, order details, customer information, and transfers it to and from the frontend. And as eCommerce grows in complexity and the number of touchpoints diversifies, this seamless collaboration needs to happen on any touchpoint, may it be desktop website, mobile website, mobile app or social media stores.

The pillars of frontend eCommerce

Of course, from developers’ point of view, the concept of good practices evolve around coding guidelines, like neatness and cleanliness in the code, or having a modular structure, with Java Script, HTML & CSS being completely decoupled from each other.

But, beyond all these, the frontend needs to create the best possible user experience, put the focus on content, improve performance and strengthen SEO. That’s why when working on the frontend part of an eCommerce store, there are three key components that need to be considered, and these need to be applied to all digital sales channels.

UX

User Experience, or UX, encompasses everything that focuses on how a customer interacts with your online shop – if it is easy to use, if it adds value, and more importantly, if it works seamlessly. However, to turn a page viewer into a customer your shop needs to do more than that – it needs to create that memorable experience. That’s why the focus should be placed on both eliminating UX errors (like unresponsive or slow pages), and at the same time, on ways to bring forward that unique shopping experience. 

An efficient product filter, an easy navigation, or a clean check-out design with no distractions to deter the customer from completing their purchase, a clear payment process with address autocomplete as well as multiple payment options, are seen as factors that can enhance your website experience and dramatically increase conversion rates.

Performance

Performance is closely tied to UX, since any slow downs, unresponsive pages, errors on the website, popups or buttons shifting at the wrong time on the page, will have a negative impact on your user experience. In fact, Google thinks they are so tied together, that last year, it introduced a new organic ranking factor – page experience – that brings in the concept of judging websites by what a user feels when interacting with a page.

You can find some useful insights into Core Web Vitals in our article…

There are many elements that, if not optimized, can slow down your website, creating a poor user experience. Factors like Slow server response times, JavaScript and CSS code, slow-loading resources like images and other creatives, or issues on client-side rendering, need to be addressed when this happens. The first five seconds of page load time have the highest impact on conversion rates, and according to studies, conversion rates decrease by approximately 4% with every additional second of load time. 

Design

The way your website looks truly matters to shoppers. Make your clients browse through an online store with a clean layout, beautiful images, and the chances are it won’t take long until you’ve turned them into loyal customers. At the same time a website should be user-friendly and responsive, and the shopping journey should be seamless from a page to another. Calls to action and action buttons should be present and facilitate the next steps of the customer journey. Maintaining a consistent brand and design across all your selling touchpoints will score high points for making your brand truly unique and recognizable.

We always love to talk about eCommerce so if you need information about our products and services, we are here to help.

Please contact us

Frontend Magento Technologies

When it comes to Magento storefronts, the options for merchants are simple: they could either go for a ready-made template, or get a custom-developed and unique new storefront.

The first is of course cheaper, and it tends to go down well with small companies, which don’t have big budgets, but want a solid platform for their eCommerce store. 

The second comes with higher costs, because it involves extensive development work and that’s why it is the first choice for enterprises that fall in the medium to big category. 

This is where things start to get extremely interesting because with Magento being so flexible, the possibilities are quite a few. We have the Magento native theme, which can be customized simply to reflect the branding of the customer. There is also the Hyvä theme, which created quite a stir when it was launched, and there is also the option to develop a brand new custom Magento theme to meet the clients’ requirements. These fall somehow in the lower part in terms of costs involved. 

And there is headless Magento development – more costly as it involves in-depth knowledge, over specialized and bigger teams, and a longer time to market.

The headless architecture uses the Magento backend as a Content Management System while the frontend is handled through various platforms like PWAs (like ScandiPWA, FrontCommerce, or SimiPWA) or frameworks for headless eCommerce, like Vue Storefront.

Magento theme, Hyvä, Vue Storefront, or Magento PWA?

This poses no easy answer, at least not if you are asking it as a general question. Ask a JavaScript developer and he/she will say it is completely natural to go the PWA-route, while some Magento developers with main focus on PHP will find PWA hard to work on. That’s the reason why when customers come with the request for an end product, the implementation differs from agency to agency, and it’s based on the resources they have and the products they work with.

Magento’s native theme

Out-of-the-box, Magento provides two design themes: Luma, as a demonstration theme, and Blank as a basis for custom theme creation. The Luma theme can be used for a live store as it is, but if the design needs to be changed, it is recommended to create a new theme, not to change the theme files, because the changes can be overwritten during Magento upgrades. Magento implemented a theme inheritance concept, which allows to change only certain theme files, and inherit other files from a parent theme. 

Although it was the go-to option for a long time before others appeared (and still is), Magento’s native theme has always been associated with lack of speed and performance, because of the use of extra JavaScript which tends to cause slower page load times. That’s why projects following this path need to have experienced frontend developers assigned to them to optimize the storefront in the best way possible. 

Hyvä

When Hyvä was released, it was like a breath of fresh air. Hyvä cleared out hundreds of JavaScript files and unnecessary CSS, and replaced each with one streamlined framework using TailwindCSS and AlpineJS. 

There is plenty left of the classic Magento frontend, so basically, what Hyvä did was that it kept everything that was considered to be great, like layout.xml and got rid of everything  that wasn’t, like Knockout/Require/jQuery. This allowed them to reduce complexity and improve performance and developer experience, with a very easy learning curve for the ones already accustomed with Magento’s native storefront.

Not only that, but Hyvä comes as an alternative to headless PWAs, which are more problematic to implement due to the requirement of in-depth technical knowledge, longer time to market and higher financial resources, making it practically inaccessible to the majority of merchants. 

Hyvä presents some limitations, so that if you are thinking of implementing it, here is what you need to know about. 

First of all, Hyvä recently released their own checkout, which is React based. One thing to mention is that it is not a drop-in replacement for the default Magento checkout, it only provides a base on which users can develop their own custom checkout for their site. There might be some gateway limitations to overcome, so this might need some additional development work. But you can always go with the Luma checkout instead, the Magento standard checkout. 

Second, when using modules from third-party services, there might be additional development work needed to make everything work smoothly.

Third, but this is more a benefit than a limitation – Hyvä works only with newer versions of Magento.

The headless frontend approach

In recent years, headless eCommerce has gained massive traction in the development process for complex online shops. This approach allows two separated layers – backend and frontend – to work independently and communicate through APIs. In a headless architecture, the backend eCommerce functionality still remains intact and works smoothly, while personalized customer experiences can be created on the frontend. Moreover, it offers the flexibility to achieve this on all devices.

There are still many purely monolithic ecommerce platforms, but while they make it easy for merchants to build online stores, if they don’t come with complex features out of the box, they simply don’t have the capacity to adapt to modern eCommerce with enhancements or other customizations. 

Having the flexibility to choose any technology to build your custom front-end experience for all touchpoints is one of the many benefits that running a headless system might bring. The biggest convenience however is the fact that you can upgrade your storefront without touching the backend, as the changes applied to the frontend code are deployed independently from the backend. 

In theory, all seems brilliant, but in practice, there are still some disadvantages that the headless approach brings. The biggest one is the fact that to build and manage a headless website requires in-depth technical knowledge. 

In Magento’s case for example, being a traditionally monolithic structure, building a headless frontend might pose real struggles because there aren’t many developers with that in-depth technical knowledge, the community does not cover this subject widely, the available modules are not compatible, hence the fact that building and managing a headless theme are costly and requires a long time to market.

But what Magento has done brilliantly is that it created this sort of hybrid approach. Traditionally, the backend and the frontend stick closely with each other and many functionalities are available out of the box, integrated in the Magento core. Everything works in a solid block, meaning that there is only a frontend design for a respective backend, and this design is made to be responsive on various screen sizes to optimize UI & UX. 

At the same time, there is an endless possibility to go the headless route and use the Magento backend as a Content Management System, and integrate it with alternative third-party frontend platforms, through API, if clients choose to do so. This means that merchants can integrate with multiple technologies and choose the frontend experience that makes the most sense for your business

The benefits of course are immense. Because the layers are decoupled, users can make changes to the frontend while avoiding costly backend development, resulting in lower costs. At the same time, the upgrades are safer. Not to mention the fact that you can choose the frontend platform that works best for you, as well as the fact that through powerful APIs connections the two layers (backend and frontend) work in synergy to deliver a consistent experience on all sales points.

Magento PWA

PWAs are growing in popularity because of the impeccable user experience they offer. They are simple to navigate, they don’t have to be downloaded on the user’s device, so they take zero storage space, but most importantly, they can be accessed offline too.

PWA Studio for Magento 2 is a toolkit designed for helping developers build progressive web applications on the Magento 2 platform. The tool contains out-of-the-box solutions that can be used during app development. What you have to understand is that the PWA Studio is not monolithic and the available solutions of the Adobe PWA Studio for Magento can be used partially. The app’s architecture and framework are out-of-the-box, the application builder is already configured, there is a great number of ready-made site elements that can be used during development, as they are or modified and customized according to the needs. 

Going the PWA route of course has lots of advantages but you need to be aware of the fact that the process is not smooth and easy. First of all, due to code excessiveness, developers need to spend a lot of time cutting out code that is not relevant to their app. Moreover, the code is known to be complicated, requiring in-depth knowledge.

Vue Storefront

Vue Strorefront is a headless eCommerce framework that creates online shops by connecting to an eCommerce platform and many 3rd party services like a CMS, payment systems, or search functions. The framework had an extensive development time, and only a few days ago, the official release for the integration with Magento2 was finally announced. 

In a nutshell, Vue Storefront is based on NuxtJS, which is the biggest VueJS framework, with a vast library of ready-to-use modules, and an active community. Even if it wasn’t created with eCommerce in mind, NuxtJS is flexible enough to make it e-commerce ready with just a few plugins and modules. Nuxt.js handles most of the front-end work and Server Side Rendering, while Vue Storefront adds the e-commerce specific bits and integrations to various platforms. 

The framework comes with a ready-to-use e-commerce theme, which consists of components from the Storefront UI, an independent, Vue.js-based library of UI components for developers, designers, and agencies striving to build fabulous storefronts. StorefrontUI is 100% customizable, open-source, highly responsive, and answers all the requests for modern eCommerce.

Vue Storefront will definitely appeal to Magento novices or the ones who find it troublesome adapting to both Hyvä and Luma, but with a lot of experience with Vue. Moreover, experienced JavaScript developers don’t have issues with Vue-driven e-commerce, so we believe this is where Vue Storefront will find its niche.

Conclusions

With the new Vue Storefront integration launched, the choices for Magento frontend developers increased considerably. Magento has always been in the forefront in terms of eCommerce capabilities, but issues like increased speed, SEO enhancements, or user experience concern the minds of frontend developers  tirelessly.

That’s why the news of this latest frontend solution was received with big ovations. None of the other existing options, if being used alone, fitted all projects. Also, with so much scarcity in finding good Magento developers , we see the best possible situation when there is one Magento backend and multiple frontends running on different technologies, so that each agency will pick the suitable frontend, based on the staff capabilities it has.

If you want to know more about our list of services at Clever++, please visit our website.

See our services