Documentation
Feedback
Guides
API Reference

Guides
VTEX Platform OverviewStore architecture
Understanding VTEX reference architectures

Learn how each element is represented in VTEX reference architectures.

The VTEX reference architectures follow a common market methodology that segments the main agents involved in the solution in a simple, orderly, and logical manner. The structure of the design highlights the systems in blocks, colors, and objective descriptions of connections, facilitating visualization and understanding by all stakeholders.

In this guide, you will learn how each element is represented in the VTEX architectures, considering the characteristics of the modules:

Captions, colors, and connections

Different colors are used to identify the characteristics of the modules presented, such as where they are executed and which involved part provides them.

Understand the meaning of each representation below:

{"base64":"  ","img":{"width":1305,"height":766,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":223144,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/store-architecture/legend-and-colors.png"}}

  1. Module code developed exclusively by VTEX with execution in VTEX infrastructure: Pink background and pink border.
  2. Module code not developed exclusively by VTEX (customizations) with execution in VTEX infrastructure: White background and pink border.
  3. Module code not developed exclusively by VTEX (customizations) with execution outside VTEX infrastructure: White background and black border.
  4. Back office services, which are executed outside VTEX infrastructure: Gray background and black border.
  5. Optional module (e.g., Integration Layers): Dashed border.

The connection between modules and systems should be represented with arrows, which the arrowheads indicate the destination of the information and its return:

  1. Black arrows: Used for asynchronous calls, which are not real-time.
  2. Blue arrows: Used for synchronous calls, in real-time.

Macro elements: Layers

The macro elements represent the entities involved in the project. In general, four major layers are considered: Merchant Channels, VTEX Core Services, Third-Party, and Back Office.

{"base64":"  ","img":{"width":1255,"height":796,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":78051,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/store-architecture/macro-elements-layers.png"}}

Within each of these blocks, there are micro elements, which are the components that constitute the project. These components can be modules, apps, integration systems, sellers, sales channels, or any other component relevant to the architecture.

Micro elements: Components

Now equipped with knowledge about the macro elements, it is possible to understand the components that constitute the four major layers: Merchant Channels, VTEX Core Services, Third-Party, and Back Office.

Merchant Channels

The merchant channels are the different digital sales channels used by the store, such as the website, PWA, and mobile app.

{"base64":"  ","img":{"width":3890,"height":578,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":177568,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/store-architecture/merchant-channels.png"}}

VTEX Core Services

VTEX Core Services are the essential components or frameworks provided by VTEX within the platform. These services include modules such as Catalog, Order Management System (OMS), Pricing, among others. They constitute the foundation of the VTEX platform, empowering businesses to effectively manage and conduct their ecommerce strategies.

Considering the architecture of a B2C store, the diagram below presents the blocks with pink background and border, representing the native components of VTEX.

{"base64":"  ","img":{"width":1440,"height":694,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":332922,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/store-architecture/vtex-core-services.png"}}

Within the main block, there is the VTEX IO - Apps block, which contains the custom apps for frontend, backend, and Admin.

Although they are executed in VTEX infrastructure, the development and maintenance of custom apps for frontend, backend, and VTEX Admin are responsibility of the store development team.

Also within the VTEX IO - Apps block, you will find the VTEX App, which are plug-and-play solutions developed and maintained by VTEX.

Third-Party

Third-party systems or modules executed and maintained externally to VTEX include payment providers, data monitoring systems, and customization services. According to business needs, third-party systems or modules could replace a native VTEX feature or provide a completely new one.

{"base64":"  ","img":{"width":1090,"height":916,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":138501,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/store-architecture/third-party.png"}}

Back office

An ecommerce operation may use several external systems to manage its resources and information, such as Enterprise Resource Planning (ERP), Customer Relationship Management (CRM), and Warehouse Management System (WMS), among others.

These systems belong to the Merchant Back office layer, as you can see in the following diagram:

{"base64":"  ","img":{"width":4495,"height":500,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":175330,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/store-architecture/back-office.png"}}

Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
See also
Store architecture
Guides
Contributors
1
Photo of the contributor
+ 1 contributors
On this page