[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 atoms skeleton 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/atoms-skeleton/docs/guides)

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

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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

[Badge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-badge)

[Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-button)

[Checkbox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-checkbox)

[Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-icon)

[Input](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-input)

[Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-label)

[Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-link)

[List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-list)

[Loader](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-loader)

[Overlay](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-overlay)

[Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-price)

[Radio](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-radio)

[Select](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-select)

[SROnly](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-sr-only)

[Skeleton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton)

[Slider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-slider)

[Textarea](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-textarea)

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

[Badge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-badge)

[Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-button)

[Checkbox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-checkbox)

[Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-icon)

[Input](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-input)

[Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-label)

[Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-link)

[List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-list)

[Loader](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-loader)

[Overlay](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-overlay)

[Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-price)

[Radio](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-radio)

[Select](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-select)

[SROnly](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-sr-only)

[Skeleton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton)

[Slider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-slider)

[Textarea](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-textarea)

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

Skeleton

Skeleton displays a loading placeholder that mimics the shape of content while data is being fetched, improving perceived performance and reducing layout shifts.

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

Skeletons are visual placeholders that simulate the layout of content while data is loading. By displaying skeletons instead of blank spaces, you provide users with immediate visual feedback, making your store feel faster and more responsive.

Skeletons also help prevent [Cumulative Layout Shift (CLS)](https://read.calvincode.net/reader?url=https://web.dev/articles/cls) by reserving space for content before it loads, ensuring a smooth user experience during data fetching operations.

Example

Code

---

## Usage

### Import the component

`1

import { Skeleton } from "@faststore/ui";

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";

`

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

---

## Examples

### Border

#### Regular

Example

Code

#### Pill

Example

Code

#### Circle

Example

Code

### Custom border radius

Example

Code

### Shimmer effect

#### With shimmer (default)

Example

Code

#### Without shimmer effect

Example

Code

### Loading state control

`1

import React from 'react'

2

import { Skeleton } from '@faststore/ui'

3

4

export default function SkeletonExample() {

5

 const isLoading = true

6

7

 return (

8

 <div>

9

 {isLoading ? (

10

 // Loading state

11

 <Skeleton

12

 style={{ width: '150px', height: '100px' }}

13

 border="regular"

14

 />

15

 ) : (

16

 // Content loaded

17

 <div style={{ padding: '20px', background: '#f0f0f0', borderRadius: '8px' }}>

18

 Content loaded

19

 </div>

20

 )}

21

 </div>

22

 )

23

}

`

---

## Design tokens

| Local token                  | Default value/Global token linked |
| ---------------------------- | --------------------------------- |
| \--fs-skeleton-bkg-color     | var(--fs-color-disabled-bkg)      |
| \--fs-skeleton-border-radius | var(--fs-border-radius)           |

### Design tokens: Shimmer

| Local token                                 | Default value/Global token linked                                                |
| ------------------------------------------- | -------------------------------------------------------------------------------- |
| \--fs-skeleton-shimmer-width                | 50%                                                                              |
| \--fs-skeleton-shimmer-height               | 100%                                                                             |
| \--fs-skeleton-shimmer-bkg-color            | rgb(255 255 255 / 20%)                                                           |
| \--fs-skeleton-shimmer-box-shadow           | 0 0 var(--fs-spacing-5) var(--fs-spacing-5) var(--fs-skeleton-shimmer-bkg-color) |
| \--fs-skeleton-shimmer-transition-timing    | 850ms                                                                            |
| \--fs-skeleton-shimmer-transition-function  | linear                                                                           |
| \--fs-skeleton-shimmer-transition-iteration | infinite                                                                         |

---

## Data attributes

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

`data-fs-skeleton`

`data-fs-skeleton-shimmer`

---

## Props

| Name             | Type                | Description                                                                            | Default                                                           |            |
| ---------------- | ------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ---------- |
| **testId**       | string              | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-skeleton                                                       |            |
| **loading**      | false \| true       | Control whether skeleton should be visible or not.                                     | true                                                              |            |
| **shimmer**      | false \| true       | Control whether the shimmer effect should be displayed or not.                         | true                                                              |            |
| **size\***       | Size                | Specifies the skeleton element size (width, height).                                   |                                                                   |            |
| **border**       | "regular" \| "pill" | "circle"                                                                               | Specifies the skeleton element border radius ('regular' \| 'pill' | 'circle'). |
| **borderRadius** | string              | Custom border radius for skeleton elements.                                            |                                                                   |            |

---

## Best practices

* Use Skeletons for elements that load asynchronously, such as product cards, images, or sections.
* Match the Skeleton’s shape and size to the content it represents for a seamless transition.
* Avoid using Skeletons for static or instantly available content.
* Disable shimmer animation (`shimmer={false}`) for a more subtle loading effect, especially in contexts where animation might be distracting.

---

## Related components

* [ProductCardSkeleton](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/tree/main/packages/core/src/components/skeletons/ProductCardSkeleton)
* [ProductGridSkeleton](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/tree/main/packages/core/src/components/skeletons/ProductGridSkeleton)
* [ProductShelfSkeleton](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/tree/main/packages/core/src/components/skeletons/ProductShelfSkeleton)

Contributors

2

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

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

Was this helpful?

Yes

No

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

[SROnly« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-sr-only)[SliderNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-slider)

Contributors

2

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

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

ON THIS PAGE

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

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

[Examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton%23examples)

[Border](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton%23border)[Custom border radius](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton%23custom-border-radius)[Shimmer effect](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton%23shimmer-effect)[Loading state control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton%23loading-state-control)

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

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

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

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

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton%23best-practices)

