Themes

The project introduces the concept of "themes".

Theme - is a collection of components, which implements a presentation layer that is unique to your application. It should not contain any business logic. It should simply adopt extensions functionality to intended design of your application.

For application to be considered a theme, it must have a package.json field scandipwa.type equal to theme. For example:

{
    "scandipwa": {
        "type": "theme"
    }
    ...
}

The theme is what you compile into running website, therefore it also contains start and build scripts. You can read more about them in the "Getting started" section.

Parent theme

Themes can stack on top of each another. A theme which another theme is based on is called a parent theme. To specify a parent theme, set the package.json field scandipwa.parentTheme equal to intended parent theme package name.

If you are selecting a new parent theme, it is not enough to just set the value of scandipwa.parentThemein package.json. The parent theme package should be listed among of your package dependencies.

The properly installed parent theme package.json could look like this:

{
    "dependencies": {
        "@scandipwa/scandipwa": "1.0.1",
        ...
    },
    "scandipwa": {
        "type": "theme",
        "parentTheme": "@scandipwa/scandipwa",
        ...
    },
    ...
}

A theme can override files of a parent theme. Learn more about overriding a parent theme in the File overrides guide.

Theme Webpack alias

In previous versions of ScandiPWA, the import from parent theme looked the following way:

import { AddToCart } from 'SourceComponent/AddToCart/AddToCart.component';

You may have noticed the SourceComponent alias appearing in the begging of the import. This allows to define shorter import paths. This alias is composed from a folder inside of the src and the prefix of the theme. The @scandipwa/scandipwa theme has a prefix Source . The src folders which support this mapping are:

Folder alias	Path from theme root	Purpose
Style	./src/style	Global styles
Component	./src/component	React component definitions
Route	./src/route	Router pages definitions
Util	./src/util	Utility functions
Query	./src/query	GraphQL query definitions
Type	./src/type	React prop-type definitions
Store	./src/store	Redux store definitions

To define a Webpack alias for your theme, you are required to define the scandipwa.themeAlias field in package.json. The value you define in this field will be used as your theme prefix. You can do it like this:

{
    "scandipwa": {
        "type": "theme",
        "themeAlias": "Source",
        ...
    }
    ...
}

Setting the Webpack alias for a theme which is not used as a parent is not required. This field only comes into play, when a theme is selected as a parent theme for another one.

There is however, another way to import files from a parent theme. You can always import the file from the NPM package of your parent theme directly. Like so:

import { AddToCart } from '@scandipwa/scandipwa/src/component/AddToCart/AddToCart.component'; 

Both of these approaches are valid, but for consistency, we recommend using Webpack aliases.