Override Mechanism

Create a customized theme based on ScandiPWA

Overriding files in the theme is a great solution for store owners and developers that want to have a theme based on ScandiPWA, but need to customize it for their needs. Using the override mechanism, you are able to override any part of the ScandiPWA theme, including styling, user interaction, page structure, or custom functionality. Any part that you don't need to override will fallback to the default ScandiPWA implementation.

Watch video tutorial / showcase by following the link bellow!

The Override Mechanism enables you to override any JavaScript or SCSS stylesheet file, while keeping what you want to keep from the original file. You can of course create new files and use them in the files you override. Using this mechanism, you will be able to:

  • Change the layout or styling of any component or page

  • Modify any component's behavior

  • Add new components with custom functionality

  • Add new pages to your application

  • Remove any unwanted functionality

  • ...and more!

The Override Mechanism is designed to be used for developing one specific theme. If you want to develop an extension that can be installed on multiple themes, take a look at the Plugin Mechanism, which can be used to develop reusable plugins.

Override Mechanism Overview

The Override Mechanism is implemented using JS imports.

The ScandiPWA theme provides default Components, Routes, redux Stores, and other files. These are imported by default when an import uses the Component, Route or Store aliases, respectively. This is what enables the ScandiPWA theme to work even without any theme overriding code – what you see when running a blank ScandiPWA theme install is the default implementation of various components.

For example, when importing from Component/ProductCard, the ScandiPWA implementation of the Product Cart is resolved:

// unless ProductCard overridden, this will resolve to the default
// ScandiPWA implementation of the ProductCard component
import ProductCard from 'Component/ProductCard/ProductCard.component';

However, Component is just a magic alias that automatically selects the overridden component if you have provided it. If you were to override it, all imports of ProductCard, such as the one above, would now resolve to your custom component. You can override any file – Javascript or SCSS – in the theme this way.

Contents

If you want to override and extend a JavaScript file, see Overriding JavaScript. If you want to override styles, see Overriding Styles. You can also override the index.html file.

How-to Guides provide examples of how the Override Mechanism can be used for common tasks.