[Related components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton%23related-components)

Was this helpful?

 Send feedback

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

Copy page

On this page

ON THIS PAGE

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

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

[Examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton%23examples)

[Border](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton%23border)[Custom border radius](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton%23custom-border-radius)[Shimmer effect](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton%23shimmer-effect)[Loading state control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton%23loading-state-control)

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

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

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

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

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton%23best-practices)

[Related components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-skeleton/docs/guides/faststore/atoms-skeleton%23related-components)

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 accessing external resources within a vtex io app 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/accessing-external-resources-within-a-vtex-io-app/docs/guides)

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

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

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

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/app-development-guides)

---

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

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/docs/guides/controlling-access-to-app-resources)

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

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

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

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

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

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/storefront-development)

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

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

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/app-development-guides)

---

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

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/docs/guides/controlling-access-to-app-resources)

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

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

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

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/app-development)

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/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/accessing-external-resources-within-a-vtex-io-app/docs/guides/accessing-external-resources-within-a-vtex-io-app)

Accessing external resources within a VTEX IO app

Learn how apps gain access to external resources with policies.

Apps may need to access resources that are external to the app itself. An external resource could be:

* Endpoints exposed by other VTEX IO apps (REST or GraphQL)
* [VTEX Core Commerce APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference)
* Third-party endpoints outside VTEX, such as a payment provider or an external marketplace.

To access these resources, apps must declare policies in the `policies` list of the [manifest.json file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest).

This article explains when policies are required and how each policy type should be declared.

## When to declare policies

Apps need to declare policies to gain access to external resources, which include:

* Access to specific content (file, image, etc.)
* Access to [VTEX Core Commerce APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference)
* Access to resources exposed through role-based policies

> Declaring policies is not required for resources exposed through [resource-based policies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/controlling-access-to-app-resources%23defining-resource-based-policies), since these policies already define which apps are allowed.

## Accessing external resources by policy type

VTEX IO supports three types of access policies when interacting with external resources:

* License Manager policies
* Policies exposed by VTEX IO apps (role-based)
* Outbound-access policies

Each type is declared differently and applies to specific use cases, as described below.

### Policies from License Manager

License Manager policies refer to native VTEX resources and have predefined names.

To declare a policy of this type in the `manifest.json`, use the policy name in the `"name"` field. See the example below:

manifest.json

