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

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

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

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

Guides

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

[Cloud infrastructure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/security)

[Data privacy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/data-privacy)

[Composability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/composability)

[Extensibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/extensibility)

[Store architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/store-architecture)

[Developer experience](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/developer-experience)

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

[Cloud infrastructure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/security)

[Data privacy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/data-privacy)

[Composability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/composability)

[Extensibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/extensibility)

[Store architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/store-architecture)

[Developer experience](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/developer-experience)

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

[Cloud infrastructure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure)

Cloud infrastructure

Learn how our infrastructure decisions ensure scalability, reliability, and performance for your business.

This guide presents an overview of VTEX's infrastructure architecture, exploring its cloud resources and technical aspects. Read the following sections to understand how our multi-tenancy and cloud-based architecture can benefit your business.

## SaaS multi-tenancy

By adopting the Software as a Service (SaaS) model, VTEX eliminates the need to set up and maintain complex local infrastructure, which enables scalability, stability, and simplified access to advanced digital commerce features such as order management, product offerings in marketplaces, and flexible integrations.

A key element of our platform's architecture is multi-tenancy. Tenants refer to individual accounts that have access to the same platform infrastructure while keeping their data and configurations isolated and secure. VTEX's multi-tenant architecture enables us to serve multiple customers on a shared infrastructure, ensuring performance, scalability, and cost-effectiveness.

The multi-tenant architecture diagram below illustrates how VTEX supports multiple accounts on a shared infrastructure:

