Magento 2 Hyva Theme
Step into the world of Hyvä Themes, where the Magento front end is reimagined right from the core. This isn't a mere makeover; it's a ground-up rebuild using the familiar Magento templating system.
Imagine having all your favorite Magento developer tools at your disposal: layout XML, blocks, view models, and phtml. Now, envision a world where you bid adieu to the elements that typically bring on the frown – UI components, Knockout, RequireJS, and less CSS.
Hyvä Themes strides forward with performance as its guiding star. The result? A turbocharged webshop that not only zooms ahead but also trims down the complexities. Translation: a quicker, sleeker online shopping destination without draining precious development hours. And the cherry on top? Smiles on developers' faces.
Hyvä isn't just an alternative; it's a beacon amidst the Single-Page-Applications (SPAs) landscape. While SPAs often promise speed, they come with hefty budgets. Hyvä takes a different route, delivering speedier websites without straining your resources. And guess what? It does so using the tools that are old pals to most Magento developers.
Why Hyva For Magento 2?
Magento 2 has truly carved a niche in the e-commerce realm by handing store owners complete control over their platforms.
In a realm where lightning-fast, optimized, and SEO-friendly store themes are the holy grail, the default themes of Magento 2 left many a store owner wanting. Enter Hyvä's theme, stepping up to meet these very expectations.
Hyvä Themes are a breed apart, crafted from the ground up, wiping the slate clean of layout.xml, phtml files, and even JavaScripts. Its mission? A clean break from third-party libraries like Knockout, Require, jQuery, and the unnecessary JS and fewer stylesheet files that trip up optimization.
Built on ViewModels, Tailwind CSS, and AlpineJs V2, Hyvä Themes sidestep render-blocking woes by embracing inline tailwind CSS and AlpineJS. This ingenious approach dances around the render-blocking snag, dazzling PageSpeed Insights with its inline CSS and phtml-file-bound Alpinejs.
Let's not forget Hyva Theme Extensions, seamlessly fitting hand-in-glove with Hyvä themes.
Fundamental principles of the Hyvä Theme:
• Streamline complexity
• Amp up performance
• Enhance developer experience
• Accelerate development velocity
• Scale down dependencies
• Trim the learning curve
Magento Open Source Feature Coverage in Hyvä
Layered navigation
Wishlist
Search
Simple products
Contact form
Customer account
Upselling
Related Products
Tier prices
Configurable products
Custom options
Product Videos
Customer account dropdown in the header
Swatches Layered Navigation
Swatches PLP
Swatches PDP
Compare products
Bundle products
Vault
Metadata
ReCAPTCHA v2
ReCAPTCHA v3
Google Analytics
PayPal Express
Checkout from PDP and Cart available with Luma Checkout (for confirmation page)
PayPal Express InContext
Virtual Products
Downloadable Product samples
Watermarking on product images
Product Reviews
Breadcrumbs
Multiple Product Images
Zoom-in on Product Images
Display Stock Availability
PDP: Display product option selection
Customer Account Dashboard
Customer Account: Default shipping & billing address
Implemented in Customer Account, in checkout only supported in Luma Fallback Checkouts
Grouped products
Cross-selling
Downloadable products
Price change notifications
Out-of-stock notifications
SEO features
Accessibility features
Catalog price rules
Page Builder
Default CMS widgets
Estimated shipping cost in cart
Country/language switch
Currency switch
Advanced search
Search autocomplete
Product List and Grid display
Cart Price Rules
Customer Group Prices
Category Landing Pages
Recently viewed/compared products
Gift Messages
Newsletter sign-up
Send to a friend feature
Customer Account: Address book
Customer Account: Order Status & History
Customer Account: Re-Ordering
Customer Account: Recently ordered items
Customer Account: Shareable wishlist
Customer Account: Manage Newsletter subscriptions
Customer Account: Product reviews
Customer Account: Access downloadable/digital products
Admin - Login as customer
EU Cookie Notification/cookie restriction banner
Popular Search Terms Cloud
Google Core Web Vitals
Studies within the industry highlight the user's inclination towards websites offering exceptional experiences. Google, a pivotal player, evaluates websites based on diverse user experience parameters, including page loading speed and mobile compatibility, which significantly influence result rankings. In the year 2020, Google's Chrome team unveiled Core Web Vitals—an assortment of metrics encompassing speed, responsiveness, and visual consistency—designed to aid website proprietors in quantifying user experience.
These Core Web Vitals are universally applicable to all web pages, necessitating their assessment by every website owner. Furthermore, Google intends to integrate these metrics across all its tools, thereby underscoring their significance in the realm of website evaluation and enhancement.
The constituent metrics comprising Core Web Vitals will undergo continuous refinement over time. The present compilation centers on three fundamental aspects crucial to user experience: loading speed, interactivity, and visual stability. This set encompasses the subsequent metrics along with their respective performance benchmarks:
1. Largest Contentful Paint (LCP): This metric gauges loading efficiency. To guarantee an optimal user experience, LCP should transpire within 2.5 seconds from the initiation of page loading.
2. First Input Delay (FID): FID assesses interactivity. For an enhanced user experience, pages should demonstrate an FID of 100 milliseconds or less.
3. Cumulative Layout Shift (CLS): CLS quantifies visual steadiness. To ensure a favorable user experience, pages ought to maintain a CLS of 0.1 or lower.
Below is the CWV for the page with the demo hyva theme, The scores are below the minimum and remain top which makes hyva the enemy of slow loading speed! Once the theme is installed on any live site the page speed doesn't go below the minimum performance suggested by the Google Core Web Vitals!
Attaining favorable outcomes in Core Web Vitals not only translates to improved Google rankings but also leads to heightened conversion rates. For each of the aforementioned metrics, a practical benchmark to aspire to is the 75th percentile of page load performances, stratified across mobile and desktop devices. This approach helps ascertain that you are consistently achieving or surpassing the recommended targets for the majority of your users.
Behold the demo site for a firsthand taste of Hyvä Themes: Hyva Demo
Check out one of our projects done using the Hyvä theme: Plasticcontainercity
Performance Before & After Installing Hyva Theme on Plasticcontainercity
Related Article: Full case study article on the plasticcontainercity, Migration from Magento 1 to Magento 2
The Bottom Line
Hyvä theme is the star of Magento 2 storefront themes. With only two dependencies – Tailwind CSS and AlpineJS – it engineers super speed, top-tier optimization, unparalleled user shopping experience, stellar Google scores, and a shopping environment primed for the future.
Make your Magento store user experience, even more, faster by upgrading your store theme to Hyva! If you haven't installed the Hyva theme yet, we at EWall can develop a customized Magento store along with the upgraded version of the Hyva theme!
Ref Article: Hyva Docs