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

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Bazaarvoice

Official extension

Version: 2.4.2

Latest version: 2.4.2

[![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGPg4+Mz1Nfjl1L8f2MmAAz0A3OFonzpAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square","width":110,"height":20,"type":"svg"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)

## Description

This is a Bazaarvoice first party integration app that is responsible for showing the components related to Bazaarvoice Reviews in your store.

:loudspeaker: **Disclaimer:** Don't fork this project; use, contribute, or open issue with your feature request.

## Release schedule

| Release | Status              | Initial Release | Maintenance LTS Start | End-of-life | Store Compatibility |
| ------- | ------------------- | --------------- | --------------------- | ----------- | ------------------- |
| \[1.x\] | **Current Release** | 2019-06-14      | 2.x                   |             |                     |

See our [LTS policy](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/awesome-io%23lts-policy) for more information.

## Table of Contents

* [Usage](#usage)
   * [Configuration](#configuration)
   * [Styles API](#styles-api)
         * [CSS namespaces](#css-namespaces)
* [Troubleshooting](#troubleshooting)
* [Contributing](#contributing)
* [Tests](#tests)

## Usage

To use the bazaarvoice components add the [product reviews](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/product-review-interfaces/tree/master/example) blocks into your theme as you would with any other block.

#### Configuration

You can set some options of the Reviews component in the CMS:

| Prop name                             | Type   | Description                                                | Default value           |
| ------------------------------------- | ------ | ---------------------------------------------------------- | ----------------------- |
| Quantity of reviews per page          | number | the number of reviews that a review page will have         | 10                      |
| Quantity of reviews on the first page | number | the number of reviews that the first review page will have | Same as the value above |

### Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the `styles` builder and create an app styling CSS file and add `vtex.bazaarvoice` to your theme `peerDependencies`.

1. Add the `styles` builder to your `manifest.json`:

`1

 "builders": {

2

 "styles": "1.x"

3

 }

`

1. Add `vtex.bazaarvoice` to `peerDependencies` in your `manifest.json`:

`1

 "peerDependencies": {

2

 "vtex.bazaarvoice": "1.x"

3

 }

`

1. Create a file called `vtex.bazaarvoice.css` inside the `styles/css` folder. Add your custom styles:

`1

.container {

2

 margin-top: 10px;

3

}

`

#### CSS namespaces

Below, we describe the namespaces that are defined in the bazaarvoice.

| Token name                    | Description                                                    | Component Source                                                                                |
| ----------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| reviews                       | The reviews component                                          | [NoReviews](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/NoReviews.tsx), [Reviews](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/Reviews.js)                               |
| reviewsTitle                  | The reviews title                                              | [NoReviews](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/NoReviews.tsx), [Reviews](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/Reviews.js)                               |
| ratingSummary                 | Rating Summary                                                 | [RatingSummary](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/RatingSummary.js)                                                                                |
| ratingSummaryContainer        | Main container of the Rating Summary                           | [RatingSummary](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/RatingSummary.js)                                                                                |
| ratingSummaryStars            | Stars of the Rating Summary                                    | [RatingSummary](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/RatingSummary.js)                                                                                |
| ratingSummaryStars--loading   | Style of the Stars of the Rating Summary when they are loading | [RatingSummary](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/RatingSummary.js)                                                                                |
| ratingSummaryWrite            | 'Write Review' link next to the stars of the Summary Container | [RatingSummary](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/RatingSummary.js)                                                                                |
| ratingInline                  | Rating in Line                                                 | [RatingInLine](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/RatingInline.tsx)                                                                                |
| reviewForm                    | Review Form                                                    | [ReviewForm](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/ReviewForm.js)                                                                                |
| ratingStars                   | Container of the rating stars                                  | [Stars](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Stars.tsx)                                                                                |
| ratingStarsInactive           | Style of the Stars when they are inactive                      | [Stars](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Stars.tsx)                                                                                |
| ratingStarsActive             | Style of the Stars when they are active                        | [Stars](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Stars.tsx)                                                                                |
| histogramStarContainer        | Histogram Star Container                                       | [Histogram](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Histogram.tsx)                                                                                |
| histogramOuterContainer       | Histogram most external container                              | [Histogram](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Histogram.tsx)                                                                                |
| histogramContainer            | Histogram main container                                       | [Histogram](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Histogram.tsx)                                                                                |
| histogramLine                 | Histogram line containing the data of a certain amount of star | [Histogram](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Histogram.tsx)                                                                                |
| histogramStar                 | Histogram Star                                                 | [Histogram](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Histogram.tsx)                                                                                |
| histogramBar                  | Histogram Bar                                                  | [Histogram](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Histogram.tsx)                                                                                |
| histogramBarValue             | Histogram Bar filling                                          | [Histogram](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Histogram.tsx)                                                                                |
| histogramCount                | The count at the side of the histogram bar                     | [Histogram](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Histogram.tsx)                                                                                |
| secondaryHistogramLine        | Histogram line containing the data of the secondary ratings    | [Histogram](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Histogram.tsx)                                                                                |
| secondaryHistogramLabel       | The label of a secondary histogram line                        | [Histogram](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Histogram.tsx)                                                                                |
| secondaryHistogramBar         | Secondary ratings' histogram bar                               | [Histogram](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Histogram.tsx)                                                                                |
| secondaryHistogramBarValue    | Secondary ratings' histogram bar filling                       | [Histogram](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Histogram.tsx)                                                                                |
| secondaryHistogramCount       | Secondary ratings' histogram count                             | [Histogram](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Histogram.tsx)                                                                                |
| reviewHistogramBar            | Review Histogram Bar                                           | [Review](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Review.tsx)                                                                                |
| reviewHistogramBarValue       | Review Histogram Bar filling                                   | [Review](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Review.tsx)                                                                                |
| histogramDivisions            | Histogram division that separates it in five sections          | [HistogramBar](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/HistogramBar.tsx)                                                                                |
| review                        | Review                                                         | [Review](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Review.tsx)                                                                                |
| reviewRating                  | Review Rating                                                  | [Review](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Review.tsx)                                                                                |
| reviewTitle                   | Review Title                                                   | [Review](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Review.tsx)                                                                                |
| reviewSubmittedField          | Review 'submitted' field                                       | [Review](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Review.tsx)                                                                                |
| reviewByField                 | Review 'by' field                                              | [Review](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Review.tsx)                                                                                |
| reviewFromField               | Review 'from' field                                            | [Review](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Review.tsx)                                                                                |
| reviewText                    | Review text                                                    | [Review](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Review.tsx)                                                                                |
| reviewImagesContainer         | Review image container                                         | [Review](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Review.tsx)                                                                                |
| reviewImage                   | Review image                                                   | [Review](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Review.tsx)                                                                                |
| reviewsContainer              | Reviews container                                              | [ReviewsContainer](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/ReviewsContainer.tsx)                                                                                |
| reviewsContainerHead          | Reviews Container head                                         | [ReviewsContainer](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/ReviewsContainer.tsx)                                                                                |
| reviewsContainerTitle         | Reviews container title                                        | [ReviewsContainer](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/ReviewsContainer.tsx)                                                                                |
| reviewsContainerDropdowns     | Reviews container dropdown buttons                             | [ReviewsContainer](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/ReviewsContainer.tsx)                                                                                |
| reviewsContainerSortDropdown  | Reviews container sort button                                  | [ReviewsContainer](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/ReviewsContainer.tsx)                                                                                |
| reviewsContainerStarsDropdown | Reviews container stars button                                 | [ReviewsContainer](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/ReviewsContainer.tsx)                                                                                |
| reviewsContainerWriteButton   | Reviews container write button                                 | [ReviewsContainer](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/ReviewsContainer.tsx)                                                                                |
| noReviewsContainer            | Container that appears when there are no reviews               | [NoReviews](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/NoReviews.tsx)                                                                                |
| writeReviewButton             | Write review button                                            | [ReviewsContainer](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/ReviewsContainer.tsx), [NoReviews](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/NoReviews.tsx) |
| activeStar                    | Active star                                                    | [Stars](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Stars.tsx)                                                                                |
| activeStarContainer           | Active star container                                          | [Stars](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Stars.tsx)                                                                                |
| inactiveStar                  | Inactive star                                                  | [Stars](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Stars.tsx)                                                                                |
| inactiveStarContainer         | Inactive star container                                        | [Stars](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/blob/master/react/components/Stars.tsx)                                                                                |

## Troubleshooting

You can check if others are experiencing similar issues [here](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/issues). Also, feel free to [open issues](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/bazaarvoice/issues/new) or contribute with a pull request.

## Contributing

Take a look at these guidelines: [how to contribute](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/awesome-io%23contributing).

## Tests

To execute our tests go to `react/` folder and run `yarn test`

### Travis CI

[![{"base64":"  ","img":{"width":98,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":730,"url":"https://api.travis-ci.com/vtex-apps/menu.svg?branch=master"}}](https://read.calvincode.net/reader?url=https://travis-ci.org/vtex-apps/menu.svg?branch=master)](https://travis-ci.org/vtex-apps/menu)

See also

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

ON THIS PAGE

[Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.bazaarvoice/docs/apps/vtex.bazaarvoice%23description)

[Release schedule](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.bazaarvoice/docs/apps/vtex.bazaarvoice%23release-schedule)

[Table of Contents](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.bazaarvoice/docs/apps/vtex.bazaarvoice%23table-of-contents)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.bazaarvoice/docs/apps/vtex.bazaarvoice%23usage)

[Styles API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.bazaarvoice/docs/apps/vtex.bazaarvoice%23styles-api)

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

[Contributing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.bazaarvoice/docs/apps/vtex.bazaarvoice%23contributing)

[Tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.bazaarvoice/docs/apps/vtex.bazaarvoice%23tests)

[Travis CI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.bazaarvoice/docs/apps/vtex.bazaarvoice%23travis-ci)

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] How do I use the VTEX b2b checkout settings 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.b2b-checkout-settings/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

[Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.storefront-permissions)

[Storefront Permissions UI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.storefront-permissions-ui)

[B2B Organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-organizations)

[B2B Checkout Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-checkout-settings)

[B2B Orders History](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-orders-history)

[B2B Quotes & Carts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-quotes)

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

[Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.storefront-permissions)

[Storefront Permissions UI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.storefront-permissions-ui)

[B2B Organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-organizations)

[B2B Checkout Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-checkout-settings)

[B2B Orders History](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-orders-history)

[B2B Quotes & Carts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-quotes)

---

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

---

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

---

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

---

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

---

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

---

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

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

B2B Checkout Settings

Official extension

Version: 3.1.0

Latest version: 3.1.0

> The **B2B Checkout Settings** app is part of VTEX’s [B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-b2b-suite) solution, a collection of apps that allow stores to manage organizations, storefront roles and permissions, and checkout settings for B2B commerce relationships. We recommend that you use it alongside the other apps in this suite for all functionalities to work as expected.

In B2B commerce, it is often necessary to provide customized options during checkout, such as:

* Making specific payment methods available for each organization or cost center.
* Providing pre-filled addresses.
* Including a purchase order number in the order.
* Offering the option to create an order quote before making an actual purchase.

The **B2B Checkout Settings** app works alongside other **B2B Suite** apps to extend the checkout experience for users who are members of organizations, adding all the above possibilities to the checkout page.

## Before you start

First, make sure you have the [VTEX IO CLI (Command Line Interface)](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-vtex-io-cli-install) installed in your machine.

To use **B2B Checkout Settings**, you must have the [B2B Organizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-b2b-organizations) app installed in your store, which will enable you to group B2B users into organizations, with their own assigned payment methods, price tables, product collections, and cost centers.

You must also have the [Storefront Permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-storefront-permissions) app installed – it allows you to grant specific storefront roles for B2B users in an organization. See the **Storefront Permissions** app documentation for information on the available roles and how to customize their permissions.

## Installation

You can install this app by running `vtex install vtex.b2b-checkout-settings` in your terminal, using the [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-vtex-io-cli-installation-and-command-reference).

After this command, the app will be installed in your VTEX Admin, and B2B store administrators can access it on **Store Setup** \> **B2B Checkout Settings**.

## How it works

Considering B2B stores often need similar customizations, **B2B Checkout Settings** provides a ready-to-use customized checkout page for B2B scenarios.

Once **B2B Checkout Settings** is installed in your account, every script contained in its [checkout-ui-custom folder](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/b2b-checkout-settings/tree/master/checkout-ui-custom) will be automatically linked to your store. The app will customize your checkout page with the functionalities described below. You will also be able to [configure](#configuration) the app on **Store Setup** \> **B2B Checkout Settings**.

> The behavior of the checkout page in VTEX stores is customizable through JavaScript code. In case you need additional customization, we recommend that you use [Checkout UI Custom](https://read.calvincode.net/reader?url=https://apps.vtex.com/vtex-checkout-ui-custom/p) if you prefer using the VTEX Admin interface or [Checkout UI Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-checkout-ui-settings) if you prefer a code-only option.

### Restricted access to checkout

This app automatically checks users’ roles within the organization by communicating with the **B2B Organizations** app, and validates if the user has the required permissions to access checkout, by communicating with the Storefront Permissions app.

By default, users with any storefront role can access checkout, except for users with the **Organization Buyer** role. Any attempt to proceed to checkout without the required permission will result in a notification with the following message: _You don’t have access to the checkout_.

Note that if you have [Storefront Permissions UI](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-storefront-permissions-ui) installed, you can customize these permissions on the VTEX Admin by accessing **Account Settings > Storefront Permissions**.

### Cost Center addresses

The **B2B Checkout Settings** app communicates with the **B2B Organizations** app and automatically lists the [Cost Center addresses](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-b2b-organizations%23cost-center-details) associated with the user during checkout:

| ![{"base64":"  ","img":{"width":1541,"height":666,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":57705,"url":"https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/cost-center-details-addresses.png"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/cost-center-details-addresses.png) | ![{"base64":"  ","img":{"width":708,"height":663,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":43858,"url":"https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/shipping.png"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/shipping.png) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Cost Center Details** page, displaying two options of addresses associated with the cost center in question                                                                                | Checkout page for an user associated with this organization and cost center                                                                                |

### Purchase order number field

A purchase order (PO) is a commercial agreement between a buyer company and a B2B store, authorizing the payment for products or services to be delivered in the future within a specific time frame.

Having a purchase order number allows B2B customers to pay for authorized purchases by referencing this number. The purchase order is authorized and issued in advance by the company that is making the purchase.

Using **B2B Checkout Settings**, it is possible to enable an optional **Reference or PO Number** field for customers to insert this information during the checkout.

![{"base64":"  ","img":{"width":478,"height":550,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":34989,"url":"https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/purchase-order.png"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/purchase-order.png)

See the [Configuration](#configuration) section to understand how to enable or disable this button.

## Configuration

To change app settings, in the VTEX Admin go to **Store Setup** \> **B2B Checkout Settings**.

![{"base64":"  ","img":{"width":1006,"height":402,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":34303,"url":"https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/b2b-checkout-settings.png"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtex-apps/b2b-checkout-settings/master/docs/images/b2b-checkout-settings.png)

You can use the toggle button to activate or deactivate the available settings:

* **Show Purchase Order Number Field:** enabling this will add the **Reference or PO Number** input field to the checkout page. This will allow users to insert a purchase order number during checkout.
* **Show 'Create a Quote' Button:** enabling this will add the `Create a Quote` button to checkout, which allows users to create a quote using the current contents of their cart.

> You should only enable the `Create a Quote` button if your store has the [B2B Quotes](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/b2b-quotes) app installed. Check the **B2B Quotes** app documentation for more information on how order quotes work.

[B2B Organizations« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-organizations)[B2B Orders HistoryNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-orders-history)

See also

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

ON THIS PAGE

[Before you start](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-checkout-settings%23before-you-start)

[Installation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-checkout-settings%23installation)

[How it works](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-checkout-settings%23how-it-works)

[Restricted access to checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-checkout-settings%23restricted-access-to-checkout)[Cost Center addresses](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-checkout-settings%23cost-center-addresses)[Purchase order number field](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-checkout-settings%23purchase-order-number-field)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings/docs/apps/vtex.b2b-checkout-settings%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=)


[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 store components image 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.store-components/Image/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Image

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

Version: 3.178.5

Latest version: 3.178.5

The `image` block renders images in the storefront.

![](https://user-images.githubusercontent.com/60782333/197802548-bc9940ae-b9c8-47df-9769-e76155b9219b.png)

## Configuration

1. Import the `vtex.store-components` app to your theme dependencies in the `manifest.json` file as in the following example:

`1

 "dependencies": {

2

 "vtex.store-components": "3.x"

3

 }

`

1. Add the `image` block to any template you choose.
2. Then, declare the `image` block using the props stated in the [Props](#props) table. For example:

`1

 "image#example": {

2

 "props": {

3

 "src": "https://storecomponents.vteximg.com.br/arquivos/box.png",

4

 "maxHeight": 24

5

 }

6

 },

`

### Props

| Prop name | Type                                                                                | Description                                                                                | Default value |
| --------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ------------- |
| alt       | string                                                                                | Alternate text for the image.                                                                   | \-            |
| link      | [Link](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/native-types/blob/f63aeeb8f6e62f4a9aaec052a8be34973be7389b/pages/contentSchemas.json%23L52-L71) | The image hyperlink. For more details on the props of the link, please see the following table. | \-            |
| maxHeight | string                                                                                | Maximum height of the image.                                                                    | \-            |
| maxWidth  | string                                                                                | Maximum width of the image.                                                                     | \-            |
| sizes     | string                                                                                | Different image sizes for each page layout.                                                     | \-            |
| src       | string                                                                                | Source URL of the image.                                                                        | \-            |
| srcSet    | string                                                                                | URL of the image to use in different situations.                                                | \-            |
| title     | string                                                                                | Image title displayed on hover.                                                                 | \-            |

* **`link` props:**

| Prop name         | Type    | Description                                                                                | Default value |
| ----------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| attributeNofollow | boolean | Guides the search engine not to track the link of the page indicated by the tag. If true, sets the rel=noFollow attribute to the link. | false         |
| newTab            | boolean | If true opens a new tab when you click the image.                                                                                | false         |
| url               | string  | Sets the URL to which the user will be redirected by clicking the image.                                                               | \-            |

## Customization

To apply CSS customizations to this and other blocks, please read the [Using CSS handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization) guide.

| CSS Handles  |
| ------------ |
| imageElement |

See also

[Vtex.store ComponentsVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/Image/docs/apps/vtex.store-components)[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.store-components/Image/docs/apps/vtex.store-components/Image%23configuration)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/Image/docs/apps/vtex.store-components/Image%23props)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/Image/docs/apps/vtex.store-components/Image%23customization)

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 vtex io documentation submitting your app in the vtex app store 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-submitting-your-app-in-the-vtex-app-store/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/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-submitting-your-app-in-the-vtex-app-store/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-submitting-your-app-in-the-vtex-app-store/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-submitting-your-app-in-the-vtex-app-store/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-submitting-your-app-in-the-vtex-app-store/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-submitting-your-app-in-the-vtex-app-store/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-app-store)

[Becoming a registered VTEX App Store developer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-becoming-a-registered-vtex-app-store-developer)

[Developing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-developing-an-app)

[Setting your app's billing model](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-setting-your-apps-billing-model)

[Preparing your app for distribution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-preparing-your-app-distribution)

[Submitting your app to the VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store)

[Using the Docs builder to publish app documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/using-the-docs-builder-to-publish-app-documentation)

[App Store Guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/api-reference)

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

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-app-store)

[Becoming a registered VTEX App Store developer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-becoming-a-registered-vtex-app-store-developer)

[Developing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-developing-an-app)

[Setting your app's billing model](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-setting-your-apps-billing-model)

[Preparing your app for distribution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-preparing-your-app-distribution)

[Submitting your app to the VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store)

[Using the Docs builder to publish app documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/using-the-docs-builder-to-publish-app-documentation)

[App Store Guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

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

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-app-store)

[Submitting your app to the VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store)

Submitting your app to the VTEX App Store

Learn how to submit your app for distribution in the VTEX App Store.

Learn how to successfully submit your app for distribution in the VTEX App Store by following this guide. The VTEX App Store is a marketplace where VTEX clients can discover and install applications that enhance their ecommerce experience. Before your app can be featured in the VTEX App Store, it must pass the homologation process, which involves evaluation in three key areas: business, user experience (UX), and security/performance. This process applies to all apps, regardless of their functionality, e.g., storefront, admin, backend, or pixel.

> Keep in mind that the homologation process may take 45 days from [the moment the app data is sent for validation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23step-2-managing-the-homologation-process).

> [Edition apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-edition-app) do not need to be published in the App Store. Instead, accounts that wish to develop their own Edition apps must fulfill the [requirements to become a Sponsor Account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-becoming-a-sponsor-account).

## Before you begin

### Technical requirements

To complete this guide, you will need:

* **[GitHub](https://read.calvincode.net/reader?url=https://github.com/) account:** The app homologation is conducted via GitHub and Pull Requests (PRs). Ensure you have a GitHub account.
* **VTEX IO CLI `3.x`:** Ensure that the VTEX IO CLI is updated to version `3.x`. For instructions, refer to [Updating VTEX IO's CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-update).

### App prerequisites

Before proceeding with the homologation process, ensure your app meets these prerequisites:

* [**Set up your app's billing model**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-setting-your-apps-billing-model): To be eligible for publication in the App Store, your app must have a billing model set up. This makes it publicly available for all VTEX accounts. If you want your app to be private to your organization and installed on a single account, you do not need to go through the process detailed in this guide and can [install it](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-an-app) directly in your account.
* [**Publish your app on the VTEX IO development platform**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-publishing-an-app/): Publish your app using the VTEX account corresponding to your `vendor` account and in a [workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-workspace/) that the VTEX team can test.
* [**Deploy your app on the VTEX IO development platform**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available%23step-6---deploying-the-app-stable-version).

### App Store prerequisites

Finally, before submitting your app to the VTEX App Store, ensure you've completed the following steps:

* [**Become a registered VTEX App Store developer**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-becoming-a-registered-vtex-app-store-developer): To submit an app to the VTEX App Store, you need to be a registered VTEX App Store developer.
* [**Prepare your app for distribution**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution): Ensure your app adheres to VTEX's [business](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-vtex-app-store), [design](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-design-guidelines), [marketing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets), and [engineering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-engineering-guidelines) guidelines. These guidelines guarantee the standards of quality, viability, and usability of all apps made available through the VTEX App Store, so you must be aware of them before submitting your app for homologation.

## Instructions

### Step 1 - Submitting the app for validation

1. Open the terminal and [log in to the VTEX account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-usage%23logging-in-to-your-vtex-account) corresponding to the app's `vendor` account using the [VTEX IO CLI 3.x](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference).
2. Change to your app's directory.
3. Install the `submit` plugin:
`1
vtex plugins add submit
`
4. Submit your app for homologation by running the following command. You can also specify which version to submit by running `vtex submit {vendorAccount}.{appName}@{appVersion}`.
`1
vtex submit
`
5. When prompted, enter the GitHub username to manage homologation. Next, provide the workspace URL that the VTEX team can use to test your app.

![{"base64":"  ","img":{"width":1560,"height":782,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":185032,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store-0.png)

### Step 2 - Managing the homologation process

After completing these steps, a GitHub repository will be automatically created for your app, and you will be provided with a PR link in the terminal (e.g., `https://github.com/vtex-reviews/{vendorAccount}.{appName}`). The specified GitHub account will be added to the repository with read-only permissions to follow your app's review process. You can make comments and adjustments in the same repository.

> The homologation process applies to both new apps and new major app versions. A new branch will be created in the repository for each new app version.

You can work on improvements in a new branch. Once the branch has the necessary adjustments, open a PR for the VTEX team's review.

![{"base64":"  ","img":{"width":1996,"height":1736,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":317165,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store-1.png)

### Step 3 - Waiting for the app homologation

After opening the PR, the VTEX team will validate it for approval and merging. The new app version will then be ready to be released and made available in the VTEX App Store.

> Once the homologation process is complete, a product will be automatically created in your store catalog. Do not remove or modify it, as this product integrates your app with the VTEX App Store marketplace.

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7026595%3Fv%3D4%26w=64%26q=75)](https://github.com/henriquessb)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

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/App-Guides/vtex-app-store/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store.md)

[Preparing your app for distribution« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store//docs/guides/vtex-io-documentation-preparing-your-app-distribution)[Using the Docs builder to publish app documentationNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store//docs/guides/using-the-docs-builder-to-publish-app-documentation)

See also

[App monetizationApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-business-guidelines-app-monetization)[Engineering best practicesGuides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-engineering-guidelines)[Marketing guidelinesApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets)[User Experience guidelinesApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-design-guidelines)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7026595%3Fv%3D4%26w=64%26q=75)](https://github.com/henriquessb)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23before-you-begin)

[Technical requirements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23technical-requirements)[App prerequisites](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23app-prerequisites)[App Store prerequisites](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23app-store-prerequisites)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23instructions)

[Step 1 - Submitting the app for validation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23step-1-submitting-the-app-for-validation)[Step 2 - Managing the homologation process](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23step-2-managing-the-homologation-process)[Step 3 - Waiting for the app homologation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23step-3-waiting-for-the-app-homologation)

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/App-Guides/vtex-app-store/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store.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-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23before-you-begin)

[Technical requirements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23technical-requirements)[App prerequisites](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23app-prerequisites)[App Store prerequisites](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23app-store-prerequisites)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23instructions)

[Step 1 - Submitting the app for validation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23step-1-submitting-the-app-for-validation)[Step 2 - Managing the homologation process](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23step-2-managing-the-homologation-process)[Step 3 - Waiting for the app homologation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store%23step-3-waiting-for-the-app-homologation)

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