[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 organisms hero 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/organisms-hero/docs/guides)

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

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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

[BannerText](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-banner-text)

[CartSidebar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-cart-sidebar)

[EmptyState](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-empty-state)

[FilterSlider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-filter-slider)

[Filter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-filter)

[Hero](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero)

[ImageGallery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-image-gallery)

[NavbarSlider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-navbar-slider)

[Navbar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-navbar)

[Newsletter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-newsletter)

[OutOfStock](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-out-of-stock)

[PaymentMethods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-payment-methods)

[PriceRange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-price-range)

[ProductGrid](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-product-grid)

[ProductShelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-product-shelf)

[RegionModal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-region-modal)

[SearchInput](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-search-input)

[ShippingSimulation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-shipping-simulation)

[SlideOver](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-slide-over)

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/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/organisms-hero/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/organisms-hero/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/organisms-hero/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

[BannerText](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-banner-text)

[CartSidebar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-cart-sidebar)

[EmptyState](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-empty-state)

[FilterSlider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-filter-slider)

[Filter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-filter)

[Hero](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero)

[ImageGallery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-image-gallery)

[NavbarSlider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-navbar-slider)

[Navbar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-navbar)

[Newsletter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-newsletter)

[OutOfStock](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-out-of-stock)

[PaymentMethods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-payment-methods)

[PriceRange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-price-range)

[ProductGrid](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-product-grid)

[ProductShelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-product-shelf)

[RegionModal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-region-modal)

[SearchInput](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-search-input)

[ShippingSimulation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-shipping-simulation)

[SlideOver](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-slide-over)

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/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/organisms-hero/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/organisms-hero/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/organisms-hero/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

Hero

Displays a full-width banner at the top of a webpage.

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

The `Hero` component is a full-width banner presented on the above-the-fold section of a web page. It serves as the first glimpse of your brand's identity and messaging.The `Hero` component is a compound of the following:

* `HeroImage`: wraps the Hero image.
* `HeroHeader`: wraps the Hero textual content. It may contain a title, description, and a call-to-action button.

Use the `Hero` component as the first element of your Home, brand, or collections pages.

Example

Code

![Controller on a table](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg)

# Explore more about our amazing products

All the amazing products from the brands we partner with.

[See more](/)

---

## Usage

### Import the component

