[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 components 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-components/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/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-components/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-components/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-components/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-components/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-components/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-components/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components)

[Building a horizontal Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-building-a-horizontal-product-summary)

[Building a Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-building-a-shelf)

[Configuring custom images for the SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector)

[Creating a native form for your store users](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-creating-a-native-form-for-your-store-users)

[Creating a product availability form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-creating-a-product-availability-form)

[Overriding native app blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-overriding-native-app-blocks)

[Using Sandbox blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-using-sandbox-blocks)

[Using the Assets Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-using-the-assets-builder)

[Setting up Delivery Promise components (Beta)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/setting-up-delivery-promise-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/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-components/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/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-components/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-components/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-components/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/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-components/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-components/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-components/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-components/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/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-components/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components)

[Building a horizontal Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-building-a-horizontal-product-summary)

[Building a Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-building-a-shelf)

[Configuring custom images for the SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector)

[Creating a native form for your store users](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-creating-a-native-form-for-your-store-users)

[Creating a product availability form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-creating-a-product-availability-form)

[Overriding native app blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-overriding-native-app-blocks)

[Using Sandbox blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-using-sandbox-blocks)

[Using the Assets Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/vtex-io-documentation-using-the-assets-builder)

[Setting up Delivery Promise components (Beta)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/setting-up-delivery-promise-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/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-components/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/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-components/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-components/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-components/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/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-components/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-components/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-components/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-components/docs/guides/storefront-best-practices)

---

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

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components)

Using components

Discover how components in VTEX IO Store Framework enable you to build your storefront, from basic elements to advanced customizations.

Components are building blocks used to create storefronts and admin apps. They are built on the [VTEX IO development platform](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io) using [React](https://read.calvincode.net/reader?url=https://react.dev/) technology.

These components are modular, reusable pieces of code that encapsulate specific features and can be combined to create complex user interfaces. They range from basic elements, such as buttons and forms, to more complex ones, such as product carousels and navigation bars. Conceptually, components resemble JavaScript functions: they take arbitrary inputs, referred to as `props`, and return React elements that articulate what should be displayed on the screen.

You can use our [native components](#native-components), customize them as needed, or even [create your own components](#custom-components) to meet the specific needs of your projects on the VTEX IO platform.

In the guides of this section, you will explore how to leverage components to create customizable storefronts.

## Before you begin

### Develop your Store Theme

Make sure your store has a [Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) developed following the [Storefront](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-3) guide.

### Check the builders

Check if the builders are properly installed in your Store Theme. To use builders, your account must have at least version `vtex.builder-hub@0.293.4` installed. Also, you need to specify them in the app's `manifest.json` file. Learn more in [Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-builders).

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.

### Learn about VTEX IO apps

Familiarize yourself with [VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/vtex-io-apps) and learn how to build custom solutions following the guide [Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io).

## Essential concepts

A deep understanding of native and custom components is important for using them more effectively.

### Native components

Within the VTEX IO ecosystem, different types of components address different aspects of store development. Below are the main types of components:

* [**Basic components**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/basic-components): Reusable UI elements such as buttons, forms, input fields, and other fundamental interface elements. These components provide the building blocks for creating more complex UI elements and features.

The [Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary) exemplifies a basic storefront component, summarizing essential product information like name, price, and image, which can be seamlessly integrated into other store blocks, such as the [Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shelf).

* [**Store Components**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-components): Collection of components that can be used to create or extend other VTEX apps, aiming to improve the functionality and appearance of the storefront. They cover a range of elements, including product displays, navigation bars, checkout processes, and category pages. Some components in this collection offer advanced features, such as product recommendations, search filters, and personalized content delivery.

### Custom components

When building a [store theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme), you can leverage existing VTEX IO apps or create custom apps to add new components and extend the platform features.

See our guide about how to [develop an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app).

## Guides in this section

[Building a horizontal Product SummaryDiscover the process of building a horizontal Product Summary.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-horizontal-product-summary)[Building a ShelfUnderstand how to build and customize shelves to display products on your store’s pages.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-building-a-shelf)[Configuring custom images for the SKU SelectorLearn how to customize the images for your SKU Selector.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-configuring-custom-images-for-the-sku-selector)[Creating a native form for your store usersDiscover how to customize and integrate forms directly on your store.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-native-form-for-your-store-users)[Creating a product availability formLearn how to create a product availability form with this step-by-step guide.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-product-availability-form)[Using Sandbox blocksLearn how to use Sandbox blocks to test different components in a safe environment.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-sandbox-blocks)[Using the Assets BuilderExplore how to manage assets in your VTEX IO projects using the Assets builder.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-the-assets-builder)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/_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/store-framework-using-components.md)

[Customizing the Header and Footer blocks by page« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components//docs/guides/vtex-io-documentation-customizing-the-header-and-footer-blocks-by-page)[Building a horizontal Product SummaryNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components//docs/guides/vtex-io-documentation-building-a-horizontal-product-summary)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/_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-components/docs/guides/store-framework-using-components%23before-you-begin)

[Develop your Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components%23develop-your-store-theme)[Check the builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components%23check-the-builders)[Learn about VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components%23learn-about-vtex-io-apps)

[Essential concepts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components%23essential-concepts)

[Native components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components%23native-components)[Custom components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components%23custom-components)

[Guides in this section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components%23guides-in-this-section)

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/store-framework-using-components.md)

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-components/docs/guides/store-framework-using-components%23before-you-begin)

