> 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

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:

![](/files/-MNcQWobHmjVNubImvU3)

## 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 %}