`1

import { Hero, HeroImage, HeroHeader } from "@faststore/ui";

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import "@faststore/ui/src/components/organisms/Hero/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

### Variants

#### Primary

Example

Code

![Controller on a table](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg)

# Explore more about our amazing products

All the amazing products from the brands we partner with.

[See more](/)

#### Secondary

Example

Code

![Controller on a table](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg)

# Explore more about our amazing products

All the amazing products from the brands we partner with.

[See more](/)

### Color variants

#### Light

Example

Code

![Controller on a table](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg)

# Explore more about our amazing products

All the amazing products from the brands we partner with.

[See more](/)

#### Accent

Example

Code

![Controller on a table](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg)

# Explore more about our amazing products

All the amazing products from the brands we partner with.

[See more](/)

---

## Design tokens

| Local token                 | Default value/Global token linked |
| --------------------------- | --------------------------------- |
| \--fs-hero-text-size        | var(--fs-text-size-lead)          |
| \--fs-hero-text-line-height | 1.33                              |

### Image

| Local token                    | Default value/Global token linked |
| ------------------------------ | --------------------------------- |
| \--fs-hero-image-border-radius | 0                                 |

### Title

| Local token                  | Default value/Global token linked         |
| ---------------------------- | ----------------------------------------- |
| \--fs-hero-title-padding     | var(--fs-spacing-5) 0 var(--fs-spacing-6) |
| \--fs-hero-title-weight      | var(--fs-text-weight-black)               |
| \--fs-hero-title-line-height | 1.1                                       |

### Subtitle

| Local token                           | Default value/Global token linked |
| ------------------------------------- | --------------------------------- |
| \--fs-hero-subtitle-margin-top-mobile | var(--fs-spacing-2)               |
| \--fs-hero-subtitle-margin-top-tablet | var(--fs-spacing-4)               |
| \--fs-hero-subtitle-size              | var(--fs-hero-text-size)          |
| \--fs-hero-subtitle-line-height       | var(--fs-hero-text-line-height)   |

### Hierarchy

#### Primary

| Local token                             | Default value/Global token linked |
| --------------------------------------- | --------------------------------- |
| \--fs-hero-primary-image-height-mobile  | 15rem                             |
| \--fs-hero-primary-image-height-desktop | 29rem                             |
| \--fs-hero-primary-title-size           | var(--fs-text-size-title-huge)    |

#### Secondary

| Local token                               | Default value/Global token linked |
| ----------------------------------------- | --------------------------------- |
| \--fs-hero-secondary-image-height-mobile  | 11.25rem                          |
| \--fs-hero-secondary-image-height-desktop | 14.188rem                         |
| \--fs-hero-secondary-title-size           | var(--fs-text-size-title-page)    |

---

### Variants

#### Main

| Local token                | Default value/Global token linked |
| -------------------------- | --------------------------------- |
| \--fs-hero-main-bkg-color  | var(--fs-color-primary-bkg)       |
| \--fs-hero-main-text-color | var(--fs-color-primary-text)      |

#### Light

| Local token                 | Default value/Global token linked   |
| --------------------------- | ----------------------------------- |
| \--fs-hero-light-bkg-color  | var(--fs-color-secondary-bkg-light) |
| \--fs-hero-light-text-color | var(--fs-color-text-display)        |

#### Accent

| Local token                  | Default value/Global token linked |
| ---------------------------- | --------------------------------- |
| \--fs-hero-accent-bkg-color  | var(--fs-color-highlighted-bkg)   |
| \--fs-hero-accent-text-color | var(--fs-hero-light-text-color)   |

---

## Data attributes

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

`data-fs-hero`

`data-fs-hero-image`

`data-fs-hero-heading`

`data-fs-hero-wrapper`

`data-fs-hero-title`

`data-fs-hero-subtitle`

`data-fs-hero-icon`

`data-fs-hero-heading`

`data-fs-hero-info`

`data-fs-hero-variant="primary" | "secondary"`

`data-fs-hero-color-variant="main" | "light" | "accent"`

---

## Props

All hero-related components support all attributes also supported by the `<div>` tag. Besides those attributes, the following props are also supported:

### Hero

| Name             | Type                     | Description                                                                            | Default                                              |      |
| ---------------- | ------------------------ | -------------------------------------------------------------------------------------- | ---------------------------------------------------- | ---- |
| **variant**      | "primary" \| "secondary" | Specifies the component variant.                                                       | primary                                              |      |
| **colorVariant** | "main" \| "light"        | "accent"                                                                               | Specifies the component's color variant combination. | main |
| **testId**       | string                   | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-hero                                              |      |

### HeroImage

| Name       | Type   | Description                                                                            | Default       |
| ---------- | ------ | -------------------------------------------------------------------------------------- | ------------- |
| **testId** | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-hero-image |

### HeroHeader

| Name                | Type             | Description                                                                            | Default         |    |                          |                             |                     |             |                                              |
| ------------------- | ---------------- | -------------------------------------------------------------------------------------- | --------------- | -- | ------------------------ | --------------------------- | ------------------- | ----------- | -------------------------------------------- |
| **title\***         | string           | Content for the h1 tag.                                                                |                 |    |                          |                             |                     |             |                                              |
| **subtitle\***      | string           | Content for the p tag.                                                                 |                 |    |                          |                             |                     |             |                                              |
| **icon**            | string \| number | false                                                                                | true            | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Icon component for additional customization. |
| **link**            | string           | Specifies the URL the action button goes to.                                           |                 |    |                          |                             |                     |             |                                              |
| **linkText**        | string           | Specifies the action button's content.                                                 |                 |    |                          |                             |                     |             |                                              |
| **testId**          | string           | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-hero-heading |    |                          |                             |                     |             |                                              |
| **linkTargetBlank** | false \| true    | Specify if the link opens in a new tab.                                                |                 |    |                          |                             |                     |             |                                              |

---

## Best Practices

### ✅ Do's

#### Content

* Draw a clear connection between the Hero image and text.
* Ensure the copy is legible on the top of the imagery.
* Keep your message clear and connected with your visuals.

#### Visual

* Use strong contrasts to make call-to-action buttons stand out.
* Follow your brand identity and guidelines. Remember that this is the first touchpoint shoppers will have with your brand.
* Make your Hero component responsive.

#### Image

* Use optimized images for your Hero image to avoid harming your website performance. Notice that if the Hero banners take too long to load, they may lose efficacy.
* Use an eye-catching image that adds value to your page. Hero images have a significant impact on your brand perception, website traffic, and sales conversion rate.

### ❌ Don'ts

* Don't exceed 2-3 lines for the Hero headline.
* Don't use more than one Hero on a web page.
* Don't use pixelated or blurry images.

---

## Accessibility

* Use an `h1` or `h2` heading level for the headline.
* Choose a hero image with a strong point of focus.
* Ensure high color contrast for text over images

Contributors

3

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

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

[Filter« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-filter)[ImageGalleryNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-image-gallery)

Contributors

3

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

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

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

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

[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23variants)[Color variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23color-variants)

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

[Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23image)[Title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23title)[Subtitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23subtitle)[Hierarchy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23hierarchy)[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23variants)

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

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

[Hero](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23hero)[HeroImage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23heroimage)[HeroHeader](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23heroheader)

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

[✅ Do's](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23-dos)[❌ Don'ts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23-donts)

[Accessibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23accessibility)

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/organisms/hero.mdx)

Copy page

On this page

ON THIS PAGE

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

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

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

[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23variants)[Color variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23color-variants)

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

[Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23image)[Title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23title)[Subtitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23subtitle)[Hierarchy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23hierarchy)[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23variants)

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

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

[Hero](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23hero)[HeroImage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23heroimage)[HeroHeader](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23heroheader)

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

[✅ Do's](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23-dos)[❌ Don'ts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23-donts)

[Accessibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-hero/docs/guides/faststore/organisms-hero%23accessibility)

On this page

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


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

[User] Provide a guide on guides faststore atoms overview 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-overview/docs/guides)

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/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-overview/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-overview/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-overview/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/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-overview/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-overview/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-overview/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

Atoms

* [SuccessBadgeBadges are status descriptors used to emphasize an item's state.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-badge)
* [PrimaryButtonButtons indicate actions that users can take, like adding an item to the cart.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-button)
* [CheckboxCheckboxes allow users to toggle an option on or off.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-checkbox)
* [IconIcons are simplified graphics used to represent concepts and help users navigate the UI.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-icon)
* [InputFields used to get user inputs.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-input)
* [LabelLabelDescribes the meaning of input fields.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-label)
* Default
Link
Performs the same behavior of a regular anchor tag (`a`), but can be used as any HTML tag and component.
* [Great Unordered ListOk Unordered ListBad Unordered ListListLists group related content. They can be ordered or unordered.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-list)
* [LoaderLoaders provide a visual cue that an action is being processed.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-loader)
* [A content outside meOverlayOverlays provide contextual information on top of the current layer of the interface.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-overlay)
* [62.5PriceUsed to display the price of a given product, discount and total values.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-price)
* [RadioAllow users to select one option from a set.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-radio)
* [GreatOkBadSelectSelect components allow users to pick an option from a predefined list.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-select)
* [SkeletonImproves the store's experience and perceived performance through loading placeholders.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-skeleton)
* [0500SliderAllows users to select a single value from a range.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-slider)
* [visually hidden textSROnlyHides an element visually. Improve accessibility by providing text to screen readers when applied.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-sr-only)
* [TextareaEnables users to input multi-line text. It's commonly used for longer user inputs, such as comments or descriptions.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-textarea)

Contributors

3

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

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

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/overview.mdx)

[UI components« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/components-index)[BadgeNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview/docs/guides/faststore/atoms-badge)

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] Provide a guide on guides get sellers by region or address 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/get-sellers-by-region-or-address/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/checkout-api-overview)

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/checkout-security)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/shopping-cart-section-api-quick-start-guides)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/cart-attachments-section-api-quick-start-guides)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/configuration-section-api-quick-start-guides)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/fulfillment-checkout-section-api-quick-start-guides)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/region-section-api-quick-start-guides)

[Get sellers by region or address](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/get-sellers-by-region-or-address)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/checkout-error-codes)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/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/get-sellers-by-region-or-address/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/checkout-api-overview)

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/checkout-security)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/shopping-cart-section-api-quick-start-guides)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/cart-attachments-section-api-quick-start-guides)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/configuration-section-api-quick-start-guides)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/fulfillment-checkout-section-api-quick-start-guides)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/region-section-api-quick-start-guides)

[Get sellers by region or address](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/get-sellers-by-region-or-address)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/checkout-error-codes)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/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/get-sellers-by-region-or-address/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides)

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/checkout-api-overview)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/region-section-api-quick-start-guides)

[Get sellers by region or address](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/get-sellers-by-region-or-address)

Get sellers by region or address

When customers access your store, they expect to view products that can be delivered to their location. To guarantee item availability in the window display, the VTEX platform selects the sellers linked to the [marketplace](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/marketplace).

This guide will describe how to obtain a list of [White label sellers](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/white-label-sellers-selection) in your store serving a given delivery region or address.

> The sellers shown in the list are only a reference of those that would be able to attend an order placed to a delivery location. From this filter, only sellers with stock and delivery methods available to that specific address will be shown to the customer in the store and considered able to fulfill the order.

## Accessing the list of sellers

To access the list of sellers serving a specific region or address, you need to use the [Get sellers by region or address](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23get-/api/checkout/pub/regions/-regionId-) endpoint. In this request, you must **choose one** of the following methods:

1. Send the identification of the list of sellers (`regionId`) through the URL address.

> `https://{accountName}.{environment}.com.br/api/checkout/pub/regions/v2.1DC18HE648C5111C0933734FE83EC783`