![{"base64":"  ","img":{"width":895,"height":497,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":39472,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Cloud-infrastructure/multi-tenant.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Cloud-infrastructure/multi-tenant.png)

* **Tenants:** _Tenant 1_ and _Tenant n_ represent different accounts using the VTEX platform. Each tenant sends and receives requests and responses to and from the platform.
* **Application Runtime (Kernel):** Atomic Requests are individual operations processed by the application runtime. Each tenant's requests are handled as atomic requests, ensuring isolation and security.
* **VTEX IO apps:** These applications provide specific features and can be customized for each tenant. The diagram shows that VTEX IO apps can be standard or customized based on the tenant's requirements.
* **Database interaction:** The application runtime processes read and write operations to a shared physical database. This ensures that each tenant's data is handled efficiently.
* **Shared physical database:** The database schema is shared among tenants but maintains tenant-specific data and metadata to ensure data isolation and security. Each tenant's data and metadata are stored in isolated sections within the shared schema.

### Logical separation

With a multi-tenant architecture, tenants don't have exclusive resources, such as physically separate databases, but we guarantee logical separation. Our clients' information is contained in one account, isolated and protected from other accounts. There is no method of accessing data from different accounts since all our services require an explicit [account specification](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/vtex-store-overview--eSDNk26pdvemF3XKM0nK9/4yPqZQyj0t675QpcG7H6yl%23vtex-account-types) and [authorized credentials](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authentication).

Each request belongs to a specific tenant (account) and is processed atomically, which means each request has its own lifecycle. This allows for elastic operation and scalability and improved performance.

### Constant evolution and growth

The implementation of new features and updates can take place across the entire platform, ensuring that all tenants can benefit from the latest enhancements.

With a single, shared code base and infrastructure, updates, bug fixes, and maintenance tasks are centralized, reducing the time and effort required to keep the platform running smoothly across all tenants.

Given our demand aggregation capability due to SaaS multi-tenancy architecture, VTEX can handle traffic peaks smoothly. Learn more in the [Scalability](#scalability) section.

## Microservices

Our core commerce capabilities consist of over 70 shared microservices. Unlike a monolithic solution of tightly integrated capabilities, our microservices are organized into distinct functional modules, such as Checkout, Promotions, Catalog, or Pricing services, each with its own responsibilities and APIs.

![{"base64":"  ","img":{"width":1171,"height":606,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":87986,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Cloud-infrastructure/microservices.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Cloud-infrastructure/microservices.png)

Each microservice has a lifecycle independent from others, including its environment, [deployment](#deployment-strategy-and-change-management), and codebase. This allows us to use the most appropriate technologies and design patterns for each case. Teams can deploy services independently, enabling continuous improvement and faster updates. Each microservice is independently scalable to meet increasing demand.

Such choices ensure speed and flexibility in the evolution of platform services, guarantee exclusive resources for each service, and eliminate competition between different operations, thus ensuring greater availability.

### Virtual Private Cloud (VPC)

Given our microservices architecture, it is common for an application to need to query others to process a request. To ensure good processing performance while also safeguarding against unwanted external access, the microservices run within the same Virtual Private Cloud (VPC) network — except in cases where an exclusive VPC is a legal or security prerequisite, as is the case with VTEX's [Payment Gateway](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/what-is-a-payment-gateway--2KH9Wdi7F6swOU4amECSOk), with [PCI](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/what-is-the-pci-ssc) certification.

Within the VPC, [VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io) apps have access control based on [policies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-policies) that only allow access to necessary resources, thus ensuring greater security.

### Deployment strategy and change management

New features and fixes are introduced daily, in a smooth and seamless way. Over 12,000 upgrades are rolled out annually with minimal disruption to customer operations. There is an automatic update for all clients for patch and minor updates that do not impact backward compatibility. In case of major feature changes, we ensure transparent communication by providing notifications, [documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/updates/release-notes) and timelines before the release.

Our deployment capacity is made possible by a robust architecture of [microservices](#microservices), each having its own independent lifecycle but operating within a unified, automated Continuous Delivery framework. Our CI/CD pipeline ensures seamless integration, testing, and deployment of code changes, enabling us to deliver features and updates efficiently and with minimal disruption.

Releases primarily focus on adding new features or addressing bugs. Major releases are typically confined to specific platform services. Major versions follow the same development and deployment processes and coexist with the previous version, allowing tenants ample time for adjustment if needed.

General deployments to development and production environments are automated and triggered by reviewed and approved releases from our versioned code repositories. Each [microservice](#microservices) contains a protected main branch that can only be modified after the approval of at least two developers, ensuring that peer-reviewing and segregation of duties are part of the process.

After that, a webhook is sent, and a new environment is automatically created without further commands. Finally, the developer defines the autoscaling configuration and the number of instances in the new environment, and the traffic is slowly switched over.

This [blue/green](https://read.calvincode.net/reader?url=https://docs.aws.amazon.com/whitepapers/latest/overview-deployment-options/bluegreen-deployments.html) deployment strategy ensures that any problems are detected with little production traffic (usually around 1%) by monitoring the system's metrics, and rollbacks are immediate since the previous environment still exists.

## REST APIs

Our [REST APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/getting-started-list-of-rest-apis) enable you to leverage and extend VTEX core commerce features to integrate with third-party solutions and deliver best-in-class experiences across a multitude of shopper touchpoints (headless mobile applications, chatbots, IoT integrations) and [back office](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-guide) touchpoints (ERP, PIM, and WMS integrations).

For developers looking to explore our APIs more deeply, we offer comprehensive [API reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference) documentation that includes usage examples to streamline the process of exploration, understanding, and consumption.

Using our REST APIs with our development platform (VTEX IO) and data service (Master Data), you can expand the VTEX platform to address your unique business needs.

## Cloud-native

In our infrastructure, we align with market trends in hosting and computing. VTEX core commerce services utilize advanced cloud solutions, which monitor and control the deployment of new servers. VTEX IO leverages containerization and clustering technologies to manage deployment, maintenance, and scaling processes.

Our cloud-native, multi-tenant SaaS solution allows tenants to run the same version of the platform and benefit from frequent and seamless upgrades as well as high scalability.

Furthermore, our adoption of a microservices architecture facilitates seamless modernization and enhances observability across various computing environments.

> Verify our credentials by consulting Amazon's assessment of our company at [AWS Partner VTEX](https://read.calvincode.net/reader?url=https://partners.amazonaws.com/partners/001E000000pd8JbIAI/VTEX). [AWS Retail Competency Partners](https://read.calvincode.net/reader?url=https://aws.amazon.com/retail/partner-solutions/) undergo rigorous validation by AWS to ensure they meet AWS best practices for building secure, high-performing, resilient, and efficient cloud infrastructure for industry applications — to give customers increased confidence when making decisions.

### Content delivery optimization

In a cloud-native architecture, optimizing content delivery involves leveraging a combination of technologies and strategies to minimize latency, enhance performance, and improve overall user experience. This section explores key components of content delivery logic within our cloud-native framework, including Content Delivery Networks (CDNs), routers, and caching mechanisms.

Check the diagram and the following explanation to learn more about our resilient layered approach to content delivery:

![{"base64":"  ","img":{"width":971,"height":747,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":40618,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Cloud-infrastructure/cdn-v2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Cloud-infrastructure/cdn-v2.png)

1. VTEX maintains [CDN](#cdn) servers across multiple global regions. These servers deliver cached content from the closest location to the user, significantly reducing load times.
2. In scenarios with no [cache](#cache) in the CDN or during actions like placing an order, requests are directed to the [router](#router). The routers, distributed across multiple AWS Availability Zones, enhance our resilience. These Availability Zones are not fallbacks; they operate concurrently, bolstering our resilience.
3. There is a [caching layer](#cache) after the router, which relieves the underlying application of reprocessing the same data. When handling numerous requests, only necessary ones reach the application, ensuring availability. These strategies minimize the need to scale applications, ensuring platform resilience and capacity.
4. Applications run on multiple servers, ensuring redundancy. We operate multiple replicas simultaneously, enhancing reliability.

This strategy ensures the platform swiftly recovers and maintains the capacity to process required tasks, embodying resilience.

#### CDN

VTEX's Content Delivery Network (CDN) is a distributed network of servers strategically placed across various geographic locations, whose primary function is to deliver web content to users more efficiently and reliably. On VTEX, CDN redundancy ensures the availability and performance of our services.

Our CDN plays a crucial role in caching delivered content, particularly static content, ensuring superior performance for shoppers during their browsing experience. Additionally, the CDN serves as the primary edge protection against [Distributed Denial-of-service (DDoS) attacks](https://read.calvincode.net/reader?url=https://aws.amazon.com/en/shield/ddos-attack-protection/).

#### Router

A router performs operations on the platform that are common to all services, such as throttling and distributing requests to internal services. It acts as the single entry point in the [VPC](#virtual-private-cloud-vpc). As the traffic orchestrator, the router ensures control in change management, resulting in lower risks with progressive rollouts and quick rollback in case of failures.

#### Cache

VTEX employs caching across multiple layers, including HTTP, application, and database levels, ensuring greater speed and capacity in processing requests and consequently maintaining the platform's high availability.

Our cache layers follow the best practices and are continuously improved to provide better performance, which is critical for improving conversion rates. These cache layers can be easily invalidated to update data as required. For more information, see [Cache](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/understanding-how-the-cache-works--tutorials%5F258) documentation.

### Scalability

Leveraging cloud technology and microservices enables us to efficiently manage and scale our resources based on demand, thanks to built-in features like autoscaling.

Our multi-tenant architecture ensures elastic scalability, allowing stores to easily adapt to changing business requirements and handle traffic peaks during events like Black Friday. As your operation grows, our platform accommodates increased demand while maintaining performance.

![{"base64":"  ","img":{"width":810,"height":549,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":119926,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Cloud-infrastructure/scalability.jpg"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Cloud-infrastructure/scalability.jpg)

### Reliability

We deliver high availability, as defined in our [SLA agreement](https://read.calvincode.net/reader?url=https://vtex.com/us-en/privacy-and-agreements/agreements/), a document that expresses the service level of the platform's infrastructure and technically clarifies its operational uptime and downtime, as well as all the types of events considered as incidents.

You can monitor the platform's stability in real time and access the full incident and maintenance history at [VTEX Status](https://read.calvincode.net/reader?url=https://status.vtex.com/). Learn more about the information available on this page in our guide [VTEX Status page](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/vtex-status-page--gPhqDn9IQ3c67wbJEX3JJ).

Additionally, we provision our infrastructure automatically using the [Infrastructure as Code (IaC)](https://read.calvincode.net/reader?url=https://aws.amazon.com/what-is/iac/?nc1=h%5Fls) concept. We autoscale our applications and microservices. For each service, we control Latency and CPU usage to identify if a specific module needs more or fewer servers, keeping safe thresholds so that adjustments can be made proactively. Our infrastructure also supports load-balancing, deploying, and rolling-back versions of our systems so we can provide scalable and stable up-to-date systems to VTEX customers.

VTEX IO leverages containerization and clustering technologies to manage deployment, maintenance, and scaling processes.

VTEX teams constantly execute load tests to ensure the platform is ready to scale with our customers' demands, gaining visibility, and fixing bottlenecks.

#### Maintenance

All scheduled maintenance activities by VTEX are communicated beforehand through [VTEX Status](https://read.calvincode.net/reader?url=https://status.vtex.com/). Maintenance typically occurs once every 60 days and lasts about 2–3 hours during the late evening (EST) and outside of peak sales hours. During this period, customers are not expected to experience downtime.

### Security

VTEX counts with a comprehensive cloud monitoring system, covering both internal environments and the edge, in line with the [AWS Security Maturity Model](https://read.calvincode.net/reader?url=https://maturitymodel.security.aws.dev/en/model/). This system offers a range of features, including configuration change alarms and security notifications.

All events within our platform are routed to a Security Information and Event Management (SIEM) infrastructure, where we can correlate events, providing traceability and real-time alerts for our Security team to promptly act on risk mitigation.

> See our [Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security) overview for more details.

#### Threat intelligence

In addition to global platform monitoring, we conduct tenant-level monitoring across the surface web and dark web. This proactive approach allows us to quickly identify and address issues such as unauthorized exposure of keys or cloned pages, preventing potential incidents from escalating.

#### Active resource monitoring and patch management

Our platform implements active resource monitoring and patch management. This keeps our infrastructure up-to-date with the latest security patches and configurations. By actively monitoring and managing resources, we efficiently address any security gaps or vulnerabilities.

Find more information about our security practices at [Security - VTEX](https://read.calvincode.net/reader?url=https://vtex.com/us-en/security/).

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/_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/VTEX-Platform-Overview/Cloud-infrastructure/cloud-infrastructure.md)

[VTEX Platform Overview« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure//docs/guides/vtex-platform-overview)[SecurityNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure//docs/guides/security)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/_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

[SaaS multi-tenancy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23saas-multi-tenancy)

[Logical separation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23logical-separation)[Constant evolution and growth](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23constant-evolution-and-growth)

[Microservices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23microservices)

[Virtual Private Cloud (VPC)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23virtual-private-cloud-vpc)[Deployment strategy and change management](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23deployment-strategy-and-change-management)

[REST APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23rest-apis)

[Cloud-native](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23cloud-native)

[Content delivery optimization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23content-delivery-optimization)[Scalability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23scalability)[Reliability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23reliability)[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23security)

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-Platform-Overview/Cloud-infrastructure/cloud-infrastructure.md)

Copy page

On this page

ON THIS PAGE

[SaaS multi-tenancy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23saas-multi-tenancy)

[Logical separation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23logical-separation)[Constant evolution and growth](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23constant-evolution-and-growth)

[Microservices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23microservices)

[Virtual Private Cloud (VPC)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23virtual-private-cloud-vpc)[Deployment strategy and change management](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23deployment-strategy-and-change-management)

[REST APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23rest-apis)

[Cloud-native](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23cloud-native)

[Content delivery optimization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23content-delivery-optimization)[Scalability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23scalability)[Reliability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23reliability)[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure/docs/guides/cloud-infrastructure%23security)

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 faststore molecules popover 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/faststore/molecules-popover/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/getting-started-with-storefront-solutions)

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-overview)

[Accordion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-accordion)

[Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-alert)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-breadcrumb)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-buy-button)

[Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-card)

[Carousel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-carousel)

[CartItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-cart-item)

[CheckboxField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-checkbox-field)

[DiscountBadge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-discount-badge)

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-dropdown)

[Gift](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-gift)

[IconButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-icon-button)

[InputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-input-field)

[LinkButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-link-button)

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-modal)

[NavbarLinks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-navbar-links)

[OrderSummary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-order-summary)

[Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-popover)

[ProductCard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-product-card)

[ProductPrice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-product-price)

[ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-product-title)

[QuantitySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-quantity-selector)

[RadioField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-radio-field)

[RadioGroup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-radio-group)

[Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-rating)

[RatingField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-rating-field)

[RegionBar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-region-bar)

[SearchAutocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-search-auto-complete)

[SearchDropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-search-dropdown)

[SearchHistory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-search-history)

[SearchInputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-search-input-field)

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-search-products)

[SearchTop](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-search-top)

[SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-select-field)

[SKUSelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-sku-selector)

[Table](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-table)

[Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-tag)

[TextareaField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-textarea-field)

[Toast](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-toast)

[Toggle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-toggle)

[ToggleField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-toggle-field)

[Tooltip](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-tooltip)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/troubleshooting-overview)

---

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

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/troubleshooting)

---

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/getting-started-with-storefront-solutions)

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-overview)

[Accordion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-accordion)

[Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-alert)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-breadcrumb)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-buy-button)

[Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-card)

[Carousel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-carousel)

[CartItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-cart-item)

[CheckboxField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-checkbox-field)

[DiscountBadge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-discount-badge)

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-dropdown)

[Gift](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-gift)

[IconButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-icon-button)

[InputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-input-field)

[LinkButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-link-button)

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-modal)

[NavbarLinks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-navbar-links)

[OrderSummary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-order-summary)

[Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-popover)

[ProductCard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-product-card)

[ProductPrice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-product-price)

[ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-product-title)

[QuantitySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-quantity-selector)

[RadioField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-radio-field)

[RadioGroup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-radio-group)

[Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-rating)

[RatingField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-rating-field)

[RegionBar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-region-bar)

[SearchAutocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-search-auto-complete)

[SearchDropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-search-dropdown)

[SearchHistory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-search-history)

[SearchInputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-search-input-field)

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-search-products)

[SearchTop](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-search-top)

[SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-select-field)

[SKUSelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-sku-selector)

[Table](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-table)

[Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-tag)

[TextareaField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-textarea-field)

[Toast](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-toast)

[Toggle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-toggle)

[ToggleField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-toggle-field)

[Tooltip](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-tooltip)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/troubleshooting-overview)

---

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

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/storefront-development)

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

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/components-index)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-overview)

Popover

[ Source code](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/tree/main/packages/components/src/molecules/Popover)

`Popover` is a floating container component that provides contextual information positioned relative to a trigger element, such as a button or icon, when a user interacts with it to open the container.

Example

Code

Popover Trigger

---

## Usage

### Import the component

`1

import { Popover } from '@faststore/ui'

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import '@faststore/ui/src/components/molecules/Popover/styles.scss';

`

For details, see [Importing FastStore UI component styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles).

---

## Design tokens

| Local token                           | Default value/Global token linked                                                  |
| ------------------------------------- | ---------------------------------------------------------------------------------- |
| \--fs-popover-margin                  | 0 var(--fs-spacing-3)                                                              |
| \--fs-popover-padding                 | var(--fs-spacing-3) var(--fs-spacing-4) var(--fs-spacing-4)                        |
| \--fs-popover-border-radius           | var(--fs-border-radius)                                                            |
| \--fs-popover-bkg-color               | var(--fs-color-body-bkg)                                                           |
| \--fs-popover-box-shadow              | var(--fs-shadow-darker)                                                            |
| \--fs-popover-z-index                 | var(--fs-z-index-top)                                                              |
| \--fs-popover-indicator-size          | var(--fs-spacing-1)                                                                |
| \--fs-popover-indicator-distance-edge | var(--fs-spacing-3)                                                                |
| \--fs-popover-indicator-distance-base | var(--fs-spacing-1)                                                                |
| \--fs-popover-indicator-translate     | calc(var(--fs-popover-indicator-size) + var(--fs-popover-indicator-distance-base)) |

---

## Data attributes

You can target and override `Popover` styles using the following data attributes:

`data-fs-popover`

`data-fs-popover-header`

`data-fs-popover-header-title`

`data-fs-popover-header-dismiss-button`

`data-fs-popover-indicator`

`data-fs-popover-header-placement="top | top-center | top-start | top-end | bottom | bottom-center | bottom-start | bottom-end"`

---

## Props

| Name                     | Type                              | Description                                                                            | Default       |              |                          |                                                                                |                     |             |                         |
| ------------------------ | --------------------------------- | -------------------------------------------------------------------------------------- | ------------- | ------------ | ------------------------ | ------------------------------------------------------------------------------------------ | ------------------- | ----------- | ----------------------- |
| **title**                | string                            | The Popover header's title.                                                            |               |              |                          |                                                                                |                     |             |                         |
| **content\***            | string \| number                  | false                                                                                | true          | {}           | ReactElement<any, string | JSXElementConstructor<any>>                                                                | Iterable<ReactNode> | ReactPortal | Content of the Popover. |
| **placement**            | "bottom-start" \| "bottom-center" | "bottom-end"                                                                           | "top-start"   | "top-center" | "top-end"                | Defines the side or side-alignment (e.g., "bottom-start", "bottom-center") of the Popover. | bottom-start        |             |                         |
| **dismissible**          | false \| true                     | If the Popover can be closed by a button.                                              | false         |              |                          |                                                                                |                     |             |                         |
| **onDismiss**            | () => void                        | Called when the Popover is dismissed.                                                  |               |              |                          |                                                                                |                     |             |                         |
| **onEntered**            | () => void                        | Callback when the Popover is fully rendered and positioned.                            |               |              |                          |                                                                                |                     |             |                         |
| **closeButtonAriaLabel** | string                            | Close button aria-label.                                                               | Close Popover |              |                          |                                                                                |                     |             |                         |
| **isOpen\***             | false \| true                     | Controls whether the Popover is open.                                                  |               |              |                          |                                                                                |                     |             |                         |
| **testId**               | string                            | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-popover    |              |                          |                                                                                |                     |             |                         |
| **offsetTop**            | number                            | Offset value for top position (e.g.: 12).                                              | 8             |              |                          |                                                                                |                     |             |                         |
| **offsetLeft**           | number                            | Offset value for left position (e.g.: 12).                                             | 0             |              |                          |                                                                                |                     |             |                         |
| **triggerRef**           | RefObject<HTMLElement>            | Reference to the trigger element that opens the Popover.                               |               |              |                          |                                                                                |                     |             |                         |

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/_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/guides/faststore/molecules-popover/_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/faststore/components/molecules/popover.mdx)

[OrderSummary« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-order-summary)[ProductCardNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-product-card)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/_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/guides/faststore/molecules-popover/_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

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-popover%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-popover%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-popover%23import-styles)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-popover%23design-tokens)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-popover%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-popover%23props)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/molecules/popover.mdx)

