How to implement Hyva into an existing store?
Author Image

By Piotr

November 22, 2023

How can you strategically implement Hyva into your established store for maximum business impact?

An increasing number of merchants are recognizing the advantages of implementing Hyva into their stores. Hyva-powered stores are characterized by speed, streamlined development processes and reduced development costs compared to conventional Magento themes. Additionally, compatibility issues with extensions have become almost non-existent. One thing is certain: Hyva has set new standards in terms of speed and performance for Adobe Commerce-based stores. Just a few months ago, retailers were asking themselves, "Should we implement Hyva?"

Today, the question is more like, "How should we implement Hyva?"

However, it's essential to bear in mind that introducing an entirely new design for the entire website can still entail a significant cost. Therefore, we often receive inquiries about whether it's possible to implement Hyva only on specific subpages. Since Hyva has a completely new frontend approach compared to Luma, it's not possible to combine these two solutions on a single page. Nevertheless, you can use different themes for different types of pages. This means that category pages, product pages and the homepage can be based on Hyva, while the rest of the pages will continue to use Luma as before. Implementing Hyva in this way can be described as incremental implementation of Hyva into an existing store. In this article we will address the most important aspects related to the incremental implementation of Hyva.

How do I begin the step-by-step integration of Hyva into my existing setup?

The most effective approach is to start the incremental implementation from the page where performance improvement is most crucial for you and your customers. Typically, it's best to begin with a page that users spend the most time on and choose a page type that is the most common. Often, this page is a specific product page. In many cases, product pages are complex and may contain external modules that require time for implementation.

Our recent implementation project prioritized the enhancement of category pages, recognizing them as significant hubs where users extensively search for products of interest. However, in cases where a product page lacks complexity and external modules, commencing the journey directly from the product page is a viable option for business-oriented incremental implementation.

What are the key considerations in business when engaging in incremental theme development?

Incremental development of a new theme involves the fact that there will definitely be shared components between the new Hyva-based theme and the one based on Luma. These shared elements include, for example, the footer, the header and CMS blocks. This means that the same components are available in both themes simultaneously, and you need to maintain two versions of the same element. Fortunately, from our experience, we can say that these elements don't change very frequently during a product's lifecycle, and it's unlikely that major modifications will be needed in recurring elements. However, it's essential to keep this in mind when adopting the incremental approach to implementing Hyva. If you are in the midst of intensive work on the menu/header or footer, incremental implementation may not be the best choice for you.

Does implementing Hyva immediately give us 100 points in Lighthouse?

Hyva itself, after installation, typically performs well in terms of performance, increasing the chances of your store passing the Core Web Vitals assessment without additional optimization efforts. However, this doesn't mean we can't further optimize Hyva. When implementing Hyva into an existing store, you may often have modules that need to be adapted to work with Hyva and be optimized. While publicly available extensions are likely to be compatible, custom code developed for your store may require tailored adjustments.

In many stores, third-party modules are commonly used and are essential for business operations. It's not uncommon to encounter situations where installed extensions significantly slow down the store, such as the presence of numerous tracking pixels. Initiating the development of a new theme provides a strategic opportunity to systematically address and optimize these performance-related challenges.

Here's a comparative analysis showcasing the before-and-after performance of a category page from one of our Incremental Hyva development projects:

Untitled design.png
Luma versus Hyva desktop.png
Luma versus Hyva mobile

How quickly will new, well-performing, Hyva-based pages be available in production?

It is difficult to provide a definitive answer to this question as it depends on the functionality offered by your store. The starting point for implementing Hyva can also be crucial. It is known that in the initial phases of work, we need to prepare the footer and the header. Afterward we can work on the content of specific pages and prepare the necessary elements. Within a few days or weeks, the first pages may be available in a production version for users. Furthermore, subsequent stages will progress more quickly because reusable elements will already be prepared, and newly built elements can make use of previously developed functionalities.

Should I implement Hyva incrementally or all at once?

There is no one right answer to this question. If you want to see the results of your work as quickly as possible, or if one of the subpages is a top priority for performance optimization, it's worth considering an iterative approach. The iterative approach also makes sense if you want to spread the costs over time. However, if you are committed to optimizing the entire site or implementing a completely new design, a comprehensive implementation may be more appropriate for you. If you have any doubts, feel free to contact us - we will be happy to help you decide the safest implementation strategy for your business.

Would you like to innovate your ecommerce project with Hatimeria?

Author
Author Image
Piotr
Senior Developer

Piotr, is an experienced Front-end developer. He used to create his first websites with tables, so you can humorously call him "grandpa". ;) He's a caring husband and the father of three kids. Due to frequent travels, their only pets are six stick insects. In his free time, he enjoys reading crime novels or science fiction, and in the evenings, he likes to unwind by watching Marvel Universe.

Read more Piotr's articles

Interested in something else?

Office

Meet the team

Learn more about company and the team.

Join Us

Join us

Make an impact on your career.