[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides vtex io documentation making a custom component available in site editor in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-working-with-site-editor)

[Integrating a frontend app with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor)

[Making a custom component available in Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor)

[Site Editor schema examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-site-editor-schema-examples)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-working-with-site-editor)

[Integrating a frontend app with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor)

[Making a custom component available in Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor)

[Site Editor schema examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-site-editor-schema-examples)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/storefront-best-practices)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/storefront-development)

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/store-framework-working-with-site-editor)

[Making a custom component available in Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor)

Making a custom component available in Site Editor

Learn how to allow component customization directly in Site Editor.

To allow component customization in [Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-site-editor), you need to define the schema for each editable property and reference these definitions in the `interfaces.json` file.

In this guide, you will learn how to configure the schema definitions in your components, allowing users to customize them directly in Site Editor.

> Explore practical examples of using schemas to configure custom components in [Site Editor schema examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-site-editor-schema-examples).

## Before you begin

* Ensure your store has a [Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) developed with [VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io) and [Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework), following the [Storefront](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3) guide.
* Check if the [Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-builders) are properly installed in your Store Theme. You must have at least the following builders configured:
   * [Store builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-builder): Enables the development of Store Framework storefronts.
   * [React builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-react-builder): Used to develop apps with [React](https://read.calvincode.net/reader?url=https://react.dev/) when your project requires customized frontend solutions.

## Instructions

### Step 1 - Creating the files for your custom component

For your block to accept user customizations, export the React component responsible for the block. This component should include a schema that allows editing directly in Site Editor.

1. Create a new folder in the `/react` root directory. Follow the `react/components/{ComponentName}/index.tsx` pattern. See alongside a folder structure example for a component named `CustomComponent`.
2. Open the `index.tsx` file and define your custom component.

### Step 2 - Defining the component interface

The `CustomComponentProps` defines the type for the component’s props, specifying `title` and `subtitle` as the expected string props.

### Step 3 - Declaring the component

The functional component `CustomComponent` takes an object with `title` and `subtitle` props as its argument, allowing easy access to these props.

### Step 4 - Defining the component props

The `defaultProps` specifies the default values for the props of the `CustomComponent`. If the user does not define props in Site Editor, the `defaultProps` values are returned.

### Step 5 - Configuring the Site Editor schema

The `schema` defines the structure and types of the props, allowing the component to be customized in Site Editor.

> Ensure you define the `defaultProps` and `schema` objects for the component in [JSON Schema](https://read.calvincode.net/reader?url=https://json-schema.org/) format, a declarative language that provides a standardized way to describe and validate JSON data.

### Step 6 - Exporting the component

By setting `CustomComponent` as the default export, you can import it into other parts of the app or other apps. For better organization and management, especially for apps with many custom components, we recommend creating separate folders for each component within `react/components` and then exporting them from individual files in the `/react` root directory.

In the `/react` root directory, create a new file to export your component:

### Step 7 - Updating the `interfaces.json` file

Now, you need to reference your custom component in the [interfaces.json file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-interface) within the `/store` folder. This file establishes the relationship between a block and a React component, allowing the [store builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-builder) to build the store's frontend.

In the app repository where you are developing your custom component, open the `interfaces.json` file within the `/store` folder. Declare the schema definitions for your component as follows:

> In this schema, the block identifier is named `custom-component`. Choose a name that clearly describes the component it references.

### Step 8 - Using the component in a store page

To use the new component, declare it in the desired page template. For example, to use the `CustomComponent` on the store’s main page, the `custom-component` block must be declared within the `home` block:

By [linking the app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app), your component will be available for visualization and test in Site Editor within the corresponding [development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace).

### Step 9 - Making your component available in the live store’s Site Editor

After configuring and testing your component, deploy the new version of your app to make it available in the live store’s Site Editor.

Learn how to make it available in the [Deploying a new app version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available) guide.

When the process is finished, the component will appear as follows in the live account’s Site Editor:

![{"base64":"  ","img":{"width":313,"height":332,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":11163,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Storefront-Guides/images/default-schema.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Storefront-Guides/images/default-schema.png)

`1

 react

2

 ┣ 📂 components

3

 ┣ 📂 CustomComponent

4

 ┗ 📄 index.tsx

`

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-making-a-custom-component-available-in-site-editor.mdx)

[Integrating a frontend app with Site Editor« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor//docs/guides/vtex-io-documentation-integrating-frontend-app-with-site-editor)[Site Editor schema examplesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor//docs/guides/vtex-io-documentation-site-editor-schema-examples)

See also

[Storefront appsGuides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)[Site Editor schema examplesGuides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-site-editor-schema-examples)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23instructions)

[Step 1 - Creating the files for your custom component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-1-creating-the-files-for-your-custom-component)[Step 2 - Defining the component interface](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-2-defining-the-component-interface)[Step 3 - Declaring the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-3-declaring-the-component)[Step 4 - Defining the component props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-4-defining-the-component-props)[Step 5 - Configuring the Site Editor schema](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-5-configuring-the-site-editor-schema)[Step 6 - Exporting the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-6-exporting-the-component)[Step 7 - Updating the interfaces.json file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-7-updating-the-interfacesjson-file)[Step 8 - Using the component in a store page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-8-using-the-component-in-a-store-page)[Step 9 - Making your component available in the live store’s Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-9-making-your-component-available-in-the-live-stores-site-editor)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-making-a-custom-component-available-in-site-editor.mdx)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23instructions)

[Step 1 - Creating the files for your custom component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-1-creating-the-files-for-your-custom-component)[Step 2 - Defining the component interface](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-2-defining-the-component-interface)[Step 3 - Declaring the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-3-declaring-the-component)[Step 4 - Defining the component props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-4-defining-the-component-props)[Step 5 - Configuring the Site Editor schema](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-5-configuring-the-site-editor-schema)[Step 6 - Exporting the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-6-exporting-the-component)[Step 7 - Updating the interfaces.json file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-7-updating-the-interfacesjson-file)[Step 8 - Using the component in a store page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-8-using-the-component-in-a-store-page)[Step 9 - Making your component available in the live store’s Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor/docs/guides/vtex-io-documentation-making-a-custom-component-available-in-site-editor%23step-9-making-your-component-available-in-the-live-stores-site-editor)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides master data v2 guides in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/master-data)

[Understanding Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/understanding-master-data)

[Master Data best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/master-data-best-practices)

[Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/master-data-v2)

Schemas

Triggers

[Master Data v2 document saving flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/master-data-v2-document-saving-flow)

[Creating relationships between data entities using Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/creating-relationships-between-data-entities-using-master-data-v2)

[Using dynamic expressions on Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/using-dynamic-expressions-on-master-data-v2)

[Searching by geocoordinates in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/searching-by-geocoordinates-in-master-data-v2)

[Setting up alternate keys in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/setting-up-alternate-keys-in-master-data-v2)

[Setting up an auto increment field in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/setting-up-an-auto-increment-field-in-master-data-v2)

[Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/master-data-v1)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/master-data)

