Storefront UI: Rocket fuel for Vue Storefront development

Przemysław Spaczek
Jan 15 · 5 min read

Data has left that issue without any doubts: UX is gaining importance not only in terms of brand awareness but also conversion. Yet, for eCommerce businesses, it has been challenging to keep up with all the UX-trends without diving into time-consuming and expensive changes in the system’s architecture. Until now. Storefront UI is the answer to that demand

Storefront UI is an independent, Vue.js-based library of UI components such as buttons, galleries, search bars, etc., which enables businesses to build storefronts fast, efficiently, and without looking over their shoulder at the backend. Moreover, it is 100% customizable. Every single UI component, a complex module, or the whole design system can be flexibly adjusted to the personal preferences of a specific brand.

It was created as a complementary product to Vue Storefront. However, the general idea was always in line with the open-source’s spirit of broad accessibility, and so Storefront UI can be used not only in Vue Storefront but in any Vue project. Let’s dive into the details!

How was Storefront UI created?

Vue Storefront is less than two years old, but during this time many things on the web have already changed. That was one of the reasons why, a few months ago, we decide to redesign our default theme and create Capybara, a new theme for Vue Storefront.

This pretty soon sparked a lot of discussions. We started to ask how we can make it more useful to business, and we knew that it should be reusable, customizable and upgradeable. The Holy Grail, that we were looking for, was a UI components library delivered as a package on npm. Once we came to that realization, we simply had to get to work and find the right way to do it.

The decision about creating an open library has opened many doors for us. Thanks to that, we’ve gained components that we could use in Shopware PWA including the Vue Storefront integration dedicated to Shopware 6, Vue Storefront Next, our commercetools integration, and the creation of the new default theme to Vue Storefront which is named Capybara.

Introducing Storefront UI

Storefront UI is a 100% customizable components library dedicated to eCommerce. We tried to keep the balance between creating a ready-to-use, beautiful UI components library and ensuring full control over code. This makes Storefront UI a unique solution, as the other UI libraries on the market focus on just one of these aspects.

We decided to focus on 6 principles:

  • Customization: This is the most important value for us. With standard customization we use props. Our components have a lot of slots, thanks to which you can replace any part of HTML markup. We provide you with a single SCSS file from which you can override default variables values.
  • Mobile-first: Because people spend more and more time on mobile devices, we optimize our components to the best possible experience on smaller screens. A lot of components work differently on desktop and mobile. You can check it on SfTab or SfSelect Component, for example.

Storefront UI SfSelect Component desktop and the mobile look is different

  • Performance: Thanks to the RAW library format, you can import ONLY what you need. RAW will give you a variety of optimization options: you can use tree shaking or grouping common chunks.
  • Best practices: Our components are based on the Google Retail UX Playbook and are accessibility friendly.
  • eCommerce: Along with standard UI components, Storefront UI has all the elements necessary for building modern online stores.

Dedicated for eCommerce product component on example category page.

  • Open Source: Storefront UI is a community effort to deliver the best possible experience to modern web applications and shops. Our team consists of agencies and volunteer contributors from all over the world.

Where are we now in the project?

One of our projects based on Storefront UI is Capybara, the new default theme for Vue Storefront. We’ve been working hard on it but still need a little more time. You can check where we are on the Vue Storefront Roadmap.

But you don’t have to wait for us to finish it. Storefront UI is in stable BETA and you can add it as a dependency to your project. You must remember that our library should be transpiled and that in Vue Storefront project you should install Storefront UI in your theme directory.

yarn add @storefront-ui/vue`

Storefront UI will create a `sfui.scss` file for you in the root directory upon installation. You can use it to override SCSS variable.

After installation, you need to import root stylesheet. We recommended putting it in the root app component.

import “@storefront-ui/vue/styles.scss”`

That’s all! Now you can import any of the Storefront UI components to your Vue Storefront theme like this:

import { SfComponentName } from “@storefront-ui/vue”`

Only components that you will use will be bundled into your production code so you can even use it just for a single slider component. If you need more details, you can find them in our documentation.

If you want to know how Storefront UI components look and work, you can check our Storybook. Thanks to knobs, you can change props and immediately see how it affects the component. In addition to components, you can find a few awesome example pages like Home, Product or Category, which are ready to copy and use in your project.

Become a contributor

We are focusing on components, polishing, and our docs. We’re working hard to deliver the best UI library you’ve ever seen, for improved user experiences. As you may know, Storefront UI is an Open Source project; you can become a contributor and help with components, docs, a11y or tests. Check our contributing guide, go to GitHub, pick what you 💚 and be a part of our awesome community.

Storefront UI is great but it is just a component library. To build your modern store, you may need a little bit more magic and you can find it in our other projects. You may be interested in Vue Storefront Next and commercetools or Shopware 6 PWA.

Learn more about Storefront UI and Vue Storefront.

Przemysław Spaczek

Written by

@DivanteLtd Frontend developer / @StorefrontUI Core Team Member / UX & Product Design student / Twitter: @przemekspaczek / GitHub: https://github.com/pspaczek

The Vue Storefront Journal

The official journal of Vue Storefront community. The latest news on meet-ups, contributions, releases, and the community surrounding Vue Storefront — the top open source solution for progressive web apps dedicated to mobile-first eCommerce. (www.vuestorefront.io)

More From Medium

More from The Vue Storefront Journal

More on JavaScript from The Vue Storefront Journal

More on JavaScript from The Vue Storefront Journal

VueConf Toronto 2019 — stands out in its way

More on JavaScript from The Vue Storefront Journal

More on JavaScript from The Vue Storefront Journal

Vue Storefront current status and roadmap

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade