Theming Your Storefront

When you start making the Storefront your own, you'll want to start changing how the UI looks. Built on top of Storefront UI and Tailwind CSS, the Storefront is designed to be easily customizable.

Customizing Storefront UI

Storefront UI is our eCommerce UI library for React and Vue that provides a set of Base Components and Blocks to build your eCommerce UI.

1. Base Components - are the basic building blocks of the UI, such as buttons, inputs, and modals. These are part of the @storefront-ui/* package and are used to build the Blocks.
2. Blocks - are more complex components that are built using the Base Components containing specific eCommerce functionality, such as the ProductCard or Checkout. These are available as copy-and-paste-code from the Storefront UI documentation. Many of the components that come with the Storefront are built using Storefront UI Blocks.

Changing Storefront UI Components

In your project, the Storefront UI Blocks are directly available in your components folder. This means that you can easily change the styling of the components directly in your codebase. However, some of these Blocks are built using the Base Components, which are imported from a package.

To change the styling, behavior, or logic of these components, you can copy-and-paste the source code for that component from the Storefront UI documentation, add it to your own project, and make the necessary changes.

Theming with Tailwind

Both Storefront UI and the Storefront are built on-top of Tailwind CSS, a utility-first CSS framework. This means that you can use tailwind.config.js to change things like colors, fonts, and spacing values.

export default {
  //...
  theme: {
    extend: {
      colors: {
        // overwrite the primary color
        primary: {
          50: '#f5f9ff',
          100: '#e9f3ff',
          200: '#c8e0ff',
          300: '#a6ccff',
          400: '#6ea1ff',
          500: '#3375ff',
          600: '#2e6ae6',
          700: '#264ebf',
          800: '#1d3f99',
          900: '#132f72',
        }
      },
    },
  },
  //...
};

Alternatively, if your application needs to support multiple themes (e.g. light and dark mode), you can use the CSS variables to change certain colors based on the selected theme. To help you get started, you can check out the full list of colors that you can change in Storefront UI.

:root {
  --colors-primary-500: 10 171 69;
}

/* this may change depending on how you implement dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --colors-primary-500: 240 253 244;
  }
}

Updating Brand Assets

By default, the Storefront project comes with a set of brand assets, such as the different logo variations and the favicon. Some of the brand specific assets are:

• public/icons/* - contains the .png images used for different icons when the application is installed on a mobile device
• favicon - the icon used in the browser tab:
  • app/favicon.ico - Next App
  • public/favicon.ico - Nuxt App