Home - Blog - Discover Hyvä UI: The Game-Changing Component Library for Magento Retailers

Discover Hyvä UI: The Game-Changing Component Library for Magento Retailers

Discover Hyvä UI: The Game-Changing Component Library for Magento Retailers

Hyvä have released their much anticipated Hyvä UI package, but what is it?

Hyvä UI is like having a collection of beautifully crafted building blocks that will easily fit into a Hyvä-themed website. From a development perspective, this hugely reduces the cost for merchants and time spent for development agencies, which enables faster project completion.

The best news of all, the Hyvä UI component library is free if you purchase Hyvä Theme for your Adobe Commerce / Magento Open Source store.

What’s Hyvä you ask? Read more here

What’s included in the Hyvä UI component library?

In short. A lot.

The Hyvä team has done the groundwork when it comes to “What’s missing from Luma theme”. Adobe has had years to add to Luma theme but has not changed a lot since originally launched.

Hyvä has added multiple components for menus, headers, footers, shortcut icons, content blocks, category landing page content blocks, footers, banners, CTAs, sliders, testimonials, USPs, product cards, cookie banners, modals, notifications and pop-ups.

In total, there are 36 components to use at the moment.

Hyvä has confirmed that the library will grow over time with updates regularly being added.

Our top 8 picks from the Hyvä UI library

1. Headers

There are three versions of a header for your Hyvä site:

  • Clean
  • Compact
  • Stacked
Clean
Compact
Stacked

2. Menu

Hyvä offers three versions of the header to work with. This is really strong as it allows merchants to quickly add changes to their website. The headers are:

  • Simple static links menu
  • 4 column mega menu
  • Vertical dropout 4 column menu

All three menus are very different and will accommodate most verticals.

My personal favourite is the Vertical dropout 4 column menu. Endless possibilities and great for user journey in large catalogues.

Simple static links
4 column mega menu
Vertical dropout 4 column

3. Footers

Again, Hyvä is offering 3 versions of a footer:

  • Clean
  • 4 column newsletter
  • Mega

This allows merchants a wide range of possibilities depending on how much content or information they want to share with customers. The mobile versions look incredible.

Clean
4 column newsletter
Mega

4. Product Listing Page (PLP)

This is a string addition to the UI options as the offerings are quite costly and complicated to apply to a standard Lume theme store. Having the option of size and colour swatches as well add-to-cart functionality is what makes this stand out.

The image below shows all device types.

5. Product Category Page (PCP)

Top-level category pages are essential for large catalogues and do work with small to medium when it visuals. Consumers generally shop in three ways:

  • Menu browsing
  • Search browsing
  • Landing Page browsing

Having a clear path using category pages makes it easy for the customer to visually see things in front of them when Landing Page browsing. The pages can also help from an accessibility point of view as well.

Hyvä has created two versions: Grid images and Grid patterns.

Grid images
Grid Patterns

6. Generic Content

Having clean, easy to use and readable content blocks makes life simple for consumers. Hyvä have created two versions, Text and Visual, which can easily be developed for quick changes and multiple options.

Text
Visual

7. Attention grabbers

From Cookie banners to Notifications, Hyvä UI offers eight attention grabbers for your store. This will once again save time and money in a development project by allowing the merchant to pick and choose the correct ones for their needs.

The Newsletter title options and Modal options are particularly strong.

Below are images are of the Modal components and the Cookie components. The image below shows all device types.

Modal
Cookie banners

8. CTA

Call-to-action elements are an important piece of any ecommerce platform. From homepage content blocks to offers within your megamenu, these are the signposts for pointing consumers to the correct place.

Hyvä have created three different CTA components:

  • Image
  • Text only
  • Split
Image
Text only
Split

Find out more

Want to discover the components that didn’t make our list? Click here to discover the full Hyvä UI component library (Sept 2023).

Willem Wigman, founder and creater of Hyvä, demonstrates all available components in the below video: 


Partner with Fluid Commerce

Fluid Commerce is a Silver Adobe Solution Partner and an official Hyvä partner. We develop and support superior Adobe Commerce & Magento Open Source websites.

Based in the North West of England, we are ecommerce agnostic, working with a host of B2B, B2C and DTC merchants across sectors including Home & Garden, Jewellery & Accessories, Health & Beauty, Technology, Fashion & Apparel.

To find out what Fluid and Hyvä can do for your business, get in touch here and our team be in touch asap.

Further Reading

Share this article