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!
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
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
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 componentimport ProductCard from 'Component/ProductCard/ProductCard.component';
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
How-to Guides provide examples of how the Override Mechanism can be used for common tasks.