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

[User] How do I use the VTEX store sitemap 2.18.3 CUSTOM ROUTES ARCHITECTURE app? Provide documentation and configuration details.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Custom Routes Architecture

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

Version: 2.18.3

Latest version: 2.18.3

## Overview

The custom routes solution provides pre-generated route data for VTEX stores through a background processing architecture with caching and automatic regeneration.

## System Architecture

Cache Miss

Cache Hit

No Lock or Expired

Active Lock

Yes - Stale

No - Fresh

Client Request: GET /custom-routes

customRoutes Middleware

Check VBase Cache

No Cached Data Found

Cached Data Found

Trigger Generation

Check Generation Lock

Create Generation Lock

Generation In Progress

Start Background Generation

Return 404: Generation Triggered

Return 404: Generation In Progress

Data Age > 1 Day?

Trigger Background Regeneration

Serve Cached Data

Return 200 + Data

Client Receives 404

Client Receives 200

## Background Processing Flow

ClientcustomRoutes MiddlewareVBase StorageBackground PromisegenerateCustomRoutes FunctionApps Routes ServiceUser Routes Servicealt\[Cache Miss\]\[Cache Hit - Fresh Data\]\[Cache Hit - Stale Data\]GET /custom-routesGet custom-routes.jsonnull (not found)Check generation lockNo lock foundCreate lock fileStart generateCustomRoutes() (fire-and-forget)404 - Generation triggeredExecute generationFetch apps routesFetch user routesApps routes arrayUser routes arrayCombine route dataSave custom-routes.jsonClear generation lockReturn cached data (< 1 day old)200 + Routes dataReturn cached data (> 1 day old)Trigger background regeneration (fire-and-forget)200 + Routes data (stale)Execute regenerationClientcustomRoutes MiddlewareVBase StorageBackground PromisegenerateCustomRoutes FunctionApps Routes ServiceUser Routes Service

## VBase Storage Structure

VBase Storage

Bucket: configuration

Bucket: custom-routes

File: generation-lock.json
Type: Generation Lock
TTL: 23 hours

File: custom-routes.json
Type: Cached Routes Data
Regeneration: After 1 day

Content:
{
 generationId: string,
 endDate: string
}

Content:
{
 timestamp: number,
 data: \[
 {name: 'apps-routes', routes: \[\]},
 {name: 'user-routes', routes: \[\]}
 \]
}

## Response Status Codes

| Status  | Scenario                          | Body                                                                       | Behavior                                                        |
| ------- | --------------------------------- | -------------------------------------------------------------------------- | --------------------------------------------------------------- |
| **200** | Cached data available             | { data: \[...\] }                                                          | Returns cached routes (may trigger background refresh if stale) |
| **404** | No cache + Generation triggered   | { message: "Custom routes not available. Generation has been triggered." } | New generation started                                          |
| **404** | No cache + Generation in progress | { message: "Generation already in progress, expires at {date}" }           | Active lock prevents duplicate generation                       |
| **500** | Server error                      | { success: false, error: "..." }                                           | Unexpected error occurred                                       |

## Key Components

### Files

* **`node/middlewares/customRoutes.ts`**: Main middleware handling requests and triggering background generation
* **`node/middlewares/generateMiddlewares/generateCustomRoutes.ts`**: Background generation function
* **`node/utils.ts`**: Shared utilities and constants
* **`node/services/routes.ts`**: Route fetching services

### Constants (from `utils.ts`)

`1

export const CUSTOM_ROUTES_BUCKET = 'custom-routes'

2

export const CUSTOM_ROUTES_FILENAME = 'custom-routes.json'

3

export const CUSTOM_ROUTES_GENERATION_LOCK_FILENAME = 'generation-lock.json'

4

export const CONFIG_BUCKET = 'configuration'

`

### Background Generation Mechanism

The generation is triggered directly via a background promise (fire-and-forget pattern):