1. Send the `country` (3-digit ISO code) and at least one of the two values (`postal Code` or `geoCoordinates`) as query parameters through the URL. If you wish, you can send both values (`postalCode` or `geoCoordinates`) in the same request.

> `https://{accountName}.{environment}.com.br/api/checkout/pub/regions?country=BRA&postalCode=22050040`

After sending the request, the endpoint will return the response body containing the `regionId`, `id` and `name` of stores able to deliver in the selected address region, as shown in the example below:

`1

[

2

 {

3

 "id": "v2.1DC18HE648C5111C0933734DD83ED783",

4

 "sellers": [

5

 {

6

 "id": "partnerchallenge9",

7

 "name": "partnerchallenge9",

8

 "logo": ""

9

 },

10

 {

11

 "id": "qastorees",

12

 "name": "qastorees",

13

 "logo": ""

14

 },

15

 {

16

 "id": "qastoremg",

17

 "name": "qastoremg",

18

 "logo": ""

19

 },

20

 {

21

 "id": "qastorerj",

22

 "name": "qastorerj",

23

 "logo": ""

24

 },

25

 {

26

 "id": "qastoresp",

27

 "name": "qastoresp",

28

 "logo": ""

29

 }

30

 ]

31

 }

32

]

`

## Error codes

The following errors may appear as a message in the response body.

