# Overriding JavaScript

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`:

{% code title="override: component/ProductCard/ProductCard.component.js" %}

```jsx
import { PureComponent } from 'react';

export class ProductCard extends PureComponent {
    render() {
        return (
            <p>
                We have overridden the ProductCard component!
            </p>
        );
    }
}

export default ProductCard;
```

{% endcode %}

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:

![](https://4029840077-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNcGSsOTtbcSNK-Y1U1%2F-MNcO1kp0oKfjfz7Wwyg%2F-MNcQWobHmjVNubImvU3%2Fproduct-card-overriden.png?alt=media\&token=ffe6fa99-a072-43a0-8971-4318e2f9e62b)

## 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.

{% content-ref url="extending-javascript/overriding-classes" %}
[overriding-classes](https://docs.scandipwa.com/developing-with-scandi/override-mechanism/extending-javascript/overriding-classes)
{% endcontent-ref %}

{% content-ref url="extending-javascript/overriding-non-classes" %}
[overriding-non-classes](https://docs.scandipwa.com/developing-with-scandi/override-mechanism/extending-javascript/overriding-non-classes)
{% endcontent-ref %}

## Overriding Tutorial

Specific examples of how to use the Override Mechanism for common tasks can be found in our [tutorial](https://docs.scandipwa.com/tutorials/customizing-your-theme/customizing-javascript)!

{% content-ref url="broken-reference" %}
[Broken link](https://docs.scandipwa.com/developing-with-scandi/override-mechanism/broken-reference)
{% endcontent-ref %}