`1

// Execute generation in background - don't await

2

generateCustomRoutes(ctx).catch(error => {

3

 logger.error({

4

 message: 'Background custom routes generation failed',

5

 type: 'custom-routes-background-error',

6

 generationId,

7

 error,

8

 })

9

})

`

**Key characteristics:**

* **Direct function call**: No event system overhead
* **Fire-and-forget**: Promise runs in background without blocking response
* **Error handling**: Errors are caught and logged but don't crash the service
* **Synchronous trigger**: Immediate execution without event queue delays

### Generation Lock Mechanism

1. **Lock Creation**: When generation starts, a lock file is created with:
   * `generationId`: Random identifier
   * `endDate`: Expiration timestamp (23 hours from creation)
2. **Lock Check**: Before starting generation:
   * If lock exists and is valid → Reject with `MultipleCustomRoutesGenerationError`
   * If lock expired or doesn't exist → Proceed with generation
3. **Lock Cleanup**: After generation completes (success or failure), lock is removed
4. **Lock Duration Rationale**:
   * **23 hours** chosen to align with daily regeneration schedule
   * Prevents indefinite blocking if cleanup fails
   * Allows next day's scheduled generation to proceed even if previous generation failed

### Caching Strategy

* **Storage**: VBase bucket `custom-routes`, file `custom-routes.json`
* **Structure**: Account-level (not binding-specific)
* **Freshness**: Data older than 1 day triggers background regeneration
* **Stale-While-Revalidate**: Returns stale data while refreshing in background

## Benefits

✅ **Background Processing**: Asynchronous generation doesn't block requests
✅ **Direct Execution**: No event system overhead or delays
✅ **Lock Mechanism**: Prevents duplicate concurrent generations with 23-hour auto-expiration
✅ **Stale-While-Revalidate**: Always serves data when available, refreshes in background
✅ **Simple Filename**: Single `generation-lock.json` file for lock management
✅ **Account-Level Caching**: Single `custom-routes.json` per account (not per binding)
✅ **Centralized Constants**: All configuration in `utils.ts`
✅ **Consistent Status Codes**: 404 when unavailable, 200 when serving data
✅ **Daily Generation Safe**: 23-hour lock ensures next day's generation proceeds even if cleanup fails
✅ **Error Resilience**: Background errors are logged but don't affect service availability

See also

[Vtex.store SitemapVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM_ROUTES_ARCHITECTURE/docs/apps/vtex.store-sitemap)[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM_ROUTES_ARCHITECTURE/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM%5FROUTES%5FARCHITECTURE%23overview)

[System Architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM_ROUTES_ARCHITECTURE/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM%5FROUTES%5FARCHITECTURE%23system-architecture)

[Background Processing Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM_ROUTES_ARCHITECTURE/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM%5FROUTES%5FARCHITECTURE%23background-processing-flow)

[VBase Storage Structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM_ROUTES_ARCHITECTURE/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM%5FROUTES%5FARCHITECTURE%23vbase-storage-structure)

[Response Status Codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM_ROUTES_ARCHITECTURE/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM%5FROUTES%5FARCHITECTURE%23response-status-codes)

[Key Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM_ROUTES_ARCHITECTURE/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM%5FROUTES%5FARCHITECTURE%23key-components)

[Files](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM_ROUTES_ARCHITECTURE/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM%5FROUTES%5FARCHITECTURE%23files)[Constants (from utils.ts)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM_ROUTES_ARCHITECTURE/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM%5FROUTES%5FARCHITECTURE%23constants-from-utilsts)[Background Generation Mechanism](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM_ROUTES_ARCHITECTURE/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM%5FROUTES%5FARCHITECTURE%23background-generation-mechanism)[Generation Lock Mechanism](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM_ROUTES_ARCHITECTURE/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM%5FROUTES%5FARCHITECTURE%23generation-lock-mechanism)[Caching Strategy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM_ROUTES_ARCHITECTURE/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM%5FROUTES%5FARCHITECTURE%23caching-strategy)