### 200 - OK

Despite the code `200` (which indicates the success of the request), if there are no White label sellers allocated in the `regionId` informed, the response body will not contain any seller information.

`1

[

2

 {

3

 "id": "v2.1BB18CE648B5111D0933734ED83EC783",

4

 "sellers": []

5

 }

6

]

`

### 400 - Bad Request

* `Message error example (code 001): "O campo CEP (220500) nos dados de entrega é inválido"` (Postal code (220500) in delivery data is invalid): the `postalCode` information is not valid.

`1

{

2

 "fields": {},

3

 "error": {

4

 "code": "001",

5

 "message": "O campo CEP (220500) nos dados de entrega é inválido",

6

 "exception": null

7

 },

8

 "operationId": "f2b8107f-e5d5-4b7c-b719-344d1b05d1fa"

9

}

`

* `Message error example (code CHK0119): "Endereços devem ter código postal ou geocoordenadas"` (Addresses must have postal code or geocoordinates): this message can be displayed in two situations:
   * 1. `postalCode` was not informed in the request, or;
   * 1. `geoCoordinates` information is not valid or was not informed in the request.

`1

{

2

 "fields": {},

3

 "error": {

4

 "code": "CHK0119",

5

 "message": "Endereços devem ter código postal ou geocoordenadas",

6

 "exception": null

7

 },

8

 "operationId": "e144a38c-2e7c-40fa-bd71-12d0ceaa2517"

9

}

`

* `Message error example (code CHK0127): "País inválido"` (invalid country): the `country` code was not informed in the request.

`1

{

2

 "fields": {},

3

 "error": {

4

 "code": "CHK0127",

5

 "message": "País inválido",

6

 "exception": null

7

 },

8

 "operationId": "d0119920-aa3e-4295-a063-6d85ba34a400"

9

}

`

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F87548049%3Fv%3D4%26w=64%26q=75)](https://github.com/ricardoaerobr)

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/Checkout/region-section-api-quick-start-guides/get-sellers-by-region-or-address.md)

[Region« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address//docs/guides/region-section-api-quick-start-guides)[Checkout error codesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address//docs/guides/checkout-error-codes)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F87548049%3Fv%3D4%26w=64%26q=75)](https://github.com/ricardoaerobr)

ON THIS PAGE

[Accessing the list of sellers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/get-sellers-by-region-or-address%23accessing-the-list-of-sellers)

[Error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/get-sellers-by-region-or-address%23error-codes)

[200 - OK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/get-sellers-by-region-or-address%23200-ok)[400 - Bad Request](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/get-sellers-by-region-or-address%23400-bad-request)

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/Checkout/region-section-api-quick-start-guides/get-sellers-by-region-or-address.md)

Copy page

On this page

ON THIS PAGE

[Accessing the list of sellers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/get-sellers-by-region-or-address%23accessing-the-list-of-sellers)

[Error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/get-sellers-by-region-or-address%23error-codes)

[200 - OK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/get-sellers-by-region-or-address%23200-ok)[400 - Bad Request](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address/docs/guides/get-sellers-by-region-or-address%23400-bad-request)

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