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

[User] Explain troubleshooting my multi language store is not working in the development workspace 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/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/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/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/updates/release-notes)

Troubleshooting

API

---

Development

[I am getting 500 errors in VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-am-getting-500-errors-in-vtex-io-cli)

[I am getting errors with my service configuration app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-am-getting-errors-with-my-service-configuration-app)

[Issues during extending the FastStore API schema](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/issues-during-extending-the-faststore-api-schema)

[I can’t access the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/unable-to-access-headless-cms)

[I can’t install the Headless CMS plugins in my account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-cant-install-the-headless-cms-plugins-in-my-account)

[I can't install VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-cant-install-vtex-io-cli)

[I can’t integrate my external Search Provider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-cant-integrate-my-external-search-provider)

[My multi-language store is not functioning in the development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace)

[My store catalog does not display the price range filter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-store-catalog-does-not-show-the-price-range-filter)

[My pages are taking too long to be published on Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-pages-are-taking-too-long-to-be-published-on-headless-cms)

[My store does not reflect the overrides I created](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-store-does-not-reflect-the-overrides-i-created)

[Modal Layout closes when I click a SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku)

[The Price in the shelf or in the search results is different from the product page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/the-price-in-the-shelf-or-in-the-search-results-is-different-from-the-product-page)

[The promotion highlight flag does not appear on the product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/the-promotion-highlight-flag-does-not-appear-on-the-product)

[vtex release CLI command returns an EBADF message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/vtex-release-cli-command-returns-ebadf-message)

[I can't create a new workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-cant-create-a-new-workspace)

[I can't install an app with a major other than 0.x](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-cant-install-an-app-with-a-major-other-than-0x)

[I don't see my Store Theme changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-dont-see-my-store-theme-changes)

---

Store performance

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/updates/release-notes)

Troubleshooting

API

---

Development

[I am getting 500 errors in VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-am-getting-500-errors-in-vtex-io-cli)

[I am getting errors with my service configuration app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-am-getting-errors-with-my-service-configuration-app)

[Issues during extending the FastStore API schema](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/issues-during-extending-the-faststore-api-schema)

[I can’t access the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/unable-to-access-headless-cms)

[I can’t install the Headless CMS plugins in my account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-cant-install-the-headless-cms-plugins-in-my-account)

[I can't install VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-cant-install-vtex-io-cli)

[I can’t integrate my external Search Provider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-cant-integrate-my-external-search-provider)

[My multi-language store is not functioning in the development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace)

[My store catalog does not display the price range filter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-store-catalog-does-not-show-the-price-range-filter)

[My pages are taking too long to be published on Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-pages-are-taking-too-long-to-be-published-on-headless-cms)

[My store does not reflect the overrides I created](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-store-does-not-reflect-the-overrides-i-created)

[Modal Layout closes when I click a SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/modal-layout-closes-when-i-click-a-sku)

[The Price in the shelf or in the search results is different from the product page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/the-price-in-the-shelf-or-in-the-search-results-is-different-from-the-product-page)

[The promotion highlight flag does not appear on the product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/the-promotion-highlight-flag-does-not-appear-on-the-product)

[vtex release CLI command returns an EBADF message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/vtex-release-cli-command-returns-ebadf-message)

[I can't create a new workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-cant-create-a-new-workspace)

[I can't install an app with a major other than 0.x](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-cant-install-an-app-with-a-major-other-than-0x)

[I don't see my Store Theme changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-dont-see-my-store-theme-changes)

---

Store performance

---

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting)

Development

My multi-language store is not working in the development workspace

After creating a development workspace in a multi-language store, there is an error in my website.

**Keywords:** Development workspace | Internationalization| Messages | Multi-language

After [creating a development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace) in a multi-language store, the following error is returned when trying to access the website:

`1

Error: messages

2

at throwOnGraphQLErrors (/usr/local/app/node_modules/@vtex/api/lib/HttpClient/GraphQLClient.js:10:15)

3

at /usr/local/app/node_modules/@vtex/api/lib/HttpClient/GraphQLClient.js:23:15

4

at runMicrotasks (<anonymous>)

5

at processTicksAndRejections (internal/process/task_queues.js:97:5)

6

at MessagesGraphQL.translate (/usr/local/app/node_modules/@vtex/api/lib/clients/apps/MessagesGraphQL.js:50:26)

7

at dataloader_1.default.batch (/usr/local/app/node_modules/@vtex/api/lib/service/worker/runtime/graphql/schema/messagesLoaderV2.js:69:15)

`

This error indicates issues with translations related either to the configuration settings of the `vtex.messages` app, which is used for [translating storefront content](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/storefront-content-internationalization%23step-by-step) or to the values assigned to the `Locale` field within the [trade policy](https://read.calvincode.net/reader?url=https://help.vtex.com/tracks/vtex-store-overview--eSDNk26pdvemF3XKM0nK9/4EPwTXx5oFdSG1dA3zIchz%23trade-policy) configuration.

## Solution

To solve this problem, there are several solutions you can consider:

### Checking your store language availability

Make sure the desired language is available for your storefront. In some cases, despite being able to select a language in the Locale field within the trade policy configuration, the storefront may not have been translated into that language. In this case, you will receive that error message.

To check which language is set up for your storefront, do the following:

1. Access the trade policy configuration by going to the VTEX Admin and navigating to Store Settings > Channels > Trade Policies.
![{"base64":"  ","img":{"width":1565,"height":80,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":11065,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/development/locale-trade-policy-en.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/development/locale-trade-policy-en.png)

Open a ticket with VTEX Support to check if the translation is available. If the language is unavailable, you may request the translation through our support in the same ticket.

If the language is available and the problem continues, check if the [Locale field](#checking-the-locale-field)’s value is correct.

### Checking the Locale field

1. Access the trade policy configuration by going to the VTEX Admin and navigating to Store Settings > Channels > Trade Policies.
2. Make sure the Locale field’s value is correct. For example, consider a trade policy whose country code is Chile (CHL):

| ✅ Do  | ❌ Don't |
| ----- | ------- |
| es-CL | arn-CL  |

> See Microsoft’s documentation to check the correct [Language Code Identifiers](https://read.calvincode.net/reader?url=https://learn.microsoft.com/en-us/openspecs/windows%5Fprotocols/ms-lcid/a9eac961-e77d-41a6-90a5-ce1a8b0cdb9c) to set up in the Locale field.

If you are still experiencing the same issue, [disable the automatic translations](#disabling-automatic-translations) in the `vtex.messages` app settings.

### Disabling automatic translations

If the desired language is available and correct, follow the steps below:

1. In the VTEX Admin, go to Apps > My Apps, and search for the `vtex.messages` app.
![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAJUlEQVR4nAEaAOX/AGFhYq+wsa2urxMaJgDExMTo6en////Fxcqy6g/p9LLCEgAAAABJRU5ErkJggg==","img":{"src":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/development/search-messages-app-en.png","width":848,"height":478,"type":"png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/development/search-messages-app-en.png)
2. Open the app settings and [disable the automatic translations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-disabling-automatic-translation).
![{"base64":"  ","img":{"width":952,"height":794,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":38003,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/development/vtex-messages-app-en.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/troubleshooting/development/vtex-messages-app-en.png)

The expected behavior is for the multi-language store website to work properly in the development workspace.

After following these steps, if you keep receiving the same error message, open a ticket to VTEX Support.

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/_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/troubleshooting/development/my-multi-language-store-is-not-working-in-the-development-workspace.md)

[I can’t integrate my external Search Provider« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/i-cant-integrate-my-external-search-provider)[My store catalog does not display the price range filterNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-store-catalog-does-not-show-the-price-range-filter)

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/_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

[Solution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace%23solution)

[Checking your store language availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace%23checking-your-store-language-availability)[Checking the Locale field](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace%23checking-the-locale-field)[Disabling automatic translations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace%23disabling-automatic-translations)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/troubleshooting/development/my-multi-language-store-is-not-working-in-the-development-workspace.md)

Copy page

On this page

ON THIS PAGE

[Solution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace%23solution)

[Checking your store language availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace%23checking-your-store-language-availability)[Checking the Locale field](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace%23checking-the-locale-field)[Disabling automatic translations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace/docs/troubleshooting/my-multi-language-store-is-not-working-in-the-development-workspace%23disabling-automatic-translations)

On this page

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


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

[User] Provide a guide on guides vtex io documentation creating a quickview using modal layout 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-creating-a-quickview-using-modal-layout/docs/guides)

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/getting-started-3)

Concepts

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

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

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/store-framework-using-advanced-layouts)

[Building a Carousel using Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-building-a-carousel-using-slider-layout)

[Creating a Quickview using Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout)

[Creating modals using icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-modals-using-icons)

[Rendering a badge on top of a product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-rendering-a-badge)

[Using Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-using-flex-layout)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/store-framework-styling)

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

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/store-framework-routing)

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

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/troubleshooting)

---

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/getting-started-3)

Concepts

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

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

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/store-framework-using-advanced-layouts)

[Building a Carousel using Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-building-a-carousel-using-slider-layout)

[Creating a Quickview using Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout)

[Creating modals using icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-modals-using-icons)

[Rendering a badge on top of a product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-rendering-a-badge)

[Using Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-using-flex-layout)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/store-framework-styling)

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

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/store-framework-routing)

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

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/storefront-development)

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/store-framework)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/store-framework-using-advanced-layouts)

[Creating a Quickview using Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout)

Creating a Quickview using Modal Layout

Learn how to create a Quickview feature using the Modal Layout app.

In this guide, you'll learn how to configure a Quickview feature in your store using the [Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout) app. The Quickview allows users to view product details directly from the homepage or category pages without navigating to the product detail page.

![{"base64":"  ","img":{"width":2880,"height":1586,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1310565,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-modal-layout-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-modal-layout-0.png)

> This guide is based on the [Store Theme template](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-theme), a boilerplate with pre-set configurations for creating a store using [Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework). Learn more in [Available templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme%23available-themes).

## Instructions

### Step 1 - Adding the Modal Layout app to the theme's dependencies

1. In a [development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace), open your [Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) app using the code editor of your choice.
2. Open the `manifest.json` file and add the Modal Layout app to your theme dependencies.

manifest.json

`1

 "dependencies": {

2

 "vtex.modal-layout": "0.x",

3

 }

`

### Step 2 - Configuring the quickview trigger

To enable the Quickview feature, define the trigger for the modal. The `modal-trigger#quickview` block activates the modal when the user interacts with the associated element (for example, a button). This block links the modal trigger to the `modal-layout#quickview`, which contains the modal layout.

1. Open the `quickview.jsonc` file located in the `store/blocks/product-summary` folder.
2. Add the `modal-trigger#quickview` block to trigger the Quickview modal. In this example, we're using `icon-expand` to represent the trigger.

store/blocks/product-summary/quickview.json

`1

 "modal-trigger#quickview": {

2

 "children": [

3

 "icon-expand",

4

 "modal-layout#quickview"

5

 ],

6

 "props": {

7

 "blockClass": "quickview"

8

 }

9

 },

`

1. Add the `modal-layout#quickview` as a child of the `modal-trigger#quickview` block. This defines the modal layout.

store/blocks/product-summary/quickview.json

`1

 "modal-trigger#quickview": {

2

 "children": [

3

 "icon-expand",

4

 "modal-layout#quickview"

5

 ],

6

 "props": {

7

 "blockClass": "quickview"

8

 }

9

 },

`

Note that the children property specifies the elements inside the trigger block. In this case, it includes `icon-expand`, which represents the visual element that users interact with to open the modal, and `modal-layout#quickview`, which defines the modal layout displayed when the trigger is activated. The props section includes `blockClass`, a custom CSS class (Quickview) that allows you to style both the modal trigger and the modal itself.

### Step 3 - Customizing the Quickview modal

To customize the Quickview, you can combine Modal Layout's native blocks, such as `modal-header`, `modal-content`, and `modal-actions`, with other native components to structure and display the modal content. The inner content may include elements such as product images, name, price, SKU selector, and actions like adding the product to the cart or viewing more details.

For example, you can use [Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.flex-layout) to define the rows and columns within your modal and leverage [Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary) blocks to render product information. Learn more in the guides available under [Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-using-components).

> Check the quickview.json for a complete example and consult the [Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout) documentation for further information on configuring and customizing your modal.

### Step 4 - Making your changes publicly available

After testing your component, deploy the new version of your Store Theme app to make it publicly available. Follow the instructions in the guide [Deploying a new app version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available).

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-creating-a-quickview-using-modal-layout.md)

[Building a Carousel using Slider Layout« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout//docs/guides/vtex-io-documentation-building-a-carousel-using-slider-layout)[Creating modals using iconsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout//docs/guides/vtex-io-documentation-creating-modals-using-icons)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/_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

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout%23instructions)

[Step 1 - Adding the Modal Layout app to the theme's dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout%23step-1-adding-the-modal-layout-app-to-the-themes-dependencies)[Step 2 - Configuring the quickview trigger](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout%23step-2-configuring-the-quickview-trigger)[Step 3 - Customizing the Quickview modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout%23step-3-customizing-the-quickview-modal)[Step 4 - Making your changes publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout%23step-4-making-your-changes-publicly-available)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-creating-a-quickview-using-modal-layout.md)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout%23instructions)

[Step 1 - Adding the Modal Layout app to the theme's dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout%23step-1-adding-the-modal-layout-app-to-the-themes-dependencies)[Step 2 - Configuring the quickview trigger](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout%23step-2-configuring-the-quickview-trigger)[Step 3 - Customizing the Quickview modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout%23step-3-customizing-the-quickview-modal)[Step 4 - Making your changes publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout/docs/guides/vtex-io-documentation-creating-a-quickview-using-modal-layout%23step-4-making-your-changes-publicly-available)

On this page

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


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

[User] Provide a guide on guides vtex store components image 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-store-components-image/docs/guides)

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/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 setting up delivery promise 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/setting-up-delivery-promise-components/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/getting-started-with-storefront-solutions)

---

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

---

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

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

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

Concepts

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

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

[Building a horizontal Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-components/docs/guides/setting-up-delivery-promise-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/store-framework-working-with-site-editor)

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

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-components/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/vtex-io-multi-language-stores)

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

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-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/setting-up-delivery-promise-components/docs/guides/vtex-io-documentation-semantic-html-migration)

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

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-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/setting-up-delivery-promise-components/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides)

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

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

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

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

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

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/getting-started-with-storefront-solutions)