[Benefits](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM_ROUTES_ARCHITECTURE/docs/apps/vtex.store-sitemap@2.18.3/CUSTOM%5FROUTES%5FARCHITECTURE%23benefits)

Was this helpful?

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


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

[User] Provide a guide on guides vtex io documentation roles in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

App Development

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

---

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

---

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

---

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

---

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

---

Project structure

---

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

---

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

---

Managing apps

---

Development guides

---

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

---

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

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/vtex-io-documentation-policies)

[Accessing external resources within a VTEX IO app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/accessing-external-resources-within-a-vtex-io-app)

[Controlling access to app resources](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/controlling-access-to-app-resources)

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

[VTEX Resource Name (VRN)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/vtex-io-documentation-vrn)

[Policies from License Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/vtex-io-documentation-policies-from-license-manager)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/ab-tests)

---

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

---

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

---

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

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

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

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

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

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

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

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

---

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

App Development

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

---

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

---

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

---

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

---

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

---

Project structure

---

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

---

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

---

Managing apps

---

Development guides

---

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

---

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

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/vtex-io-documentation-policies)

[Accessing external resources within a VTEX IO app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/accessing-external-resources-within-a-vtex-io-app)

[Controlling access to app resources](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/controlling-access-to-app-resources)

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

[VTEX Resource Name (VRN)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/vtex-io-documentation-vrn)

[Policies from License Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/vtex-io-documentation-policies-from-license-manager)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/ab-tests)

---

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

---

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

---

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

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

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

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles/docs/guides/vtex-io-documentation-policies)

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

Roles

Roles are uniquely identifiable names given to request sources.

Whenever a request is performed in the VTEX IO platform, the source of this action, which can be the user or app responsible for performing that request, automatically receives a unique role.

In the sequence, to detect whether or not the request source is authorized to perform that particular request, and also to determine if the call can go through, VTEX IO platform checks if the source role contains the required policies attached.

> As a single request source can have different permissions within the same account, each role can also have multiple policies attached to it.

Since apps and users are able to perform a request on the platform, both of them mandatorily receive roles. However, notice the following: app and user roles are structured in different formats.

For example: an user making a request would receive a role similar to `user:f1sd8705-b34f-48ff-a113-2b8bb8c22411`, or `user:<e-mail>`. Installed and linked apps, in turn, would receive roles as `app:vtex.auth-server@1.0.0` and `link:vtex.auth-server@1.0.0`.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Reference/concepts/vtex-io-documentation-roles.md)

[Controlling access to app resources« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles//docs/guides/controlling-access-to-app-resources)[VTEX Resource Name (VRN)Next »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-roles//docs/guides/vtex-io-documentation-vrn)

Contributors

1

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

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Reference/concepts/vtex-io-documentation-roles.md)

Copy page

On this page

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 shipping option components 2.0.0 AvailabilityBadges 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.shipping-option-components@2.0.0/AvailabilityBadges/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/guides/pixel-apps)

---

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

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/updates/release-notes)

VTEX IO Apps

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

---

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

---

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

---

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

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/guides/pixel-apps)

---

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

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/guides/vtex-io-deprecated-apps)

---

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/vtex-io-apps)

Availability Badges

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

Version: 2.0.0

Latest version: 2.0.0

The `availability-badges` block displays availability badges for product delivery and pickup.

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

## Configuration

1. Import the `shipping-option-components` app to your theme's dependencies in the manifest.json file as in the following example:

`1

 "dependencies": {

2

 "shipping-option-components": "1.x"

3

4

 }

`

1. Add the `availability-badges` block to the `product-summary.shelf` component. For example:

`1

 "product-summary.shelf": {

2

 "children": [

3

 "availability-badges"

4

 ]

5

 }

`

### Props

Although this block does not have explicit props, it uses the `ProductSummaryContext` and `useShippingOptionState` to retrieve delivery information.

## Customization

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

| CSS Handles              |
| ------------------------ |
| availabilityBadgeCircle  |
| availabilityPickupButton |

## Notes