Copy page

On this page

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-popover%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-popover%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-popover%23import-styles)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-popover%23design-tokens)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-popover%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-popover/docs/guides/faststore/molecules-popover%23props)

On this page

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


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

[User] How do I use the VTEX catalog images app? Provide documentation and configuration details.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

[AB Tester](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtexarg.abtester)

[Abandoned Cart Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.abandoned-cart-service)

[Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.badges)

[Broadcaster](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.broadcaster)

[Catalog Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.catalog-images)

[Checkout UI Custom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.checkout-ui-custom)

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

[Messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.messages)

[Product Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.product-context)

[Pickup point selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtexbr.pickup-selector)

[Rewriter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.rewriter)

[Responsive Values](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.responsive-values)

[Search GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.search-graphql)

[Session Client](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.session-client)

[Store Icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.store-icons)

[Store Sitemap](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.store-sitemap)

[VTEX Telemarketing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.telemarketing)

[Assembly Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/guides/assembly-options-app)

[Affiliates Program](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/guides/affiliates-program-app)

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

[AB Tester](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtexarg.abtester)

[Abandoned Cart Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.abandoned-cart-service)

[Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.badges)

[Broadcaster](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.broadcaster)

[Catalog Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.catalog-images)

[Checkout UI Custom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.checkout-ui-custom)

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

[Messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.messages)

[Product Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.product-context)

[Pickup point selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtexbr.pickup-selector)

[Rewriter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.rewriter)

[Responsive Values](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.responsive-values)

[Search GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.search-graphql)

[Session Client](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.session-client)

[Store Icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.store-icons)

[Store Sitemap](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.store-sitemap)

[VTEX Telemarketing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.telemarketing)

[Assembly Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/guides/assembly-options-app)

[Affiliates Program](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/guides/affiliates-program-app)

---

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

---

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

---

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

---

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

---

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

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

Catalog Images app

Official extension

Version: 0.3.3

Latest version: 0.3.3

The Catalog Images app provides REST and [GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-7-consuming-data%23understanding-graphql) APIs for saving or deleting catalog images in File Manager without overriding images with the same name.

> This app is available only to sellers invited through [Seller Portal](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-to-set-up-your-store-on-seller-portal--6w1vBdRH2uuBGmUqgNQjwK) and have the [Seller Portal Edition app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/seller-portal-edition-app) enabled by default.
>
> If your store operates under a standard VTEX account, you can upload images through the [Admin](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-to-update-the-image-of-an-sku--5PMb54FnvUuWOq2qGyAosu), [spreadsheet](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/importing-images-from-a-spreadsheet--tutorials%5F262), or the [Catalog APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/catalog-api%23overview).

