THE DEFINITIVE GUIDE TO HYVÄ
In the ever-changing world of online commerce, there is a growing need for comprehensive solutions that go beyond traditional boundaries. Hyva, a leading player in the evolution of Magento frontend, extends its impact beyond just themes. It serves as a versatile toolset, an extension ecosystem, and a supportive community. What sets Hyva apart is its commitment to delivering top-notch performance and user experience, all without the complexity and cost associated with a Progressive Web App (PWA).
Understanding Hyva: An Introduction
At its core, Hyva is a meticulously crafted frontend solution designed specifically for Magento 2—an esteemed open-source e-commerce platform known for its ability to create dynamic online stores. The fundamental purpose of Hyva is evident: to enhance the performance, flexibility, and overall user experience of Magento storefronts by implementing an advanced and innovative frontend framework.
Hyva Architecture
- Hyva Themes
Hyva brings a groundbreaking approach to theming in Magento, ushering in a new era. Hyva themes adopt a modular and component-based structure, breaking free from traditional theming constraints. This enables developers to create and manage distinct components for specific parts of the storefront, offering unmatched customization and extensibility. This marks the end of monolithic theming, replaced by a modular tapestry that ensures easy maintenance and seamless updates.
- Optimizing Performance
Hyva’s dedication to optimizing performance is evident in its integration of cutting-edge technologies, particularly GraphQL and React. GraphQL, known for efficient data retrieval, combines seamlessly with React, a JavaScript library for creating dynamic user interfaces. The outcome is a significant reduction in page load times, a crucial factor in shaping a smooth and hassle-free shopping experience.
- Integration with PageBuilder
Hyva seamlessly integrates with Magento’s PageBuilder, empowering users to transcend traditional design limitations. This integration simplifies the creation of visually appealing and responsive pages without the need for intricate coding. Merchants and content creators gain access to a powerful toolset, enabling them to craft engaging pages that strike the perfect balance between design aesthetics and functional efficiency.
Embarking on the Hyva Journey
1. Installation
The journey with Hyva starts with an effortless installation process. Utilizing the official documentation as a guide, merchants and developers navigate through the detailed steps of integration and configuration. This comprehensive guide ensures a smooth onboarding experience, accommodating users with varying technical expertise.
2. Configuration
Hyva offers an extensive range of configuration options, providing merchants with unprecedented control over the visual nuances of their storefronts. From adjusting layout settings to personalizing colors, typography, and other visual elements, Hyva serves as a powerful canvas for businesses to showcase their unique brand identity and enhance the overall user experience.
3. Customization and Flexibility
More than just a solution for merchants, Hyva unfolds as a realm of possibilities for developers. The platform’s strong focus on customization and extensibility empowers developers to create tailored components, styles, and templates. This inherent flexibility positions Hyva as a versatile choice for businesses with diverse needs, ensuring that the storefront can adapt alongside the ever-evolving landscape of e-commerce.
Hyva Themes
The Hyvä theme for Magento signifies a revolutionary shift in frontend development, marked by a significant simplification and a complete reconstruction from the ground up. Positioned as a practical choice for headless/PWA solutions, this theme leverages the native PHP-templating system within Magento, placing a strong emphasis on simplicity throughout its design.
Key Features:
1. From Scratch Development: A Thorough Redesign
Hyvä themes are not adaptations; they are meticulously crafted from the beginning. This approach ensures a custom-made design that seamlessly aligns with the preferences of both developers and merchants.
2. Embracing Simplicity as a Core Principle
Simplicity is at the core of the Hyvä philosophy. By eliminating unnecessary complexities, the theme aims to offer a straightforward and efficient experience for developers working within the Magento platform.
3. Performance Optimization: Less is More
In contrast to a standard Magento theme that loads over 200 JS/CSS resources totaling 1.5 megabytes, Hyvä takes a minimalist approach. It loads only 2 JS/CSS resources, totaling just 0.2 megabytes. This optimization significantly contributes to faster page load times, emphasizing efficiency.
4. Streamlining Development for Enjoyable Experiences
The deliberate reduction in code complexity is a central tenet of the Hyvä theme philosophy. Less code results in a more straightforward and enjoyable development experience. Retaining developer-favored elements like layout.xml, blocks, and viewModels, while discarding less-popular components like RequireJS, Knockout, and UIComponents, makes development more approachable.
5. Farewell to RequireJS, Knockout, UIComponents
Hyvä takes a decisive step by parting ways with components that developers may find cumbersome. Saying goodbye to RequireJS, Knockout, and UIComponents is a strategic move to simplify the development workflow and enhance the overall developer experience.
According to Hyvä customers, they are saving 30 to 50% in average build time compared with the default Luma Theme or PWA solutions. This translates to significant time and cost savings, allowing for a considerable reduction in time-to-market.
In summary, the Hyvä theme for Magento embodies the pursuit of simplicity and efficiency in frontend development. Through a comprehensive redesign, performance optimization, and a deliberate reduction in code complexity, Hyvä themes provide developers with a refreshing and enjoyable alternative while harnessing the inherent capabilities of the Magento platform.
Hyvä Checkout
Addressing the often challenging aspect of checkout for online stores, Hyvä Checkout employs a blend of industry best practices and advanced technology to streamline the process for all stakeholders:
For Shoppers:
Marked by a shopping cart icon, customers can effortlessly navigate a quick, frictionless, and intuitive checkout experience. Tests demonstrate an impressive 13 times faster load time on mobile devices compared to the standard Magento checkout, ensuring a seamless and expedited transaction process.
For Merchants:
Represented by a sales funnel icon, the Hyvä Checkout leads to improved checkout conversion rates, enabling merchants to boost sales without escalating marketing and advertising expenses. The swift return on investment (ROI) underscores the effectiveness of the accelerated checkout experience, resulting in increased profits.
For Developers:
A raster adorned with geometric shapes emphasizes the simplicity of the Hyvä Checkout, earning favor among developers. The Hyvä Checkout significantly expedites the customization of the Magento Checkout, enabling developers to create variations for A/B testing and optimize checkout conversion with unmatched efficiency.
Why Choose Hyvä Checkout:
The checkout process plays a crucial role in determining the success or failure of eCommerce investments, representing the final step that can either convert a visitor into a satisfied customer or result in cart abandonment.
Consider this: an enhanced design alone can lead to a remarkable 35% increase in checkout conversion. Factors such as speed, simplicity of forms, and visibility of the order total upfront are key contributors to cart abandonment. In addressing these frontend issues, Hyvä stands out as the optimal solution.
Hyvä recognizes the pivotal role played by the checkout stage in the overall eCommerce journey. By prioritizing design optimization, simplifying processes, and ensuring transparency in displaying order totals, Hyvä positions itself as the ideal choice to overcome challenges that often lead to cart abandonment. The Hyvä Checkout emerges as a guiding force, steering businesses towards a more successful and conversion-friendly online shopping experience.
Pricing:
One-Time Fee €1000
- One year support + updates included
- Valid for one Magento 2 installation with unlimited domains and storeviews.
- Requires a Hyvä Theme License (for now)
Support and Update Plans
- Subscription – €250 yearly, starting the second year
- All in bundle – €1,000 one-off for five years
In summary, the Hyvä Checkout transforms the online shopping experience by prioritizing speed, simplicity, and optimization. Shoppers enjoy a seamless journey, merchants witness increased conversions, and developers benefit from a streamlined process for customization and optimization. This comprehensive solution turns the typically challenging checkout process into a swift and profitable experience for all stakeholders.
Hyvä Enterprise
Hyva Enterprise stands out as a top-tier solution, ensuring seamless compatibility with all essential storefront features of Adobe Commerce. This includes robust support for the B2B suite and the incorporation of Adobe Sensei add-ons like Live Search and Product Recommendations, all finely tuned to complement Hyva Themes.
Beyond comprehensive feature coverage, Hyva Enterprise brings an array of advantages to the table. Embracing the core principles of Hyva, it guarantees swift performance, alleviates complexities, and minimizes maintenance costs. Moreover, businesses leveraging Hyva Enterprise can experience an expedited time to market, ensuring a quicker and more efficient deployment of their online storefront.
In essence, Hyva Enterprise not only provides an extensive feature set but also champions the overarching benefits of Hyva, enhancing the overall performance, simplicity, and agility of your e-commerce venture on Adobe Commerce.
Add Adobe’s best in class features on top of the Magento Framework with Adobe Commerce features:
Artificial Intelligence
Advanced search, merchandising and personalisation (via Adobe Sensei) to drive conversion and increase order value
More content control
Content staging and preview capabilities to test and launch campaigns with confidence
Increased Customer Lifetime Value
Loyalty & gifting features to improve customer retention
Unlock the B2B experience
Superior B2B capabilities to meet the demands of your buyers. And more: RMA (returns), multiple wishlists, Google Tag Manager
Features and Capabilities of Hyvä Enterprise
- Performance Optimization:
Hyva Enterprise goes beyond mere speed; it ensures rapid loading of your online store. Visualize it as a high-performance vehicle leading the e-commerce Grand Prix. With a turbocharged performance stack, Hyva Enterprise guarantees a user experience that is not only seamless but exceptionally dynamic.
- Intuitive User Interface:
Streamlining the navigation of an online store, Hyva Enterprise introduces a user interface that acts as a guiding hand, simplifying the management of products and categories. Think of it as a reliable assistant for your e-commerce tasks, allowing you to allocate your time to more strategic endeavors.
- Mobile Responsiveness:
Recognizing the prevalence of mobile screens, Hyva Enterprise doesn’t merely adapt; it becomes your store’s reliable companion on mobile devices. It is not just about fitting the screen; it’s about crafting an experience that is equally delightful on a smartphone as it is on a computer. Your store is seamlessly accessible to customers, regardless of their device.
- Customization Options:
Acknowledging the uniqueness of each business, Hyva Enterprise operates as a creative workshop, providing numerous options to personalize your store’s look and feel. From selecting themes that align with your brand to fine-tuning layouts, Hyva Enterprise offers the tools for your creative expression.
- SEO-Friendly Approach:
In the competitive landscape of search results, Hyva Enterprise acts as your SEO ally. It is not just SEO-friendly; it is strategically intelligent. It establishes the groundwork for your store to occupy prime space – the first page of search results.
- Seamless Scalability:
Evolving with the growth of businesses, Hyva Enterprise transcends its role as a mere tool; it becomes a growth partner. Engineered to handle fluctuations in traffic and accommodate the expansion of product catalogs, it serves as a dependable ally supporting your business growth.
- Robust Security Features:
In the digital sphere, security is paramount. Hyva Enterprise is not just a suite; it is a security guardian. Employing advanced encryption and comprehensive data protection, it envelops your store in an impenetrable shield.
Pricing
Upon its release, Hyva Enterprise will be accessible through an annual subscription priced at €2500. The subscription encompasses a license key, full access to all repositories, continuous support and updates, and extends coverage to a single Magento 2 installation with unlimited domains and store views. It’s important to note that a valid Hyva Themes license (available for a one-time fee of €1000) is a prerequisite for subscription purchase.
In the early stages of achieving optimal compatibility, an early access program will be initiated, mirroring the approach taken with Hyva Checkout. For those eager to embark on this journey sooner, the early access program will be available at a reduced rate of €1500 for the first year. This allows early adopters to engage with Hyva Enterprise at a more accessible cost during its initial release phase.
Conclusion
To summarize, Hyva Enterprise isn’t just a solution; it’s an ally in your e-commerce adventure. It’s the friend who brings the snacks to the movie night of your online store’s life. So, if you’re ready to not just keep up but soar in the e-commerce skies, Hyva Enterprise is waiting backstage, ready to take center stage with you. Because in this digital journey, a touch of Hyva Enterprise might just be the secret ingredient your Magento-powered dreams have been waiting for.
Hyvä UI
In the dynamic realm of e-commerce, the speed at which a store transitions from concept to reality often determines its success. Acknowledging this, Hyvä introduces a revolutionary approach encapsulated in the mantra—COPY, PASTE, DONE. This ethos defines Hyvä shops, where efficiency, speed, and cost-effectiveness converge to reshape the landscape of online store development.
Expedited Development Foundations:
Hyvä shops are not merely about creating online stores; they are about doing so at an unprecedented pace. The incorporation of prebuilt components is the linchpin of this accelerated development. These meticulously crafted and readily available components empower businesses to launch a fully functional, high-performing store in a matter of days, not weeks.
The Ever-Growing Library: A Repository of Possibilities:
Hyvä’s distinctive feature is its commitment to an ever-expanding library of components. Developers and merchants access the code for all components, ensuring flexibility and customization aligned with unique business needs. The availability of these components in a Figma design system further streamlines development, fostering a collaborative and efficient approach.
Long-Term Value: A Strategic Investment:
Hyvä goes beyond immediate gains; it’s a strategic investment for the long term. The integration of Hyvä UI provides a foundation for building themes, ensuring a consistent and user-friendly interface. CMS components facilitate ongoing content addition, ensuring the store evolves with the business. Regular releases of new components through free updates guarantee a store that stays current and competitive.
The Best Part: Hyvä UI as a Complimentary Inclusion:
An enticing aspect for merchants, agencies, and developers is that Hyvä UI comes FOR FREE with every Hyvä Themes license. This inclusion unlocks the full potential of the UI component library, enabling users to harness the power of Hyvä without additional costs.
Merchants, Agencies, and Developers: A Triumvirate of Success:
For merchants, the appeal lies in saving time and money in Magento 2 webshop development, leading to a quicker time to market. Agencies, equipped with Hyvä, can efficiently develop more online stores, ensuring content developers stay content, and resources are judiciously allocated. Developers can focus on their core skills, leveraging fully functional elements to kickstart projects and bypass repetitive tasks.
In conclusion, Hyvä shops redefine the dynamics of online store development. With a philosophy rooted in efficiency, cost-effectiveness, and a commitment to ongoing improvement, Hyvä presents a new paradigm—an essay of progress written in lines of code. COPY, PASTE, DONE transforms the complex into the accessible, and the ambitious into the achievable.
Effortless Fusion with Figma
Every Hyvä theme now includes a Figma file. This integration not only simplifies the design process but revolutionizes the way online stores are envisioned and realized.The integration of Hyvä with Figma brings a new level of simplicity to the online store design landscape. The provision of a Figma file enables the smooth integration of sleek and user-friendly UI components directly into your design workflow. This harmonious collaboration between Hyvä and Figma eradicates unnecessary intricacies, allowing designers to focus on creativity and visual allure without being hindered by complex design procedures.
Hyvä Widgets
Hyvä Widgets represent an integral native solution seamlessly integrated into Magento 2, introducing an efficient CMS framework for users to prototype and build pages within the Magento ecosystem. Notably, this integration is achieved without the need for additional dependencies or libraries.
FUN FACT: BEMEIR THE COMPANY BEHIND THIS ARTICLE CREATED THE HYVÄ WIDGETS AS A CORE CONTRIBUTION TO THE HYVÄ ECOSYSTEM TO FURTHER ITS ADOPTION AND IS NOW USED BY UP TO 250 STORES AT THIS TIME! SPECIAL THANKS TO VINAI KOPP AND THE HYVA TEAM!
Key Features of Hyvä Widgets:
Comprising a collection of prebuilt components, Hyvä Widgets offer easy configuration through various fields, including image upload, WYSIWYG, text, color pickers, sliders, and dynamic product listings from categories. Their flexibility allows for seamless integration into CMS pages either as standalone widgets or within containers, utilizing Magento 2 admin layout functionality.
Addressing CMS Extension Challenges:
Hyvä Widgets aim to overcome challenges posed by extensive CMS extensions like PageBuilder, which often introduce numerous dependencies, creating a delicate balance between versatility and complexity. Hyvä Widgets address this by providing a toolkit with precisely defined restrictions for content creators, enabling effective work within the website’s design system.
Utilizing Hyvä Widgets for Development:
Developers can swiftly create custom content templates and layouts using Hyvä Widgets, leveraging the capabilities of Hyvä Theme and Tailwind/Alpine technologies. The avoidance of custom page builders and reliance on native Magento 2 technologies contribute to the simplicity and efficiency that Hyvä Widgets bring to the development process.
User-Friendly Interface and Functionality:
Hyvä Widgets excel in providing a user-friendly experience, allowing content creators to make changes effortlessly through a familiar interface. The incorporation of native TinyMCE Drag and Drop functionality ensures that modifications seamlessly reflect on the frontend.
To summarize , Hyvä Widgets emerge as a solution embracing native Magento 2 technologies, sidestepping unnecessary dependencies, and striking a balance between versatility and simplicity for both content creators and developers.
Hyvä Compatibility Modules
Within the Hyvä ecosystem, modules initially designed for Magento Luma or Blank themes require a Compatibility Module to seamlessly integrate with Hyvä. The crucial distinction stems from the fact that Magento, in its default setup, relies on outdated libraries such as LESS, RequireJS, jQuery, Knockout.js, among others, while Hyvä exclusively employs TailwindCSS and Alpine.js.
Role of Compatibility Modules:
Compatibility modules play a pivotal role as bridges by re-implementing specific sections of a module that may not seamlessly integrate with the Hyvä storefront. This typically involves adjustments to template files and, in some cases, modifications to plugins interacting with the view layer. The complexity of creating a compatibility module varies based on the specific module, but the process is generally straightforward in most instances.
Conversion Process:
The conversion process entails translating styles into TailwindCSS and transforming JavaScript originally built with the heavy Magento stack (requirejs/jquery/knockout, etc.) into Alpine.js or native JavaScript.
Community Collaboration:
Acknowledging that many Magento shops install similar subsets of modules, the Hyvä community promotes efficiency through the shared use of compatibility modules. These shared modules are publicly available under the hyva-themes composer namespace. This collaborative approach aligns with the Magento open-source community ethos, facilitating quicker implementation for those adopting Hyvä.
Compatibility Module Tracker
To enhance visibility and coordination, a Compatibility Module Tracker has been established. The left column displays modules that are currently incompatible with Hyvä, representing user requests. Hyvä license holders can express support for specific module requests by giving a Thumbs-Up to the corresponding ticket. Modules with a high number of votes may be prioritized for implementation by the Hyvä theme.
The Accepted column lists modules slated for availability but not actively in development. Contributors committed to creating the compatibility module are identified.
The Published column features modules for which compatibility modules already exist. It’s important to note that some compatibility modules may not cover 100% of the original module’s features, and contributors can enhance coverage by submitting merge requests.
In the final column, modules labeled as “Compatible” indicate that no compatibility module is required, as they seamlessly work with Hyvä natively.
Hyvä Advantages
1. Elevated User Experience
Hyva’s steadfast dedication to improving user experience results in tangible advantages. The accelerated page load times contribute to a positive browsing experience, leading to reduced bounce rates and heightened customer satisfaction. Ultimately, this fosters a more engaged and loyal customer base—a fundamental element of e-commerce success.
2. Scalability: Harmonizing with Growth Dynamics
Hyva’s modular and component-based architecture positions it as an inherently scalable solution. Whether a business is in its initial stages or undergoing rapid expansion, Hyva’s design ensures smooth scalability. This adaptability accommodates the evolving needs of both emerging startups and established enterprises, creating a dynamic and resilient storefront.
3. Developer-Friendly Approach: Cultivating a Collaborative Community
Hyva warmly welcomes developers, acknowledging their pivotal role in the Magento ecosystem. The platform’s developer-friendly design, coupled with clear documentation, fosters an environment where developers can thrive. This inclusivity ensures active contributions from the Magento community, propelling the continuous improvement of Hyva.
Hyvä Friendly Extension Developers
Aheadworks, Amasty, MageWorx, MagePal, and More (Full List Coming Soon!)
Conclusion
In the intricate world of e-commerce, where the frontend plays a crucial role in user engagement, choosing a cutting-edge solution becomes strategically imperative. Hyva doesn’t just offer a solution; it stands out as a guiding light, directing the way toward a future where the frontend is more than a functional component—it’s a strategic asset. By combining the capabilities of React, GraphQL, and a modular architecture, Hyva exemplifies the ever-evolving landscape of e-commerce frontend development within the Magento ecosystem.
As businesses navigate the digital landscape, placing emphasis on online presence and user engagement, solutions like Hyva become pivotal architects of this transformative journey. Opting for Hyva means embarking on a quest toward a frontend that not only meets but surpasses the expectations of the modern consumer. This sets the stage for a new era in Magento frontend development—an era marked by the convergence of innovation and user-centric design, shaping the destiny of e-commerce.
