Storefront UI: Rocket fuel for Vue Storefront development

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?

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

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?

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

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.

The Vue Storefront Journal

The official journal of Vue Storefront community.

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)

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)

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store