Overriding JavaScript
Override JavaScript files using the ScandiPWA Override Mechanism
When developing a ScandiPWA-based theme, you have the ability to override any JavaScript file and its exports. To override a JavaScript file, create a new file in your theme src directory matching the path of the file you want to override. For example, if you want to override the theme file in component/ProductCard/ProductCard.component.js, create a file with the same path in your theme's source directory, src:
override: component/ProductCard/ProductCard.component.js
import { PureComponent } from 'react';
export class ProductCard extends PureComponent {
render() {
return (
<p>
We have overridden the ProductCard component!
</p>
);
}
}
export default ProductCard;
Now, any import using the alias Component/ProductCard/Component/ProductCard.component will resolve to your newly-created file. Indeed, if you check the product list page, you will see the updated component:

Despite the general rule being simple, it is important to learn more details. See the detailed guide on overriding class-based and non-class-based files below.

Specific examples of how to use the Override Mechanism for common tasks can be found in our tutorial!
Copy link
On this page
Detailed overriding examples
Overriding Tutorial