Styling a ScandiPWA application is a process of building layer(s) of themes on top of the core application (core theme). Themes can be built from scratch, or installed from the official marketplace:

How to install themes?

You can install a theme either from the ScandiPWA Marketplace via NPM or from a zip file.

How to install a theme from Marketplace?

How to install a theme from ZIP?

Each new ScandiPWA application is a theme by default.

How to change the application's appearance?

Changing the application’s appearance or customizing existing components involves primarily the file overriding mechanism.

How to override a file?

How to style a component?

ScandiPWA uses the Block-Element-Modifier (BEM) pattern to style components for more maintainable and scalable CSS. This provides a clear structure for organizing styles.

How to use BEM?

Video: How to style the application?

How to style each component?

This process is known as theming. To streamline it, the following system is proposed:

<aside> 👉 The theming process happens in phases:

1. Theme the base template. This includes overall aspects such as colors and fonts, as well as design atoms – very small elements reused throughout the app.
2. Theme reused molecules. Some combinations of atoms, such as a product list, can appear in several places in the app. We style these separately to avoid conflicts later.
3. Theme organisms and other larger structures. You are now ready to theme more complex structures since their individual parts have been taken care of.
4. Finally, theme entire pages. This means incorporating the organisms into fully-fledged pages with layout, background images, and any other surrounding details. </aside>

1. Style a base template

The base template is an atomic UI element design implementation. By atomic UI element, we mean inseparable elements.

1st phase

How to style content wrapper?

How to update colors?

How to update fonts?

How to work with fonts?

How to work with and implement fonts?

2nd phase

How to style typography elements?

3rd phase

How to style text and select input?

How to style radio and checkbox input?

Create a checkbox field (Or other types of fields)

How to style a loader?

How to style buttons?

How to style notifications?

How to style breadcrumbs?

2. Style molecules

Simple molecules

How to theme rating display?

How to theme a product price?

How to theme quantity input?

How to theme a popup?

How to theme an address form?

How to theme an address preview?

How to theme a cart totals?

Compound molecules

How to theme a cart item list?

How to theme a product list?

3. Style organisms, common elements, and overlays

Theming the rest of the application is relatively straightforward. We are no longer blocked by anything, thus we immediately theme all the following:

Organisms

How to theme category organisms?

How to theme product actions?

How to theme checkout organisms?

How to theme cart organisms?

How to theme account organisms?

How to theme helper pages?

Common elements

How to theme navigation?

How to theme offline notice?

How to theme cookie popup?

How to theme auth overlay?

How to theme cart overlay?

4. Style page layouts

The page layout is made out of organisms created above, it is the final step for each page theming and in the scope of this task element placement, gaps, and the layout should be implemented, additionally, all issues and not styled default elements should be adjusted:

How to theme the category page layout?

How to theme the product page layout?

How to theme the cart page layout?

How to theme the checkout layout?

How to theme the compare page layout?

How to theme an authorization and registration page layout?

How to theme the account page layout?

How to theme navigation layout?