🎉 Check out DevCenter, our new documentation site for v2.0! (Or keep using this site for earlier versions.)

Switch to DevCenter

Menu Sheet Overlay

Styling Your PWA

This guide explores using SCSS to style the PWA.

Generated projects include styling for Mobify's fictional PWA Merlins Potions.

You can change its styles to better represent your brand.

Progressive Web Apps bring app-like experiences to the web. Create fast, fluid, frictionless experiences that are indistinguishable from native apps. This includes styling transitions between pages while data is loading!

Preloader Container Container with Data Container with Hero Complete
Image Image Image Image Image

The generated project includes a stylesheet main.css in web/app/loader.js.

On npm start, webpack creates main.css by applying Sass and PostCSS to web/app/stylesheet.scss. It also watches for changes and you can refresh to see.

Style the PWA by changing its imports:

  1. SCSS variables
  2. Component styles
  3. Preloader styles

SCSS Variables

Colors, fonts, weights, breakpoints and shared values are set in web/app/styles/_variables.scss.

Changing this file is the best way to start branding your PWA!

Component styles

Local component SCSS files are in web/app/components. Local components use the class name prefix c-.

The SCSS files for our SDK components are in web/app/styles/themes/pw-components. For styling SDK components, use the class name prefix pw-.

Some SDK components do not have an SCSS file. Customize them by creating one and importing it in web/app/styles/themes/_pw-components.scss.

Container component SCSS files are in web/app/containers. Container components use the class name prefix t-.

Preloader styles

The Preloader is shown while the PWA starts.

It should be light-weight, both visually and in file-size.

The Preloader CSS file is web/app/preloader/preloader.css.

The Preloader uses CSS, not SCSS like the rest of the PWA.

Referencing assets in SCSS

To reference images in SCSS, use a path relative to web/app regardless of where the source file is located.

For example, to reference web/app/static/img/global/image.png:

.c-banner {
    .c--free-ship {
        background-image: url('./static/img/global/free-shipping-banner.png');



Was this page helpful?