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:

Detailed overriding examples

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.

Overriding how-to guides

In some cases, overriding (i.e. Pages, Redux stores, MyAccount) might require some additional attention. Check the following article to learn how complete some common tasks: