In this guide, you'll learn how to override the blocks provided by a native VTEX IO app with a custom app by configuring the store/plugins.json file. This approach allows custom apps to modify existing Store Framework blocks without changing the original app's code.

This is especially useful when you need to customize a page or component while maintaining compatibility with future updates of the original app. Follow the steps below to ensure your custom app works properly with existing dependencies and block schemas.

Add the corresponding native VTEX IO app as a dependency in the custom app's manifest.json file.

1. In your app's root directory, create the store folder.
2. In the store folder, create the interfaces.json file and define the app's schema by following the original native app. For example, if the native app block has example-child as required, the new block must also declare it:

In the store folder, create the plugins.json file within the key-value pairs of the blocks you want to override.

Declare the React component for your new block. In the example below, we added the greeting HELLO WORLD.

Link the app in the development workspace you're working in to see the changes.

Based on the given example, you'll see the following page when placing an order:

Once you finish developing and testing your custom app, deploy it to make it available in the live store. Learn how in the guide Deploying a new app version.