## Before you begin

### Install the app

Using [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-vtex-io-cli-installation-and-command-reference), log in to your account and run the following command to install the Catalog Images app:

`1

vtex install vtex.catalog-images@0.x

`

### Create a local token

First, you must have an appKey and appToken to use as authentication headers in the app requests. See [Authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/getting-started-authentication) for more information on obtaining these credentials.

Using your appKey and appToken, make the following API request to obtain a local token, which the app requires. Replace `{{accountName}}` with your VTEX account name, and `{{my_appkey}}` and `{{my_apptoken}}` with their respective values.

**Request local token:**

`1

curl --location --request POST 'http://api.vtexcommercestable.com.br/api/vtexid/apptoken/login?an={{accountName}}' \

2

--header 'Content-Type: application/json' \

3

--data-raw '{

4

 "appkey": "{{my_appkey}}",

5

 "apptoken": "{{my_apptoken}}"

6

}'

`

**Response:**

`1

{

2

 "authStatus": "Success",

3

 "token": "{{local_token}}",

4

 "expires": 1673305329

5

}

`

The `local_token` value you receive in the response is required for authentication in the app's API calls, as explained in the following sections.

Once the app is installed and the local token is created, you can use the Catalog Images app resources through [REST API](#rest-api) or [GraphQL API](#graphql-api).

## REST API

Two REST API endpoints are available to manage images using the Catalog Images app:

* `POST` [Save image](#save-image)
* `DELETE` [Delete image](#delete-image)

### Save image

To save an image in File Manager, use the request below. Send one image at a time and set the request body format to `multipart/form-data`.

`1

curl --location --request POST 'https://app.io.vtex.com/vtex.catalog-images/v0/{{accountName}}/{{workspace}}/images/save/{{fileName}}' \

2

--header 'VtexIdclientAutCookie: {{token}}' \

3

--form '=@"{{filePath}}"'

`

Replace the following values in your request:

| **Property** | **Location** | **Type** | **Description**                                                                                | **Example**            |
| ------------ | ------------ | -------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------- |
| accountName  | Path         | String   | Name of the VTEX account.                                                                                | mystore                |
| workspace    | Path         | String   | Name of the workspace where you want to upload the image. **You can only upload images in the master workspace**. | master                 |
| fileName     | Path         | String   | Name and extension of the image file.                                                                             | product.png            |
| token        | Header       | \-       | Local token required for authentication.                                                                          | \-                     |
| filePath     | Request body | String   | Full path of the file.                                                                                | /C:/Images/product.png |

If an image with the same `fileName` already exists, the response is `Conflict (409)`, with the URL of the conflicting image in the response body.

Otherwise, the response is `OK (200)` with the `id`, `slug`, and `fullUrl` in the response body, as follows:

**Response body example (200 OK):**

`1

{

2

 "id": "special-offer.png",

3

 "slug": "/assets/vtex.catalog-images/products/special-offer___782206cd73597a717ed67eba399167a6.png",

4

 "fullUrl": "https://myvtexaccountname.vtexassets.com/assets/vtex.catalog-images/products/special-offer___782206cd73597a717ed67eba399167a6.png"

5

}

`

### Delete image

The following REST API route allows you to delete a Catalog image in File Manager:

`1

curl --location -g --request DELETE 'https://app.io.vtex.com/vtex.catalog-images/v0/{{accountName}}/{{workspace}}/images/delete/{{fileName}}' \

2

--header 'VtexIdclientAutCookie: {{token}}'

`

Replace the values as explained below:

| **Property** | **Location** | **Type** | **Description**                                                                                | **Example** |
| ------------ | ------------ | -------- | ----------------------------------------------------------------------------------------------------------------- | ----------- |
| accountName  | Path         | String   | Name of the VTEX account.                                                                                | mystore     |
| workspace    | Path         | String   | Name of the workspace where you want to delete the image. **You can only delete images in the master workspace**. | master      |
| fileName     | Path         | String   | Name and extension of the image file.                                                                             | product.png |
| token        | Header       | \-       | Local token required for authentication.                                                                          | \-          |

If the image exists and is successfully deleted, the response will be an empty body with the `OK (200)` status code. If the image doesn't exist, the response is `Not Found (404)`.

## GraphQL API

The following mutations are available for Catalog images using the app's GraphQL API:

* [saveImage](#saveimage)
* [deleteImage](#deleteimage)

### saveImage

Use the following mutation to save an image in File Manager using GraphQL:

**Mutation:**

`1

saveImage(filename: String!, file: Upload!){

2

 id

3

 slug

4

 fullUrl

5

}

`

**Response body example (200 OK):**

`1

{

2

 "id": "special-offer.png",

3

 "slug": "/assets/vtex.catalog-images/products/special-offer___782206cd73597a717ed67eba399167a6.png",

4

 "fullUrl": "https://myvtexaccountname.vtexassets.com/assets/vtex.catalog-images/products/special-offer___782206cd73597a717ed67eba399167a6.png"

5

}

`

If an image with the same name already exists in File Manager, the response includes an array of errors, including `CONFLICT_FILE_ERROR`.

**Response body example (409 Conflict):**

`1

"errors": [

2

 {

3

 [...]

4

 "extensions": {

5

 "code": "CONFLICT_FILE_ERROR",

6

 "data": {

7

 "statusCode": 409,

8

 "file": "https://sandboxintegracao.vtexassets.com/assets/vtex.catalog-images/src/car22___aabd8ae86160533e7090c024ac004bc6.jpg"

9

 }

10

 },

11

 [...]

12

 }

13

]

`

### deleteImage

Use the following mutation to delete an image in File Manager using GraphQL:

**Mutation:**

`1

deleteImage(filename: String!){

2

 statusCode

3

}

`

**Response body example (200 OK):**

`1

{

2

 "statusCode": "Ok"

3

}

`

If the image doesn't exist, the `statusCode` value in the response is `NotFound`.

[Broadcaster« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.broadcaster)[Checkout UI CustomNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.checkout-ui-custom)

See also

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.catalog-images%23before-you-begin)

[Install the app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.catalog-images%23install-the-app)[Create a local token](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.catalog-images%23create-a-local-token)

[REST API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.catalog-images%23rest-api)

[Save image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.catalog-images%23save-image)[Delete image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.catalog-images%23delete-image)

[GraphQL API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.catalog-images%23graphql-api)

[saveImage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.catalog-images%23saveimage)[deleteImage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.catalog-images/docs/apps/vtex.catalog-images%23deleteimage)

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