[Develop your Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components%23develop-your-store-theme)[Check the builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components%23check-the-builders)[Learn about VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components%23learn-about-vtex-io-apps)

[Essential concepts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components%23essential-concepts)

[Native components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components%23native-components)[Custom components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components%23custom-components)

[Guides in this section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-components/docs/guides/store-framework-using-components%23guides-in-this-section)

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 trustpilot 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.trustpilot/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/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.trustpilot/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/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.trustpilot/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/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.trustpilot/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/pixel-apps)

[Alexa Certify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.alexa-certify-code)

[Audara](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.audara)

[Bluecore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.bluecore)

[Blueknow app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.blueknow)

[BTG360](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.btg360)

[Cookiebot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.cookiebot)

[Cookie Script](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.cookie-script)

[CyberSource Fingerprint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.cybersource-fingerprint)

[Elfsight](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.elfsight)

[Facebook pixel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.facebook-pixel)

[Facebook Domain Verification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.facebook-domain-verification)

[Google Adwords](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.google-adwords)

[Google Customer Reviews](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.google-customer-reviews)

[Hotjar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.hotjar)

[Idea CRM](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.ideacrm)

[Iubenda](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.iubenda)

[JivoChat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.jivochat)

[Kelkoo app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.kelkoo)

[LogRocket](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.logrocket)

[Lucky Orange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.lucky-orange)

[Search Console](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.google-search-console)

[Shareasale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.shareasale)

[smarthint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.smarthint)

[Suiteshare](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.suite-share)

[Tawk.to](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.tawk-to)

[Trustpilot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.trustpilot)

[Zendesk Chat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.zendesk-chat)

[Zopim](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.zopim)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.my-account)

---

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

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/troubleshooting)

---

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

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/pixel-apps)

[Alexa Certify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.alexa-certify-code)

[Audara](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.audara)

[Bluecore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.bluecore)

[Blueknow app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.blueknow)

[BTG360](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.btg360)

[Cookiebot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.cookiebot)

[Cookie Script](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.cookie-script)

[CyberSource Fingerprint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.cybersource-fingerprint)

[Elfsight](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.elfsight)

[Facebook pixel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.facebook-pixel)

[Facebook Domain Verification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.facebook-domain-verification)

[Google Adwords](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.google-adwords)

[Google Customer Reviews](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.google-customer-reviews)

[Hotjar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.hotjar)

[Idea CRM](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.ideacrm)

[Iubenda](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.iubenda)

[JivoChat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.jivochat)

[Kelkoo app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.kelkoo)

