Looking for the perfect UI library for an ecommerce page
I’m sure you’ve noticed (no matter if you are a developer, webshop owner or a regular Internet user) that all (or almost all) pages consist of very similar elements. A header with the menu at the top, a landing banner or slider, an authentication form, a cookie popup… They may use different colors and fonts but usually they have very similar layouts. If we are still repeating the same patterns, can’t we take advantage of it and make web development faster?
What is a UI library?
In some cases, yes, we can and we already have tools for it like UI libraries. A UI library is a set of ready UI components that can be easily reused. It consists of elements like buttons, form inputs, popups. They can be customized and combined together to create a fully functional and attractive page. A good UI library should also offer great accessibility out of the box.
Is using a UI library always beneficial? Well, I guess opinions may differ but I would say no, you don’t always want a UI library. If your design was built with a certain UI library in mind or you just want your page to look nice and you don’t have very specific requirements, then sure, go for it. But if you have a very unique design and you want to stick closely to it, building all styles from scratch may be a better choice. Overriding library styles may turn out to be just as time-consuming as starting from zero. And sometimes you need to load a heavy set of styles, icons and components that will be overridden anyway. On the other hand, the UI library can quickly fill gaps in your design (for example, you may have a very detailed PDP design prepared but you want your checkout to just look good and fit in with the rest of the page).
All in all, choosing the right UI library for your needs seems to be the key.
UI libraries in ecommerce
Ecommerce websites of course come with UI elements that are specific just to them. Product listings, a minicart, category filters, checkout - you will find them in all webshops. Can we build them with any UI library? Yes, sure we can, after all they all consist of the most basic UI elements: buttons, images, texts. But are there some UI libraries that make building these particular elements especially easy? Or do UI libraries created specifically for ecommerce exist?
Yes, they exist and I’ve found a couple of them. I decided to check how helpful they would be with building these elements that we often (or always) see on web stores (at the same time they are not as common as a button or popup):
- quantity input (with +/- buttons),
- rating input,
- product and shipping options (button checkboxes/radios),
- steps (to show the progress of the checkout process or status of the order).
UI libraries or kits dedicated to ecommerce:
It is a Vue UI library that was built for Vue Storefront but can be used in any Vue application. It uses atomic design concepts. It means that components are divided into three groups depending on their size. The smallest ones are atoms (for example buttons or icons). Molecules (menu, banner, gallery, etc.) are created from atoms, organisms (header, accordion, etc.) are created from molecules. It also offers quite a simple mechanism to customize your theme and it covers all use cases I’ve listed before. There are two types of product items (vertical and horizontal), there is a ready component for product options and for quantity input. I think it can be a nice solution if you build your store on Vue, whether you use Vue Storefront or not. Also: it’s open-source.
MDB (Material Design for Bootstrap) is a UI library based on Bootstrap that follows the principles of Google’s Material Design. The free version more or less covers Bootstrap features, the Pro version offers much more, including many elements that can be extremely helpful when building an ecommerce site (such as ratings, stepper or range slider input). MDB Pro comes with a special kit for eCommerce, a set of ready-made sections prepared for web stores. The free version of MDB might not be especially well suited for ecommerce (not better than Bootstrap itself), but the Pro version is a different thing. It may be a nice solution for a bigger project.
Well, Tailwind itself is not a UI library but a CSS framework. It comes with a big bunch of utility classes (such as
mr-2 which adds a right margin or
rounded which changes the border radius) that allow you to build your UI almost without leaving HTML. It means quite a different approach to writing styles and creating UI elements. Tailwind UI uses these principles to give you a set of ready-made components. It’s just a library of HTML snippets that you can copy and paste into your project. It covers a lot of features you may need in a web store, there is also a nice set of product features and promo sections. I haven’t found rating input or quantity input with -/+ buttons (there is a simple selector), but it does cover other things from my list. If you decide to go with Tailwind, it’s great to have a ready set of HTML snippets. And if you’ve already customized your theme, they should fit into your project nicely. Some of these snippets are available only if you buy Tailwind UI Pro but even the free ones should be of great help.
Bootstrap itself is probably the most popular UI library out there. Bootstrap Ecommerce is a kit that is meant to fill in gaps and make Bootstrap more ready for an ecommerce page. And it does it well, it covers most of my listed features (except for rating input). This kit is built on Bootstrap 4. Bootstrap 5 was released in May 2021 and a nice thing about it is that it doesn’t use jQuery as a dependency. Bootstrap Ecommerce looks like a nice UI kit but I would like to observe it and see if it transitions to Bootstrap 5 eventually. It’s a small project so it’s hard to say, we will see.
It’s no surprise that all these kits cover my use cases quite well, after all they are all created specifically for ecommerce. In the next post I will check how well-suited universal popular UI libraries are for ecommerce.
Contact with: Julia