---

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

---

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

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

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

Concepts

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

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

[Building a horizontal Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-components/docs/guides/setting-up-delivery-promise-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/store-framework-working-with-site-editor)

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

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-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/setting-up-delivery-promise-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/setting-up-delivery-promise-components/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/vtex-io-multi-language-stores)

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

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-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/setting-up-delivery-promise-components/docs/guides/vtex-io-documentation-semantic-html-migration)

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

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-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/setting-up-delivery-promise-components/docs/guides/storefront-best-practices)

---

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

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

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

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

Setting up Delivery Promise components (Beta)

> This feature is in closed beta, which means that only selected customers can access it. If you are interested in implementing it in the future, please contact our [Support](https://read.calvincode.net/reader?url=https://support.vtex.com/hc/en-us) team.

The [Delivery Promise (Beta)](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/delivery-promise-beta--p9EJH9GgxL0JceA6dBswd) feature helps create a more accurate and reliable shopping experience by ensuring customers only see products that can be delivered to the provided address or picked up at available locations.

The availability is displayed following these rules:

* For pickup points selected in the header or a specific pickup point, the system displays all available pickup points within a 50 km pickup radius configured in Checkout. There is no limit to the number of pickup points displayed.
* For the nearby pickup filter, pickup points within a 10 km radius of the buyer's location are displayed, with a maximum of 40 pickup points.

> Delivery Promise supports any seller architecture (franchise accounts, VTEX Sellers, [Seller Portal](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/vtex-store-overview--eSDNk26pdvemF3XKM0nK9/4yPqZQyj0t675QpcG7H6yl%23vtex-account-types), and external sellers).

![{"base64":"  ","img":{"width":800,"height":392,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":3159719,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/delivery-promise-component.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/delivery-promise-component.gif)

If you're building your storefront with Store Framework, you can enable this experience using two key apps:

* [Shipping Option Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components): Used to display a location selector.
* [Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search-result): Used to implement sidebar filters.

This guide walks you through the basic setup needed to implement these components in your store.

> Explore the [Delivery Promise Figma library](https://read.calvincode.net/reader?url=https://www.figma.com/community/file/1545494767147168145/delivery-promise-by-vtex) to learn more about component specs, usage guidelines, reference use cases, and behavioral patterns.

## Before you begin

To enable Delivery Promise (Beta) in your store, the following conditions must be met:

* The store must use [Intelligent Search](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb/3qgT47zY08biLP3d5os3DG).
* Check if you have installed the `0.5.0` or a later version of the [search-session](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search-session) app. To do this, run the `vtex list` command in your terminal and search for the app in the results. If you don’t have this app installed, run the command `vtex install vtex.search-session`.
* Your storefront must be built with [Store Framework](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/vtex-store-overview--eSDNk26pdvemF3XKM0nK9/67SCtUreXxKYWhZh8n0zvZ%23store-framework) to enable the components in this guide. If you use FastStore, check the [FastStore Delivery Promise implementation guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation). If your store is headless, check [Delivery Promise for headless stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/delivery-promise-for-headless-stores).

## Instructions

### Step 1 - Requesting Delivery Promise activation

Contact our [Support](https://read.calvincode.net/reader?url=https://support.vtex.com/hc/en-us) team to request the activation of Delivery Promise.

### Step 2 - Displaying a location selector

To use Delivery Promise, customers must define a delivery address early in their shopping journey. The [Shipping Option Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components) app provides blocks that allow users to select a location and display delivery options accordingly.

1. Add the `shipping-option-components` app to your theme dependencies in the `manifest.json` as shown below:
`1
 "dependencies": {
2
 "vtex.shipping-option-components": "1.x"
3
 }
`
2. Declare the `shipping-option-location-selector` block as a child block of your [header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-header) block, exported by the `store-header` app. Example:
`1
 "header.full": {
2
 "blocks": ["header-layout.desktop", "header-layout.mobile"]
3
 },
4

5
 "header-layout.desktop": {
6
 "children": [
7
 "header-row#1-desktop",
8
 ]
9
 },
10

11
 "header-row#1-desktop": {
12
 "children": ["shipping-option-location-selector"],
13
 },
14

15
 "shipping-option-location-selector": {
16
 "props": {
17
 "compactMode": true,
18
 }
19
 },
`
3. Configure the behavior with props to customize how location selection is presented. Below, we highlight key uses of the available props.
   * [Setting up a blocking modal](#setting-up-a-blocking-modal)
   * [Defining displayed delivery methods](#defining-displayed-delivery-methods)
> Learn more about all the available props in [Shipping Option Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components).

When the customer provides their address, an initial selection of products is made to display only products that can be delivered to that location or picked up at pickup points within a radius of up to 50 km from the provided address — a limit determined by the Checkout. This selection impacts all subsequent product listings and filters.

#### Setting up a blocking modal

To ensure location input is provided before browsing, you can configure a blocking modal that displays when the page loads and can't be dismissed until a postal code is entered.

To do this, you must use both the `callToAction` and `dismissible` props:

* `callToAction`: Defines which UI is displayed on load:
   * `modal`: Displays a modal requiring postal code entry.
   * `popover-input` _(default)_: Opens a popover with a postal code input field.
   * `popover-button`: Displays a button that opens the popover when clicked.
* `dismissible`: When set to `false`, the modal can't be closed until a valid postal code is entered.

Configure the props as shown in the example below:

`1

"shipping-option-location-selector": {

2

 "props": {

3

 "dismissible": false,

4

 "callToAction": "modal"

5

 }

6

}

`

This configuration ensures the page is filtered for delivery availability from the first interaction, improving performance and relevance.

#### Defining displayed delivery methods

The `shippingSelection` prop controls which delivery methods are displayed:

* `delivery-and-pickup`: Enables both delivery and pickup location options.
* `only-pickup`: Displays only the pickup selector (for example, in stores focusing on in-store pickup).

Configure the prop as shown in the example below:

`1

"shipping-option-location-selector": {

2

 "props": {

3

 "shippingSelection": "delivery-and-pickup"

4

 }

5

}

`

### Step 3 - Implementing sidebar filters

To display available delivery filters in the search sidebar, follow the steps below using the [Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search-result) component. It automatically renders facets, including those related to delivery and pickup availability.

1. In your theme's `manifest.json`, add the `search-result` app as a dependency:
`1
 "dependencies": {
2
 "vtex.search-result": "3.x"
3
 }
`
2. Ensure your theme includes the `search-result-layout.desktop` or `search-result-layout.mobile` block, depending on the layout.

Within this layout, make sure the sidebar block includes `filter-navigator.v3`:

`1

 // store/search.json

2

 {

3

 "store.search#default": {

4

 "blocks": ["search-result-layout.desktop"]

5

 },

6

 "search-result-layout.desktop": {

7

 "children": ["filter-navigator.v3", "search-content"]

8

 }

9

 }

`

These blocks will display all applicable filters automatically. If a customer has selected a location using the Shipping Option component, delivery filters will reflect real-time availability based on that address.

> The delivery promise filters are a beta feature and may be subject to breaking changes. If you customize this functionality, ensure your implementation can adapt to updates.

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Search/setting-up-delivery-promise-components.md)

[Using the Assets Builder« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components//docs/guides/vtex-io-documentation-using-the-assets-builder)[Using advanced layoutsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components//docs/guides/store-framework-using-advanced-layouts)

See also

[Vtex.shipping Option ComponentsApps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/apps/vtex.shipping-option-components)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/setting-up-delivery-promise-components%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/setting-up-delivery-promise-components%23instructions)

[Step 1 - Requesting Delivery Promise activation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/setting-up-delivery-promise-components%23step-1-requesting-delivery-promise-activation)[Step 2 - Displaying a location selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/setting-up-delivery-promise-components%23step-2-displaying-a-location-selector)[Step 3 - Implementing sidebar filters](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/setting-up-delivery-promise-components%23step-3-implementing-sidebar-filters)

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/Search/setting-up-delivery-promise-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/setting-up-delivery-promise-components/docs/guides/setting-up-delivery-promise-components%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/setting-up-delivery-promise-components%23instructions)

[Step 1 - Requesting Delivery Promise activation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/setting-up-delivery-promise-components%23step-1-requesting-delivery-promise-activation)[Step 2 - Displaying a location selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/setting-up-delivery-promise-components%23step-2-displaying-a-location-selector)[Step 3 - Implementing sidebar filters](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/setting-up-delivery-promise-components/docs/guides/setting-up-delivery-promise-components%23step-3-implementing-sidebar-filters)

On this page

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


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

[User] Provide a guide on guides vtex product summary productsummarydescription 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-product-summary-productsummarydescription/docs/guides)

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

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

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

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarydescription/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarydescription/docs/troubleshooting)

---

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

Product Summary Description

Product Summary Description is a block exported by the [Product Summary app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary) responsible for rendering the description of the product.

![{"base64":"  ","img":{"width":1895,"height":778,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":42263,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummarydescription-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummarydescription-0.png)

## Configuration

1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:

`1

 dependencies: {

2

 "vtex.product-summary": "2.x"

3

 }

`

1. Add the `product-summary-description` block to your store theme as a child of `product-summary.shelf`. For example:

`1

 "product-summary.shelf": {

2

 "children": [

3

 "product-summary-image",

4

 "product-summary-name",

5

+ "product-summary-description",

6

 "product-summary-attachment-list",

7

 "product-summary-space",

8

 "product-summary-column#1"

9

 ]

10

 },

`

## Customization

To apply CSS customizations in this and other blocks, follow 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 |
| ----------- |
| description |

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarydescription/_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/Store-Framework-Apps/basic-components/vtex-product-summary-productsummarydescription.md)

Contributors

1

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

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarydescription/docs/guides/vtex-product-summary-productsummarydescription%23configuration)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarydescription/docs/guides/vtex-product-summary-productsummarydescription%23customization)

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/Store-Framework-Apps/basic-components/vtex-product-summary-productsummarydescription.md)

Copy page

On this page

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarydescription/docs/guides/vtex-product-summary-productsummarydescription%23configuration)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarydescription/docs/guides/vtex-product-summary-productsummarydescription%23customization)

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