[Understanding Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/understanding-master-data)

[Master Data best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/master-data-best-practices)

[Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/master-data-v2)

Schemas

Triggers

[Master Data v2 document saving flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/master-data-v2-document-saving-flow)

[Creating relationships between data entities using Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/creating-relationships-between-data-entities-using-master-data-v2)

[Using dynamic expressions on Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/using-dynamic-expressions-on-master-data-v2)

[Searching by geocoordinates in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/searching-by-geocoordinates-in-master-data-v2)

[Setting up alternate keys in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/setting-up-alternate-keys-in-master-data-v2)

[Setting up an auto increment field in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/setting-up-an-auto-increment-field-in-master-data-v2)

[Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/master-data-v1)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides)

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/master-data)

[Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/docs/guides/master-data-v2)

v2 Guides

This section contains tutorials about Master Data v2\. Here you will find the following articles:

* [Using Master Data v2 triggers to interact with orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-master-data-v2-triggers-to-interact-with-orders)
* [Creating relationships between data entities using Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-relationships-between-data-entities-using-master-data-v2)
* [Setting up triggers on Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-triggers-on-master-data-v2)
* [Sending emails with triggers on Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sending-emails-with-triggers-on-master-data-v2)
* [Using dynamic expressions in Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-dynamic-expressions-on-master-data-v2)
* [Search by geocoordinates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-by-geo-coordinates)
* [Master Data v2 document saving flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-document-saving-flow)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Master-Data/master-data-v2/master-data-v2.md)

[Avoiding CORS in Master Data requests« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides//docs/guides/avoiding-cors-in-master-data-requests)[Schema LifecycleNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides//docs/guides/master-data-schema-lifecycle)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/master-data-v2-guides/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Master-Data/master-data-v2/master-data-v2.md)

Copy page

On this page

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides external search provider recipe in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/getting-started)

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/search-integration-guide)

[Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-overview)

[Specification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-specification)

