Hyvä Themes
Table of Contents
Years ago, when Hyvä Themes was launched, it completely changed the frontend experience for both developers and store owners. With its reduced dependencies, modern technologies, modular architecture, and responsiveness, it won the hearts of businesses worldwide.
Over the years, Hyvä evolved into the whole ecosystem, pursuing easier, more flexible, and faster frontend development for Magento 2 stores. In 2023, Hyvä UI became an integral part of it.
Hyvä UI is a library of pre-built components that facilitate Hyvä Theme development. All its elements are fully Hyvä-compatible, built with the same technologies, such as AlpineJS and Tailwind. It allows you to easily copy and paste UI elements to your theme without deep knowledge of frontend development. You can think of it as the Tailwind library for Hyvä Themes with out-of-the-box functionality.
The library is compatible with Hyvä Themes version 1.2 and higher, and goes together with the Hyvä Themes license. It offers extended accessibility features like text contrast and button styles and new elements such as a mini cart, AJAX Add-to-Cart UI component, and loader. The latest Hyvä UI version, 2.4.1, rolled out in September 2024, contains a new sticky add-to-cart, sticky header, and new scroll-to-top option — all to make your store even more convenient to use.
You don't need to install all the components in your theme. Just choose the suitable ones, copy the code, and adjust them to your needs. Cloning the whole Hyvä UI in your theme may even harm your store, generating unnecessary Tailwind classes. Including unnecessary elements can negatively affect your store's performance.
You can access Hyvä UI after Hyvä Packagist key configuration just by running:
composer require --dev Hyvä-themes/Hyvä-ui
If you hold a Hyvä Themes license and are a partner or contributor with GitLab access, you can access the library in the GitLab repository.
Today, Hyvä UI includes access to the components' code, access to the Figma design system, and direct Slack support. The library contains .phtml files with the logic for seamless Magento 2 integration. Introducing the new frontend components has never been easier!
Overall, Hyvä UI has become a great help for store owners who do not need major site customizations yet want their online shop to look good and provide a seamless user experience.
Built for convenience, Hyvä UI encompasses benefits that convert into development time and cost savings. What else can this library offer? Let's discover.
First and foremost, Hyvä UI facilitates the development of Hyvä Themes. You don't need to build a storefront from scratch anymore. Pre-built and customizable components are quite easy to install, modify and update. Moreover, you can add library components without modification to the theme template. Finally, you don't need extra Hyvä-compatible modules for banners, notifications, and other elements, as they are already in the library.
When you purchase a Hyvä Themes license, you get full access to Hyvä UI without additional costs. All templates, styles, and other elements are available for download, and each file is supported by a README.md file containing instructions on its compatibility and installation. Regular library updates add new components to the gallery and fix bugs identified in the existing elements.
Hyvä UI offers ready-to-use components, which can significantly lower project costs compared with developing Hyvä Themes from scratch. While you'll need some customization, the developers can optimize the existing template faster than building it from scratch.
Hyvä UI helps quickly build the store's frontend without major investments or effort. Fast storefront development results in decreased time to market, meaning that your business can start generating revenue sooner.
Hyvä develops the idea of minimalistic design in their library, delivering a clear and intuitive layout. Responsiveness is another integral part of Hyvä UI, making your store look good on any device and screen size. Hyvä also dedicates efforts to improving user experience and accessibility. The latest library update aligns with accessibility efforts in the Hyvä Theme 1.3 (A11Y) release.
Hyvä UI benefits merchants, agencies, and developers in several ways:
As Hyvä early adopters and active contributors, we have expertise in the whole Hyvä ecosystem. Our results talk for themselves: 75% rise in performance and X2 traffic growth.
As there are different versions of Hyvä Themes and Hyvä UI, we prepared a small guide to navigate them.
Tracking the version is necessary to ensure the chosen UI component perfectly suits your current theme. The latest versions of Hyvä Themes are 1.3.6 and 1.3.7, while Hyvä UI works by default with versions 1.2 and higher. However, some exceptions work only with the newer ones. You can check all the nuances in the documentation provided by Hyvä.
Hyvä UI includes a wide range of elements necessary for a seamless customer experience, such as a shopping cart, notifications, banners, menus, call-to-actions, and more. Let's explore the main ones to better understand the library and its capabilities.
Fixed elements include headers, footers, a mega menu, and shortcuts. Each element comes in several variants and can be adjusted to your needs. The menu designs include vertical dropdowns, simple links, shop dropdowns, and a four-column mega menu.
Headers, footers, and shortcuts are of different types and sizes. For example, a compact header hides some elements until they are needed, saving space. This is useful when you've got a lot of content on the page and is convenient for access on mobile devices. On the contrary, a mega footer includes a comprehensive layout and contains several columns and sections, providing comprehensive information to the customer.
Simple layouts suit smaller stores better, while more sophisticated designs cater to larger stores' needs. The offered solutions are versatile and built with store needs and different products in mind.
Content elements allow adding functionality without modifying theme templates and streamlining content creation. They come in two categories: Dedicated CMS Page Components (14) and CMS-compatible Theme components (8).
Dedicated CMS Page Components are created to be used within CMS pages, while CMS-compatible Theme components are the elements originally built for the theme but applicable for CMS pages, which adds flexibility.
Content elements include:
The product category page features grid images that highlight categories with high-quality product visuals. This layout is perfect for stores emphasizing aesthetic appeal, capturing customer attention with stunning imagery. Grid patterns support text options for product details, offering a stylish and focused way to present essential information. This design directs user attention towards textual content, enhancing readability and keeping users engaged.
Product listing page categories include filters and product card layouts. Filters carry standard functionality, allowing users to select or deselect options in real-time and input various criteria such as price, popularity, new arrivals, and more. The product card enables users to choose color/pattern and size, compare prices, add items to favorites, and add them to the cart.
This section consists of product data, reviews, and a gallery. Product data comes in specifications, tabs, and highlights, allowing customers to read product characteristics.
Adding basic and minimal reviews to your eCommerce store can significantly enhance user engagement and provide valuable feedback to potential customers and the business. A clean layout organizes reviews neatly, with each review card including the reviewer's name, the date of the review, a star rating, and the full text of the review.
Gallery deals with product images. Each gallery type is optimized for performance, minimizing the use of heavy JavaScript libraries and enhancing the site's speed, which is crucial for improving user experience and SEO.
Hyvä UI organizes images in several ways:
Shopping carts and checkout are two main elements of an eCommerce store. They must be user-friendly, intuitive, easy to use and navigate, leading right to the purchase. Hyvä UI offers two options for Magento 2 store optimization: mini cart and AJAX add-to-cart.
There are several options for attention grabbers: cookies, modals, notifications, and pop-ups — eight options in general. Choose the most resonant with your store design and deliver information to the customer via these visually appealing elements.
Other components include swatches, order confirmation, error messages, and categories. You can find the list of all supported components in Figma.
Do you need to upgrade the components? The short answer is yes, but let's uncover the details.
While other Hyvä modules need updates to stay relevant and deliver robust functionality, Hyvä UI components do not require automatic updates every time a new library upgrades. You just copy the component's code one time, make the necessary adjustments, and it works.
However, you may need the components updated for bug fixes or new functionality. If the upgrade is optional and you're customizing a UI component solely with XML arguments, you can easily update it by replacing the old file with the new one.
More controlled updates include file comparison, selective code updates, and custom style maintenance.
These steps allow you to update your Hyvä UI components without impacting your customizations.
Hyvä UI is a convenient library that facilitates frontend building, speeds up development, and cuts project costs.The compatible nature and inclusion of its Hyvä Themes allows for quick implementation of pre-built components in the Hyvä Themes storefront.Hyvä UI suits businesses that want to balance a store's uniqueness and costs.
Need a team to build a custom storefront? Finding seasoned Hyvä developers with relevant experience is easier than you think! Contact NEKLO to discuss your project.
US-based and operating globally, NEKLO spearheads digital transformation initiatives for businesses worldwide. We deliver software solutions complying with your market and legislation.
.png)