`1

{

2

 "policies": [

3

 {

4

 "name": "Sku.aspx"

5

 }

6

 ]

7

}

`

You can find all available policy names in the **Key** column of the [License Manager resources](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/license-manager-resources--3q6ztrC8YynQf6rdc6euk3) table. For more details, see the [Policies from License Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-policies-from-license-manager) article.

### Policies from VTEX IO apps (role-based)

These policies grant access to app routes exposed with [role-based policies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/controlling-access-to-app-resources%23defining-role-based-policies). This policy type is used to access [GraphQL queries exposed by IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/developing-a-graphql-api-in-service-apps). To declare a policy of this type in the manifest, use the format `{vendor}.{app-name}:{policy-name}` in the `"name"` field. See the example below:

manifest.json

`1

{

2

 "policies": [

3

 {

4

 "name": "vtex.messages:graphql-translate-messages"

5

 }

6

 ]

7

}

`

To find the names of the policies available in an app, you can see the app documentation or the `policies.json` file. Example: [Policies in the search-graphql app](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/search-graphql/blob/master/policies.json).

### Outbound-access policies

Outbound-access policies should be used only when the other two types do not apply. They grant access to explicit URLs, often for external (non-VTEX) services.

To declare a policy of this type, use an object with the following structure:

* `"name"`: `"outbound-access"`.
* `"attrs"`: An object with two fields.
   * `"host"`: String with the first part of the URL, usually containing the host or domain name.
   * `"path"`: String with the last part of the URL, usually containing the path inside the domain name.

> `"host"` and `"path"` accept `{{account}}` as a variable and the `*` character as a wildcard.

#### Example

Consider an app that needs access to the following resources:

* A VTEX API from the URL `{{account}}.vtexcommercestable.com.br/api/catalog_system/*`.
* The store's sitemap from the URL `{{account}}.vtexcommercestable.com.br/sitemap.xml`.
* An external resource from the URL `api.crowdin.com/api/project/*`.

For the app to gain access to these resources, declare the outbound-access policies as in the example below:

manifest.json

`1

{

2

 "policies": [

3

 {

4

 "name": "outbound-access",

5

 "attrs": {

6

 "host": "{{account}}.vtexcommercestable.com.br",

7

 "path": "/api/catalog_system/*"

8

 }

9

 },

10

 {

11

 "name": "outbound-access",

12

 "attrs": {

13

 "host": "{{account}}.vtexcommercestable.com.br",

14

 "path": "/sitemap.xml"

15

 }

16

 },

17

 {

18

 "name": "outbound-access",

19

 "attrs": {

20

 "host": "api.crowdin.com",

21

 "path": "/api/project/*"

22

 }

23

 }

24

 ]

25

}

`

Contributors

1

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

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-policies/accessing-external-resources-within-a-vtex-io-app.mdx)

[Policies and permissions« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app//docs/guides/vtex-io-documentation-policies)[Controlling access to app resourcesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app//docs/guides/controlling-access-to-app-resources)

Contributors

1

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

ON THIS PAGE

[When to declare policies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/accessing-external-resources-within-a-vtex-io-app%23when-to-declare-policies)

[Accessing external resources by policy type](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/accessing-external-resources-within-a-vtex-io-app%23accessing-external-resources-by-policy-type)

[Policies from License Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/accessing-external-resources-within-a-vtex-io-app%23policies-from-license-manager)[Policies from VTEX IO apps (role-based)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/accessing-external-resources-within-a-vtex-io-app%23policies-from-vtex-io-apps-role-based)[Outbound-access policies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/accessing-external-resources-within-a-vtex-io-app%23outbound-access-policies)

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-policies/accessing-external-resources-within-a-vtex-io-app.mdx)

Copy page

On this page

ON THIS PAGE

[When to declare policies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/accessing-external-resources-within-a-vtex-io-app%23when-to-declare-policies)

[Accessing external resources by policy type](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/accessing-external-resources-within-a-vtex-io-app%23accessing-external-resources-by-policy-type)

