This feature is in beta, and we're working to improve it. If you have any questions, please contact our Support.

VTEX Sales App Extensibility lets you customize the default assisted-sales journey with features that support your business requirements.

By using predefined extension points, you can integrate external APIs, use VTEX data, and add custom experiences to areas such as cart and checkout, the side menu, and the product details page.

In this guide, you'll learn how to set up Sales App extensions for your stores.

• Set up your FastStore monorepo. The monorepo uses a faststore.json file at the repository root to define module settings such as paths and ports for local development and production.

• Install the VTEX Sales App on your account, complete the onboarding in VTEX Admin, and add a sales associate linked to a store. For detailed instructions, see the guide VTEX Sales App - Basic settings.

Add the Sales App modules to your monorepo:

Ensure the following information is available:

• The store account name for which you're creating extensions.
• The module you want to initialize a project. In this case, it's sales-app.
• The path where you want to initialize the project.

Run the following commands in your terminal:

As an example, consider the account store-a and the path ./store-a/sales-app. Remember to fill in the prompts according to your project requirements:

After running the command, the folder is created at the root of your monorepo based on the path you provided. Your monorepo structure should look similar to this:

Project structure

The src/index.tsx file at the root of your project is the entry point for all VTEX Sales App extensions you create. It looks like this:

The defineExtensions function connects the extensions you create to the extension point where they should appear. You can create your extensions in separate files and then import them into index.tsx to keep your project organized.

This function also helps during development by showing available extension points with autocomplete and type-checking, making the setup easier and less error-prone. To build your extension, use the hooks, types, and helper functions available in the @vtex/sales-app package. For more information, see the Sales App extension hooks and types guide.

The src/components/Example.tsx file includes a sample extension point. You can import CSS files, such as Example.css, to define classes and make them available globally. Organize your code however best fits your project, either by separating implementation and styling into different files or by keeping everything in a single file. For additional information about CSS, refer to CSS styling in VTEX Sales App Extensibility

The faststore.json file should include a sales-app entry like the following:

The fsp create command updates faststore.json automatically. Review the generated values to make sure the account name, path, and port match your project.

Register the new project as a workspace in the root package.json file so the package manager can discover it and install dependencies correctly.

For example, if you're using Yarn, your package.json should include:

For more information, see your package manager's documentation on workspaces, such as the Yarn or npm documentation.

After a workspace is declared, run the install command at the root of the monorepo:

After installing the dependencies, start your storefront development environment with the CLI:

The VTEX Sales App is available at the /sales-app/checkout/cart path on the URL provided by the FastStore CLI. You should see a screen similar to this:

You can also access the VTEX Sales App locally using the path and port values defined in faststore.json. For example, if the file specifies port 3002, open http://localhost:3002/sales-app/checkout/cart.