* Delivery availability is defined at the product level.
* Each product may or may not have each delivery method (Shipping and Pickup).
* The store must be regionalized for the component to work correctly.

See also

[Vtex.shipping Option ComponentsVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/apps/vtex.shipping-option-components)[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges%23configuration)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges%23props)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges%23customization)

[Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges/docs/apps/vtex.shipping-option-components@2.0.0/AvailabilityBadges%23notes)

Was this helpful?

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


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

[User] How do I use the VTEX store components 3.178.5 ShippingSimulator app? Provide documentation and configuration details.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Shipping Simulator

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

Version: 3.178.5

Latest version: 3.178.5

The `shipping-simulator` block estimates the shipping cost based on a postal code input.

![{"base64":"  ","img":{"width":2854,"height":1440,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":572087,"url":"https://user-images.githubusercontent.com/52087100/70262606-6ddb7c00-1773-11ea-91af-ededfd27aa95.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/52087100/70262606-6ddb7c00-1773-11ea-91af-ededfd27aa95.png)

## Configuration

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

`1

 "dependencies": {

2

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

3

 }

`

1. Add the `shipping-simulator` block to any child of the `store.product` template (Product Details Page template). For example:

`1

 "store.product": {

2

 "children": [

3

 "flex-layout.row#product",

4

 ]

5

 },

6

 "flex-layout.row#product": {

7

 "children": [

8

+ "shipping-simulator"

9

 ]

10

 },

`

1. Declare the `shipping-simulator` block using the props stated in the [Props](#props) table. For example:

`1

 "shipping-simulator": {

2

 "props": {

3

 "skuID": "342"

4

 }

5

 },

`

### Props

| Prop name             | Type    | Description                                                                                | Default value   |
| --------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
| pricingMode           | enum    | Defines how shipping information is displayed when a product includes gifts or attachments. You can choose to group shipping information by type (grouped) or display shipping costs for each item individually (individualItems).                                                                                | individualItems |
| seller                | String  | ID of the product seller.                                                                                | \-              |
| shouldUpdateOrderForm | Boolean | Determines whether interacting with the shipping simulator should update the shopper's address in their orderForm (true). This only works if the [orderform optimization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-enabling-order-form-optimization) is enabled; otherwise, it has no effect, even if set to true. | true            |
| skuId                 | String  | ID of the current product SKU.                                                                                | \-              |

## Customization

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

| CSS Handles                       |
| --------------------------------- |
| shippingContainer                 |
| shippingContainerLoader           |
| shippingCTA                       |
| shippingInputLoader               |
| shippingNoMessage                 |
| shippingTable                     |
| shippingTableBody                 |
| shippingTableCell                 |
| shippingTableCellDeliveryEstimate |
| shippingTableCellDeliveryName     |
| shippingTableCellDeliveryPrice    |
| shippingTableHead                 |
| shippingTableHeadDeliveryEstimate |
| shippingTableHeadDeliveryName     |
| shippingTableHeadDeliveryPrice    |
| shippingTableLabel                |
| shippingTableRadioBtn             |
| shippingTableRow                  |
| shippingZipcodeLabel              |
| shippingZipcodeLabelLoader        |

See also

[Vtex.store ComponentsVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ShippingSimulator/docs/apps/vtex.store-components)[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ShippingSimulator/docs/apps/vtex.store-components@3.178.5/ShippingSimulator%23configuration)

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

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

Was this helpful?

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


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

[User] Provide a guide on guides faststore overrides syncing components with the headless cms 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/overrides-syncing-components-with-the-headless-cms/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/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/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-overview)

[Overriding native component's props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-component-props)

[Overriding a native component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-native-component)

[Overriding section styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-section-styles)

[\`getOverriddenSection\` function](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-getoverriddensection-function)

[Syncing components with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms)

[Migrating Overrides v1 to v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-migrating-v1-to-v2)

[Overriding native components and props (v1)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-components-and-props-v1)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/override-use-cases-overview)

[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section)

[List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

[Experimental exports - Hooks and Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/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/overrides-syncing-components-with-the-headless-cms/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/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/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/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-overview)

[Overriding native component's props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-component-props)

[Overriding a native component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-native-component)

[Overriding section styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-section-styles)

[\`getOverriddenSection\` function](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-getoverriddensection-function)

[Syncing components with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms)

[Migrating Overrides v1 to v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-migrating-v1-to-v2)

[Overriding native components and props (v1)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-components-and-props-v1)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/override-use-cases-overview)

[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section)

[List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

[Experimental exports - Hooks and Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/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/overrides-syncing-components-with-the-headless-cms/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/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-overview)

Syncing components with the Headless CMS

After incorporating overridden components, sections, and [updating the props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-component-props) of FastStore native components, one crucial step is to ensure their availability in the Headless CMS.

## Instructions

1. In the FastStore root directory, create a folder named `cms`.
2. Inside `cms`, create the `faststore` folder.
3. Within the `cms/faststore` folder, create the `sections.json` file.
4. Add the schema of the new section to the `sections.json` file. The schema defines how the Headless CMS renders the section.
> Refer to the Step 3: Adding sections to the Headless CMS guide for further information on how to structure the schema. Also, refer to the [List of Native Sections and Overridable Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-list-of-native-sections) to check the schemas for each component.
5. Open the terminal and log in to your vtex account by running `vtex login {accountName}`.
6. run the following command to sync your changes with the Headless CMS:
`1
faststore cms-sync
`
7. Access the VTEX Admin and proceed to **Storefront > Headless CMS**.
8. Click on the page you desire to add the new section.
9. Click the add button (`+`) and add the new section.

Contributors

1

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

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/docs/developing-and-overriding-components/overrides/syncing-components-with-the-headless-cms.mdx)

[\`getOverriddenSection\` function« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-getoverriddensection-function)[Migrating Overrides v1 to v2Next »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-migrating-v1-to-v2)

See also

Contributors

1

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

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms%23instructions)

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/docs/developing-and-overriding-components/overrides/syncing-components-with-the-headless-cms.mdx)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms%23instructions)

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 managing your weni by vtex projects 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/managing-your-weni-by-vtex-projects/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/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/managing-your-weni-by-vtex-projects/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/data-protection-plus)

---

Weni by VTEX

Weni by VTEX CLI

[Using the Weni by VTEX CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/using-the-weni-by-vtex-cli)

[Weni by VTEX CLI Command Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/weni-by-vtex-cli-command-reference)

[Authenticating with your Weni by VTEX account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/authenticating-with-your-weni-by-vtex-account)

[Managing your Weni by VTEX projects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/managing-your-weni-by-vtex-projects)

[Understanding the core concepts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/weni-by-vtex-understanding-the-core-concepts)

[Working with Weni by VTEX agents](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/working-with-weni-by-vtex-agents)

[Fetching and filtering logs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/weni-by-vtex-fetching-and-filtering-logs)

[Using Weni Run to execute tool tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/using-weni-run-to-execute-tool-tests)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/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/managing-your-weni-by-vtex-projects/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/data-protection-plus)

---

Weni by VTEX

Weni by VTEX CLI

[Using the Weni by VTEX CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/using-the-weni-by-vtex-cli)

[Weni by VTEX CLI Command Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/weni-by-vtex-cli-command-reference)

[Authenticating with your Weni by VTEX account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/authenticating-with-your-weni-by-vtex-account)

[Managing your Weni by VTEX projects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/managing-your-weni-by-vtex-projects)

[Understanding the core concepts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/weni-by-vtex-understanding-the-core-concepts)

[Working with Weni by VTEX agents](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/working-with-weni-by-vtex-agents)

[Fetching and filtering logs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/weni-by-vtex-fetching-and-filtering-logs)

[Using Weni Run to execute tool tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/using-weni-run-to-execute-tool-tests)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides)

Weni by VTEX

Weni by VTEX CLI

[Managing your Weni by VTEX projects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/managing-your-weni-by-vtex-projects)

Managing your Weni by VTEX projects

Manage your Weni by VTEX projects with the CLI.

Learn how to manage your Weni by VTEX projects using the CLI.

### Project Commands

#### List Projects

View all projects you have access to:

`1

weni project list

`

Filter projects by organization UUID:

`1

weni project list --org <org-uuid>

`

If many results are available, you'll be prompted to load more pages (`p`) or quit (`q`).

This command shows:

* Project UUID
* Project name
* Organization
* Creation date

#### Select Project

Set a project as your current working project:

`1

weni project use <project-uuid>

`

Replace `<project-uuid>` with the UUID from the project list.

#### View Current Project

Check which project you're currently working with:

`1

weni project current

`

This prints the current project UUID stored by the CLI, e.g.: `Current project: <uuid>`

### Project Context

The CLI maintains a "current project" context, which is used by other commands like `project push`. This context is stored in your `.weni_cli` file.

#### Why Project Context Matters

* Simplifies command usage (no need to specify project in every command)
* Prevents accidental deployments to wrong projects
* Maintains consistent workflow

### Best Practices

#### Project Organization

1. **Naming Conventions**
   * Use clear, descriptive project names
   * Follow your organization's naming standards
2. **Project Structure**
   * Keep related agents together
   * Maintain consistent file organization

#### Working with Multiple Projects

1. **Context Switching**
   * Always verify current project before operations
   * Use `project current` to confirm active project
2. **Project Isolation**
   * Keep project-specific files in separate directories
   * Use version control for project configurations

### Common Workflows

#### Starting a New Project

1. Create project in Weni by VTEX platform
2. List projects to get UUID:
`1
weni project list
`
3. Select the new project:
`1
weni project use <new-project-uuid>
`
4. Verify selection:
`1
weni project current
`

#### Managing Multiple Projects

1. List available projects
2. Switch between projects as needed
3. Verify current project before operations
4. Keep project files organized

### Troubleshooting

#### Common Issues

1. **Project Not Found**
   * Verify project UUID
   * Check your access permissions
   * Ensure you're in the correct environment
2. **Unable to Switch Projects**
   * Verify `.weni_cli` file permissions
   * Check authentication status
   * Confirm project exists and is accessible
3. **Project List Empty**
   * Verify authentication
   * Check environment configuration
   * Confirm you have project access

#### Getting Help

If you encounter issues:

1. Check command syntax
2. Verify project access
3. Contact support if needed

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F170467615%3Fv%3D4%26w=64%26q=75)](https://github.com/mariananantua)

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/Weni-by-VTEX/CLI/managing-your-weni-by-vtex-projects.md)

[Authenticating with your Weni by VTEX account« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects//docs/guides/authenticating-with-your-weni-by-vtex-account)[Understanding the core conceptsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects//docs/guides/weni-by-vtex-understanding-the-core-concepts)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F170467615%3Fv%3D4%26w=64%26q=75)](https://github.com/mariananantua)

ON THIS PAGE

[Project Commands](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/managing-your-weni-by-vtex-projects%23project-commands)

[Project Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/managing-your-weni-by-vtex-projects%23project-context)[Best Practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/managing-your-weni-by-vtex-projects%23best-practices)[Common Workflows](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/managing-your-weni-by-vtex-projects%23common-workflows)[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/managing-your-weni-by-vtex-projects%23troubleshooting)

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/Weni-by-VTEX/CLI/managing-your-weni-by-vtex-projects.md)

Copy page

On this page

ON THIS PAGE

[Project Commands](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/managing-your-weni-by-vtex-projects%23project-commands)

[Project Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/managing-your-weni-by-vtex-projects%23project-context)[Best Practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/managing-your-weni-by-vtex-projects%23best-practices)[Common Workflows](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/managing-your-weni-by-vtex-projects%23common-workflows)[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-your-weni-by-vtex-projects/docs/guides/managing-your-weni-by-vtex-projects%23troubleshooting)

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