[Policies from License Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/accessing-external-resources-within-a-vtex-io-app%23policies-from-license-manager)[Policies from VTEX IO apps (role-based)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/accessing-external-resources-within-a-vtex-io-app%23policies-from-vtex-io-apps-role-based)[Outbound-access policies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/accessing-external-resources-within-a-vtex-io-app/docs/guides/accessing-external-resources-within-a-vtex-io-app%23outbound-access-policies)

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 checking your stores binding id 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/checking-your-stores-binding-id/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-setting-up-cross-border-stores)

[Checking your store's binding ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/checking-your-stores-binding-id)

[Creating robots files for cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/vtex-io-documentation-creating-robots-files-for-cross-border-stores)

[Cross-border store content internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/cross-border-custom-urls-1)

[Managing landing pages in cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/vtex-io-documentation-managing-landing-pages-in-cross-border-stores)

[Indicating alternate versions of localized pages in cross border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/vtex-io-documentation-indicating-alternate-pages-in-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-setting-up-cross-border-stores)

[Checking your store's binding ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/checking-your-stores-binding-id)

[Creating robots files for cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/vtex-io-documentation-creating-robots-files-for-cross-border-stores)

[Cross-border store content internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/cross-border-custom-urls-1)

[Managing landing pages in cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/vtex-io-documentation-managing-landing-pages-in-cross-border-stores)

[Indicating alternate versions of localized pages in cross border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/vtex-io-documentation-indicating-alternate-pages-in-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/storefront-best-practices)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/storefront-development)

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/store-framework-setting-up-cross-border-stores)

[Checking your store's binding ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/checking-your-stores-binding-id)

Checking your store's binding id

If your store is a [Multistore](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/creating-multi-store-multi-domain--tutorials%5F510?locale=en) or a Cross-border one, it's important to know the `id` values of its related `bindings`'s.

Hence, for a step by step on how to access this information, check the following section.

## Instructions

1. [Install](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-an-app) the `vtex.admin-graphql-ide@3.x` app using your terminal.
2. Access the **GraphQL admin IDE**.
3. From the dropdown list, choose the `vtex.tenant-graphql@0.x.x` app.
4. Write the following query command in the text box that is displayed:

`1

query {

2

 tenantInfo {

3

 bindings {

4

 id,

5

 canonicalBaseAddress,

6

 defaultLocale

7

 }

8

 }

9

}

`

The expected response is a JSON object, as in:

`1

{

2

 "data": {

3

 "tenantInfo": {

4

 "bindings": [

5

 {

6

 "id": "706e9126-d0fc-46de-b12d-5f9649e61877",

7

 "canonicalBaseAddress": "{account}.myvtex.com/admin",

8

 "defaultLocale": "en-US"

9

 },

10

 {

11

 "id": "706e9126-d0fc-47de-9o2d-5f9649e61877",

12

 "canonicalBaseAddress": "{account}.myvtex.com/es",

13

 "defaultLocale": "es-AR"

14

 },

15

 {

16

 "id": "748aafcf-1674-456d-9ffc-7ddb3f26e43f",

17

 "canonicalBaseAddress": "{account}.myvtex.com/en",

18

 "defaultLocale": "en-US"

19

 }

20

 ]

21

 }

22

 }

23

}

`

That's all! Save the returned response as this information might be useful when managing your VTEX account.

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F171964946%3Fv%3D4%26w=64%26q=75)](https://github.com/tania-campos)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/_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/Storefront-Guides/vtex-io-cross-border-stores/checking-your-stores-binding-id.md)

[Setting up cross-border stores« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id//docs/guides/store-framework-setting-up-cross-border-stores)[Creating robots files for cross-border storesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id//docs/guides/vtex-io-documentation-creating-robots-files-for-cross-border-stores)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F171964946%3Fv%3D4%26w=64%26q=75)](https://github.com/tania-campos)

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

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/checking-your-stores-binding-id%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/guides/vtex-io/Storefront-Guides/vtex-io-cross-border-stores/checking-your-stores-binding-id.md)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checking-your-stores-binding-id/docs/guides/checking-your-stores-binding-id%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=)