Hyvä UI: Elevating Magento e-commerce with ready-to-use components

Streamlining ecommerce development with Hyvä UI - What is the idea?

The idea was to create ready-to-use components that can be used in the store without any additional work. That means we should have a list of components that are prepared for our Hyvä Theme environment. Basic Hyvä Theme covers Magento functionality but in some cases, the client needs additional functionality and this is the reason why Hyvä UI was created.

Seamless Integration: How does Hyvä UI Simplify Component Utilization and Deployment? How Does It Work?

It couldn't be more simple: you receive template files which are ready to use. You can copy file content and add code to your application or insert content directly in the CMS panel. If you want to add code directly in the CMS panel you should have the CMS Tailwind JIT module (you need this because tailwind works in JIT mode). Because Hyvä Themes uses tailwind css and alpine js, it means that components can be prepared in one file and we don’t need to search for any dependence between components.

All files are stored in the repository: check here. If you have a Hyvä Theme license and GitLab access as a partner/contributor, you should have access.

Harnessing the Power of Hyvä UI Components: Two Integration Approaches

New components can be used in two different ways:

• we can use it directly in the CMS panel. This allows the administrator to prepare page content with new elements without knowing tailwindcss. The only thing is to paste code from the component and update it with the final text and images.
• we can use code from Hyvä UI in our application code.

Exploring Hyvä UI Components: What does Hyvä UI include?

At the time of writing this article, Hyvä UI contains 20+ components. Among them we can find some structural components, including different variants of:

• page headers - three variants,
• main menu - three variants,
• page footer - three variants,

The library also contains content components such as:

• Banners
• Slider
• Testimonials
• USP
• Shortcuts
• Generic Content
• CTA
• Categories
• Product card
• Cookie-notice
• Modal
• Notification
• Pop-Up

This component list covers most of the required elements in a standard e-commerce Magento implementation. This is the first version of the library and over time the library will be expanded with new components.

What benefits could you get by choosing Hyvä UI?

Hyvä UI offers a range of benefits that make it a game-changing solution for ecommerce. Here are some key advantages:

• More flexibility

The client can use code directly from Hyvä UI in the CMS admin panel, which means that the client doesn’t need developer knowledge to add new components to the store.

• Avoid external modules

Using components from Hyvä UI will allow us to avoid installing additional modules. Additional modules have an impact on the store's performance, using simple ready-to-use components we can avoid it.

• Faster development

We can use ready-to-use components and our developers don’t need to prepare to code from scratch, only copy and paste.

• Better Website Design

Hyvä UI includes a Figma design file, which means that your designer can use default Hyvä UI components and make modifications or build brand new components using available UI elements.

• User Experience and Accessibility improvements

Hyvä UI provides user-friendly interfaces with light and consistent design.

• Money saving

Let's be honest: if something can be done faster without losing quality, that means the solution is saving client money.

Choosing the Right UI Library for Your Ecommerce Needs: Hyvä UI and The Rest Solutions

There are a lot of UI libraries out there, but finding one that suits your needs best may not be the easiest task. Many of them require the installation of additional packages, and customization of components has its limitations. What distinguishes Hyvä UI is the simplicity of use, great freedom in matching elements and the lack of dependencies necessary for its use. All you need to do is copy and paste. You may be already familiar with Tailwind UI, which uses the same concept as Hyvä UI. Tailwind UI also provides a set of ready e-commerce components that may come in handy. Still, Hyvä UI is tailored to Hyvä and Magento, so if you are using Hyvä, it’s probably your best choice.

If you want to learn more about UI libraries available for ecommerce, read our comparison post and click here.

Elevating Ecommerce Possibilities

Hyvä UI is a product that extends the possibilities when working on our theme. At the same time, it has the features that the creators of Hyvä have accustomed us to (good performance, user experience, developers experience, fast development etc.). These are not only new variants of well-known components that we have worked with so far, but also elements that we can use on CMS pages or blocks. This is something new that confirms that Hyvä Themes are constantly developing in different directions.

Hatimeria's dedicated solutions drive sales growth by enhancing your website speed and conversion rates. With extensive Hyvä expertise, we are your reliable partner. Discover how we can empower your business. Get a project estimate now.