[Recipe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-recipe)

[Reference Implementations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-reference)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/getting-started)

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/search-integration-guide)

[Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-overview)

[Specification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-specification)

[Recipe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-recipe)

[Reference Implementations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-reference)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides)

Integration Guides

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/search-integration-guide)

[Recipe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-recipe)

Implementing a Custom Search Resolver App

Supposing you want to integrate another search provider into VTEX, here are the steps you should follow to create an app that follows the VTEX Search Protocol:

1. Clone the VTEX Intelligent Search search resolver app: <https://github.com/vtex-apps/search-resolver/tree/v1.x>.
2. **TEMPORARY:** Uninstall any other search-resolver app that may be installed on the account you're using (`e.g: vtex.search-resolver@0.x`). You may need to do this in a separate workspace if the store is live
3. Change the `vendor` field on the app's `manifest.json` to map the account you're using.
4. Start changing the queries' resolvers implementations to retrieve and return the data from the external search engine you're integrating.

## Client

In VTEX IO, we have the concept of clients to abstract calling other services in a centralized class. If you've cloned the search resolver listed above, you will see that it grabs data by using the following client: <https://github.com/vtex-apps/search-resolver/blob/v1.x/node/clients/biggy-search.ts>. Change the implementation of this client to fetch data from the search provider that you want to integrate with.

## Resolvers

The main resolver file that you need to change is this <https://github.com/vtex-apps/search-resolver/blob/v1.x/node/resolvers/search/index.ts>. You can look for occurrences of `biggySearch` and change the data treatment to get the wanted behavior. Remember that you may want to leave some resolvers untouched and continue grabbing data from VTEX Catalog's APIs.

### Tips on Working with the Example

* Entries and files with `BiggySearchClient` should be modified and renamed accordingly to the search engine to be integrated.
* The main file to look at is `node/resolvers/search/index.ts`, where is implemented resolvers for search-related queries. It's important to notice that some resolvers **will not be modified** since they're connecting directly to VTEX APIs. This will be addressed on future releases of VTEX Search Protocol. You can find a list of all the queries to change the implementation in the specification section of this document.
* It's important to adapt the Typescript types into the code, because they're specific to VTEX Search.

## Troubleshooting

In case of any "Unknown errors", check if the version on `node/package.json` for the dependency `vtex.search-graphql` is up to date with the [latest version for the vtex.search-graphql app](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/search-graphql/blob/master/manifest.json%23L4). After changing the version on the URL, you need to run `yarn` inside the **node** folder before running `vtex link` again.

[Back](search-integration-guide)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7108339%3Fv%3D4%26w=64%26q=75)](https://github.com/brunoamui)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Integration-Guides/search-integration-guide/external-search-provider-recipe.md)

[Specification« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe//docs/guides/external-search-provider-specification)[Reference ImplementationsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe//docs/guides/external-search-provider-reference)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7108339%3Fv%3D4%26w=64%26q=75)](https://github.com/brunoamui)

ON THIS PAGE

[Client](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-recipe%23client)

[Resolvers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-recipe%23resolvers)

[Tips on Working with the Example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-recipe%23tips-on-working-with-the-example)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-recipe%23troubleshooting)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Integration-Guides/search-integration-guide/external-search-provider-recipe.md)

Copy page

On this page

ON THIS PAGE

[Client](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-recipe%23client)

[Resolvers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-recipe%23resolvers)

[Tips on Working with the Example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-recipe%23tips-on-working-with-the-example)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-search-provider-recipe/docs/guides/external-search-provider-recipe%23troubleshooting)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] How do I use the VTEX google drive import 0.x app? Provide documentation and configuration details.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/guides/vtex-io-deprecated-apps)

---

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/vtex-io-apps)

Google Drive Import

Official extension

Version: 0.6.1

Latest version: 0.6.1

> The specified version of the app (**0.x.0**) does not exist. This page is about the latest stable version, which is **0.6.1**.

This app allows SKU images to be bulk imported into the VTEX Catalog from a user's Google Drive._**Note**_ _Importing images supported by version 1 catalogs only._

## Configuration

1. [Install](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-installing-an-app) `vtex.google-drive-import` in the desired account.
2. In your account's admin dashboard, go to `Catalog > Google Drive Import`.
3. Follow the instructions provided on the admin page to grant access to your Google Drive and upload your images with the proper naming convention.

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-drive-import@0.x/docs/apps/vtex.google-drive-import@0.x%23configuration)

Was this helpful?

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)