> For the complete documentation index, see [llms.txt](https://docs.scandipwa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scandipwa.com/developing-with-scandi/override-mechanism/extending-javascript.md).

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

{% 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="/pages/-MV1eywHRTP7i-3joJLh" %}
[Overriding classes](/developing-with-scandi/override-mechanism/extending-javascript/overriding-classes.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MV1f2OzsGu5HXo42hWZ" %}
[Overriding non-classes](/developing-with-scandi/override-mechanism/extending-javascript/overriding-non-classes.md)
{% endcontent-ref %}

## Overriding Tutorial

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

{% content-ref url="/pages/-MNcSxs181lV3ZBK6-HK" %}
[Broken mention](broken://pages/-MNcSxs181lV3ZBK6-HK)
{% endcontent-ref %}