Documentation
Feedback
Guides
Storefront Development

Storefront Development
Overview
By default, every FastStore project comes with the Brandless theme. However, you have the option to use one of the available themes or create a custom theme.
You have the flexibility and freedom to style the theme by overriding it using global or local tokens, or by starting from scratch using your preferred styling tool.

Available Themes

Midnight
Midnight
Soft Blue
Soft Blue

Creating a Custom Theme

  1. Open your starter project and create a new .scss file on src/themes (e.g. my-theme.scss).
  2. Add the tokens you want to overwrite inside the .theme class.
If you want, you can work on custom-theme.scss file that's ready to use. We are using CSS cascade layers feature to better deal with styling specificities issues, so keeping the @layer theme in the file is recommended.
src/themes/my-theme.scss

_33
_33
@layer theme {
_33
.theme {
_33
// --------------------------------------------------------
_33
// Colors (Branding Core)
_33
// --------------------------------------------------------
_33
_33
// --------------------------------------------------------
_33
// Typography (Branding Core)
_33
// --------------------------------------------------------
_33
_33
// --------------------------------------------------------
_33
// Spacing (UI Essentials)
_33
// --------------------------------------------------------
_33
_33
// --------------------------------------------------------
_33
// Grid & Layout (UI Essentials)
_33
// --------------------------------------------------------
_33
_33
// --------------------------------------------------------
_33
// Interactive Controls (UI Essentials)
_33
// --------------------------------------------------------
_33
_33
// --------------------------------------------------------
_33
// Refinements
_33
// --------------------------------------------------------
_33
_33
// --------------------------------------------------------
_33
// FS UI Components
_33
// --------------------------------------------------------
_33
// Add here the customizations for FastStore UI components.
_33
}
_33
}

  1. Go to faststore.config.js and change the theme from custom-theme to your file's name, for example:
faststore.config.js

_10
theme: 'my-theme',

Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
See also
Overview
Storefront Development
2. Setting Up the Project
Storefront Development
Contributors
1
Photo of the contributor
+ 1 contributors
On this page