[LogRocket](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.logrocket)

[Lucky Orange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.lucky-orange)

[Search Console](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.google-search-console)

[Shareasale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.shareasale)

[smarthint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.smarthint)

[Suiteshare](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.suite-share)

[Tawk.to](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.tawk-to)

[Trustpilot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.trustpilot)

[Zendesk Chat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.zendesk-chat)

[Zopim](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.zopim)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.my-account)

---

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

---

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

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/guides/pixel-apps)

Trustpilot

Official extension

Version: 2.2.2

Latest version: 2.2.2

[![{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

This is a Trustpilot first-party integration app. The [solution](https://read.calvincode.net/reader?url=https://www.trustpilot.com/) provides a review platform for your store.

## Configuration

1. [Install](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/installing-an-app/) the `vtex.trustpilot` app in the VTEX account in which you are working.
2. In your VTEX account's admin, open the **App** section and select the Trustpilot App box.
3. Fill in your integration key, provided by Trustpilot, in the fields.
4. Save your changes.

### Using the Trustpilot's Widget component

The `trustpilot` app also enables Truspilot's widget component to be added to your store theme by adding the `trustpilot-micro-review-count` block in a template of your choosing.

1. Using a [Developer workspace](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/creating-a-development-workspace/), open your store's theme directory in your code editor and add the `shop-review-interfaces` app as a dependency in the `manifest.json` file:

`1

 "dependencies": {

2

+ "vtex.shop-review-interfaces": "0.x"

3

 }

`

1. Add the `shop-review-badge` block, exported by the `shop-review-interfaces`, in a template and block of your choosing, such as the Footer.
2. Save your changes and [link](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/linking-an-app/) the store theme app.
3. Once your changes linked, access the admin's Site Editor using the same Developer workspace (`{workspaceName}-{accountName}.myvtex.com/admin/cms/site-editor`) and look for the `Trustpilot - Generic Widget` block.
4. When editing the block, add the widget's `template id` and `business unit id` value provided by the [Trustpilot's widget](https://read.calvincode.net/reader?url=https://widgets-trustboxinstructions.b2b.trustpilot.com/%23/trustbox/eyJjb2RlSGVhZCI6IjwhLS0gVHJ1c3RCb3ggc2NyaXB0IC0tPlxuPHNjcmlwdCB0eXBlPVwidGV4dC9qYXZhc2NyaXB0XCIgc3JjPVwiLy93aWRnZXQudHJ1c3RwaWxvdC5jb20vYm9vdHN0cmFwL3Y1L3RwLndpZGdldC5ib290c3RyYXAubWluLmpzXCIgYXN5bmM%252BPC9zY3JpcHQ%252BXG48IS0tIEVuZCBUcnVzdEJveCBzY3JpcHQgLS0%252BIiwiY29kZUJvZHkiOiI8IS0tIFRydXN0Qm94IHdpZGdldCAtIE1pY3JvIFJldmlldyBDb3VudCAtLT5cbjxkaXYgY2xhc3M9XCJ0cnVzdHBpbG90LXdpZGdldFwiIGRhdGEtbG9jYWxlPVwiaXQtSVRcIiBkYXRhLXRlbXBsYXRlLWlkPVwiNTQxOWI2YThiMGQwNGEwNzY0NDZhOWFkXCIgZGF0YS1idXNpbmVzc3VuaXQtaWQ9XCI1ZTc0ZTJkYjYwMGQxYTAwMDFiZTE1ODlcIiBkYXRhLXN0eWxlLWhlaWdodD1cIjI0cHhcIiBkYXRhLXN0eWxlLXdpZHRoPVwiMTAwJVwiIGRhdGEtdGhlbWU9XCJsaWdodFwiPlxuICA8YSBocmVmPVwiaHR0cHM6Ly9pdC50cnVzdHBpbG90LmNvbS9yZXZpZXcvbWlyaWFkZS5jb21cIiB0YXJnZXQ9XCJfYmxhbmtcIiByZWw9XCJub29wZW5lclwiPlRydXN0cGlsb3Q8L2E%252BXG48L2Rpdj5cbjwhLS0gRW5kIFRydXN0Qm94IHdpZGdldCAtLT4iLCJ0cnVzdEJveE5hbWUiOiJNaWNybyBSZXZpZXcgQ291bnQiLCJsb2NhbGUiOiJpdC1JVCJ9).
5. Save your changes.
6. Access your store's website using the Developer workspace to check out the new component. If no more changes are desired, repeat the steps above in a [Production workspace](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/creating-a-production-workspace/) and then [promote it to Master](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/promoting-a-workspace-to-master).

:information\_source: _The integration key must be provided by Trustpilot._

The `trustpilot` app also enables Truspilot's widgets to be added to your store theme by inserting the `shop-review-badge` interface in your layout and then using the `trustpilot-widget` block in a template of your choosing.

| Interface         | Block             | Description                             |
| ----------------- | ----------------- | --------------------------------------- |
| shop-review-badge | trustpilot-widget | Adds a Trustpilot widget in your store. |

## Block without badge

To use widget without `shop-review-badge` to landing pages, for example, you can use `trustpilot-widget`. Therefore, you need to add the following in the manifest.json file.

`1

 "peerDependencies": {

2

+ "vtex.trustpilot": "2.x"

3

 }

`

## `trustpilot-widget` as props

`1

{

2

 "trustpilot-widget#home":{

3

 "title":"Widget TrustPilot",

4

 "props":{

5

 "width":"100%",

6

 "height":"240px",

7

 "theme":"light",

8

 "stars":"4,5",

9

 "tag":"cart",

10

 "businessUnitId":"597a23fwffdsfe05a793fe",

11

 "templateId":"5419b6a8b0d04a076446a9ad"

12

 }

13

 }

14

}

`

| Prop name      | Type   | Description                                                                                | Default value            |
| -------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
| width          | string | Change width of template                                                                                | undefined                |
| height         | string | Change height of template                                                                                | undefined                |
| theme          | string | Change theme of template light or dark                                                                                | undefined                |
| stars          | string | Change stars stock of template                                                                                | undefined                |
| tag            | string | Change tag of template. More info [here](https://read.calvincode.net/reader?url=https://support.trustpilot.com/hc/en-us/articles/203840856-Tag-your-service-reviews) | undefined                |
| businessUnitId | string | Set your business code                                                                                | undefined                |
| templateId     | string | Set your template ID                                                                                | 5419b6a8b0d04a076446a9ad |

[Tawk.to« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.tawk-to)[Zendesk ChatNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.zendesk-chat)

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.trustpilot/docs/apps/vtex.trustpilot%23configuration)

[Using the Trustpilot's Widget component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.trustpilot%23using-the-trustpilots-widget-component)

[Block without badge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.trustpilot%23block-without-badge)

[trustpilot-widget as props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot/docs/apps/vtex.trustpilot%23trustpilot-widget-as-props)

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=)


[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 sales associate code 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/sales-associate-code/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/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/sales-associate-code/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/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/sales-associate-code/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/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/sales-associate-code/updates/release-notes)

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/how-to-customize-vtex-sales-app)

[Change VTEX Sales App language](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/change-vtex-sales-app-language)

[Hide anonymous customer option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/hide-anonymous-customer-option)

[Define payment methods displayed on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/define-payment-methods-displayed-on-vtex-sales-app)

[Enable the Observation field in the order screen](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/enable-the-remarks-field-in-the-order-screen)

[Enable the sales associate code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/sales-associate-code)

[Enable cart transfer and capture between devices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/enable-cart-transfer-between-devices)

[Force stock availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/force-stock-availability)

[Add extra text to the order summary print](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/add-extra-text-to-the-order-print)

[Hide Print order and Reprint receipt buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/hide-print-order-and-reprint-receipt-buttons)

[Enable partial cancellation for Debit or Credit Direct sales](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/enable-partial-cancellation)

[Hide cancellation buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/hide-cancellation-buttons)

[Allow manual prices on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/allow-manual-prices-on-vtex-sales-app)

[Integration VTEX Sales App Local stock sale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/integration-vtex-sales-app-local-stock-sale)

---

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/sales-associate-code/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/troubleshooting)

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/how-to-customize-vtex-sales-app)

[Change VTEX Sales App language](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/change-vtex-sales-app-language)

[Hide anonymous customer option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/hide-anonymous-customer-option)

[Define payment methods displayed on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/define-payment-methods-displayed-on-vtex-sales-app)

[Enable the Observation field in the order screen](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/enable-the-remarks-field-in-the-order-screen)

[Enable the sales associate code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/sales-associate-code)

[Enable cart transfer and capture between devices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/enable-cart-transfer-between-devices)

[Force stock availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/force-stock-availability)

[Add extra text to the order summary print](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/add-extra-text-to-the-order-print)

[Hide Print order and Reprint receipt buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/hide-print-order-and-reprint-receipt-buttons)

[Enable partial cancellation for Debit or Credit Direct sales](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/enable-partial-cancellation)

[Hide cancellation buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/hide-cancellation-buttons)

[Allow manual prices on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/allow-manual-prices-on-vtex-sales-app)

[Integration VTEX Sales App Local stock sale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/integration-vtex-sales-app-local-stock-sale)

---

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/sales-associate-code/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides)

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/how-to-customize-vtex-sales-app)

[Enable the sales associate code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/sales-associate-code)

Enable the sales associate code

Learn how to enable the sales associate code.

> The sales associate code is enabled by default for stores that start using the VTEX Sales App. This article is intended for stores that may have disabled this field due to customizations. To retrieve the sales associate code, use the [Get order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api-pii-version%23get-/api/orders/pvt/document/-orderId-) endpoint and check the `salesAssociateId` value inside the `merchantContextData` object.

The sales associate code field is an additional customization of the [**Observation** field](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/enable-the-remarks-field-in-the-order-screen) that turns this component into a field where vendors should insert their code during the purchase flow.

Once enabled, this field becomes a mandatory step in the purchase flow, meaning that the order can only be completed if the `sales associate code` field is filled with a personal code.

![{"base64":"  ","img":{"width":1225,"height":591,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":105961,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/sales-associate-code-0.PNG"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/sales-associate-code-0.PNG)

## Prerequisites

Before customizing the **sales associate code** field, you must enable the **Observation** field on VTEX Sales App. Check [this article](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/enable-the-remarks-field-in-the-order-screen) to learn how to do that.

## Edit the `checkout-instore-custom.js` file

After enabling the **Observation** field, you should [configure the sales associate code](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/vtex-sales-app-customizations--1z9kBm12oBPyVNDo1ivVc2/5kNtS80hbBGg58jMeF8CRv) by editing the `checkout-instore-custom.js` file.

You can configure the JavaScript file according to your needs, using different value combinations for the three properties: `type`, `skipValidation`, and `mask`.

`` 1

{

2

 "data": {

3

 "0-0": "`type`",

4

 "1-0": "`skipValidation`",

5

 "2-0": "`mask`",

6

 "h-0": "Property",

7

 "0-1": "string",

8

 "0-2": "Defines the ‘vendors’ field format. The possible values are `text` and `textarea`, for big text blocks. `input`, a text field for simple keys. `select`, showing a combobox to quickly select.",

9

 "1-1": "boolean",

10

 "2-2": "A regular variable expression that applies a validation logic to the type property value. In other words, the person responsible for editing the `window.INSTORE_CONFIG` object can create the variable expression they find most appropriate for the sales rep code.",

11

 "1-2": "Activates the validation performed via Master Data.",

12

 "2-1": "string",

13

 "h-2": "Description",

14

 "h-1": "Type",

15

 "3-0": "`autofill`",

16

 "3-1": "boolean",

17

 "3-2": "Defines whether VTEX Sales App will automatically insert the sales associate code when the Social Selling feature is active.\n\nWhen this value is `true` (default), the vendor code is automatically filled by VTEX Sales App.\n\nWhen this value is `false`, the operator must inform the vendor code manually.\n\nThis flag does not change any behavior when Social Selling is not activated."

18

 },

19

 "cols": 3,

20

 "rows": 4

21

}

 ``

> Even though all properties are not mandatory, the JavaScript file must have at least one of them described in the code.

Otherwise, the customization will fail. To fill the `mask` field, you must create a [regular expression](https://read.calvincode.net/reader?url=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular%5FExpressions). As the sales associate code is built on JavaScript, your regular expression should follow the same programming language as well.

In VTEX, the JavaScript regular expressions follow the ECMAScript flavor. Check the step-by-step guide to constructing a regular expression according to this pattern in the [Mozilla documentation](https://read.calvincode.net/reader?url=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global%5FObjects/RegExp).

> Once the regular expression is complete, a pro tip is to analyze the mask field functioning on a test workspace before deploying the code on the master. We recommend testing it on [Regular Expressions 101](https://read.calvincode.net/reader?url=https://regex101.com/).

### Example code

`1

window.INSTORE_CONFIG = {

2

 noteAsVendorCode: {

3

 type: 'input',

4

 skipValidation: true,

5

 mask: '^(HE|TU)[A-Za-z0-9]{5,8}$',

6

 autofill: false,

7

 },

8

}

`

### Use cases

* **Validation according to sales associate's document ID**: in this example, the regular expression applied in the mask expresses that the code has three numbers and two letters.

`1

window.INSTORE_CONFIG = {

2

 noteAsVendorCode: {

3

 type: 'text',

4

 skipValidation: true,

5

 mask: '^\\d{3}[a-zA-Z]{2}$',

6

 autofill: false,

7

 },

8

}

`

* **Validation only on Master Data**: the following regular expression doesn't have any mask applied on the JS file, which means that the system will proceed with the Master Data's validation.

`1

window.INSTORE_CONFIG = {

2

 noteAsVendorCode: {

3

 type: 'text',

4

 skipValidation: false,

5

 autofill: false,

6

 },

7

}

`

* **Validation according to the mask only**: in this example, the regular expression applied in the mask expresses that the code has two numbers.

`1

window.INSTORE_CONFIG = {

2

 noteAsVendorCode: {

3

 type: 'text',

4

 skipValidation: true,

5

 mask: '^\\d{2}$',

6

 autofill: false,

7

 },

8

}

`

> In case of doubt, contact Customer Excellence by creating a [support ticket](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/abrir-chamados-para-o-suporte-vtex--16yOEqpO32UQYygSmMSSAM).

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77300325%3Fv%3D4%26w=64%26q=75)](https://github.com/Isabella-Veloso)

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

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-Sales-App/how-to-customize-vtex-sales-app/sales-associate-code.md)

[Enable the Observation field in the order screen« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code//docs/guides/enable-the-remarks-field-in-the-order-screen)[Enable cart transfer and capture between devicesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code//docs/guides/enable-cart-transfer-between-devices)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77300325%3Fv%3D4%26w=64%26q=75)](https://github.com/Isabella-Veloso)

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

ON THIS PAGE

[Prerequisites](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/sales-associate-code%23prerequisites)

[Edit the checkout-instore-custom.js file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/sales-associate-code%23edit-the-checkout-instore-customjs-file)

[Example code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/sales-associate-code%23example-code)[Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/sales-associate-code%23use-cases)

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-Sales-App/how-to-customize-vtex-sales-app/sales-associate-code.md)

Copy page

On this page

ON THIS PAGE

[Prerequisites](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/sales-associate-code%23prerequisites)

[Edit the checkout-instore-custom.js file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/sales-associate-code%23edit-the-checkout-instore-customjs-file)

[Example code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/sales-associate-code%23example-code)[Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/sales-associate-code/docs/guides/sales-associate-code%23use-cases)

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=)