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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

Input

Inputs are fields that capture user input.

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

The `Input` component renders a single-line text field for capturing short user input. Typical use cases include:

* Collecting user information (e.g., name, email, phone number).
* Search queries and filters.
* Form submissions and data entry.

Example

Code

---

## Usage

### Import the component

`1

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

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

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

### Disabled

Example

Code

---

## Design tokens

| Local token                     | Default value/Global token linked                          |
| ------------------------------- | ---------------------------------------------------------- |
| \--fs-input-padding             | var(--fs-spacing-1) var(--fs-spacing-2)                    |
| \--fs-input-height              | var(--fs-control-tap-size)                                 |
| \--fs-input-bkg-color           | var(--fs-color-body-bkg)                                   |
| \--fs-input-box-shadow          | none                                                       |
| \--fs-input-box-shadow-hover    | 0 0 0 var(--fs-border-width) var(--fs-border-color-active) |
| \--fs-input-text-color          | var(--fs-color-text)                                       |
| \--fs-input-text-size           | var(--fs-text-size-body)                                   |
| \--fs-input-line-height         | 1.25                                                       |
| \--fs-input-transition-function | var(--fs-transition-function)                              |
| \--fs-input-transition-property | var(--fs-transition-property)                              |
| \--fs-input-transition-timing   | var(--fs-transition-timing)                                |

### Design tokens: Disabled

Disabled inputs use reduced opacity and distinct styling to indicate when an input field is temporarily unavailable for interaction, preventing user input while maintaining visual context.

| Local token                       | Default value/Global token linked |
| --------------------------------- | --------------------------------- |
| \--fs-input-disabled-bkg-color    | var(--fs-color-disabled-bkg)      |
| \--fs-input-disabled-text-color   | var(--fs-color-disabled-text)     |
| \--fs-input-disabled-border-width | var(--fs-border-width)            |
| \--fs-input-disabled-border-color | var(--fs-border-color)            |

---

## Data attributes

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

`data-fs-input`

---

## Props

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

---

## Best Practices

### ✅ Do's

* Provide a [Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-label) when using input. Descriptive labels help users understand the purpose of a form control.
* Use placeholder text as a hint or example of the expected input format, not as a replacement for labels.
* Ensure sufficient color contrast between text and background for accessibility.
* Use appropriate input types (e.g., email, name, phone number) to trigger the correct keyboard on mobile devices.

### ❌ Don'ts

* Don't use vague or ambiguous labels that leave users uncertain about what information to provide.
* Don't use inputs for long-form text entry. Use a [textarea](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-textarea) component instead.
* Don't disable inputs without providing a clear reason why they're unavailable.

---

## Related components

* Label
InputField
InputField wraps an Input and its corresponding Label.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-input/docs/guides/faststore/molecules-input-field)

Contributors

3

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

[Icon« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-input/docs/guides/faststore/atoms-icon)[LabelNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-input/docs/guides/faststore/atoms-label)

Contributors

3

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

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

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

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

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

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

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

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

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

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

[Related components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-input/docs/guides/faststore/atoms-input%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/input.mdx)

Copy page

On this page

ON THIS PAGE

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

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

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

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

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

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

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

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

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

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

[Related components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-input/docs/guides/faststore/atoms-input%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 vtex io documentation 3 creating the new 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/vtex-io-documentation-3-creating-the-new-app/docs/guides)

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

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

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

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-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/vtex-io-documentation-3-creating-the-new-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/vtex-io-documentation-3-creating-the-new-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/vtex-io-documentation-3-creating-the-new-app/docs/guides/code-samples)

---

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

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)

[2\. Creating the new app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-3-creating-the-new-app)

[3\. Declaring a theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-4-declaring-a-theme-block)

[4\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-5-defining-styles)

[5\. Structuring documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-6-structuring-documentation)

[6\. Consuming data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-7-consuming-data)

[7\. Translating the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-8-translating-the-component)

[8\. Improving performance with caching](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-9-improving-performance-with-caching)

[9\. Making your app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-10-making-your-app-publicly-available)

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-developing-custom-storefront-components)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[Master Data CRUD](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/create-master-data-crud-app)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-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/vtex-io-documentation-3-creating-the-new-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/vtex-io-documentation-3-creating-the-new-app/docs/guides/app-development-guides)

---

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

---

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

---

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

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-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/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-app-store)

---

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

---

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

---

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

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

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

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

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

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

---

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

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-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/vtex-io-documentation-3-creating-the-new-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/vtex-io-documentation-3-creating-the-new-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/vtex-io-documentation-3-creating-the-new-app/docs/guides/code-samples)

---

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

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)

[2\. Creating the new app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-3-creating-the-new-app)

[3\. Declaring a theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-4-declaring-a-theme-block)

[4\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-5-defining-styles)

[5\. Structuring documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-6-structuring-documentation)

[6\. Consuming data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-7-consuming-data)

[7\. Translating the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-8-translating-the-component)

[8\. Improving performance with caching](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-9-improving-performance-with-caching)

[9\. Making your app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-10-making-your-app-publicly-available)

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-developing-custom-storefront-components)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[Master Data CRUD](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/create-master-data-crud-app)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-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/vtex-io-documentation-3-creating-the-new-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/vtex-io-documentation-3-creating-the-new-app/docs/guides/app-development-guides)

---

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

---

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

---

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

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-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/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-app-store)

---

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

---

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

---

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

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

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[2\. Creating the new app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-3-creating-the-new-app)

2\. Creating the new app

Now that your development environment is set up, it is time to start developing your new React app.

To begin developing your app, you need to follow these steps:

* Clone the React [boilerplate app](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/react-app-template) to your local files.
* Modify the `manifest.json` file in the React example app to include your app's information, such as its name, version, vendor, and dependencies.
* [Link your app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app) to a development workspace.

Once copied, the repository will automatically import the basic settings that you will need to kickstart your app development.

## Instructions

### Step 1 - Cloning the boilerplate repository to your local files

Clone the boilerplate repository to your local files by running the following command:

`1

git clone https://github.com/vtex-apps/react-app-template

`

### Step 2 - Editing the `manifest.json` file

Now, let's examine the manifest.json file, which contains essential information about the app such as:

* `vendor` \- Name of the VTEX account responsible for developing, maintaining, and distributing the app.
* `name` \- App name of your choice. Avoid special characters.
* `version` \- Current version of the app following [Semantic Versioning 2.0.0](https://read.calvincode.net/reader?url=https://semver.org/) standards.
* `title` \- The distribution name of the app that is displayed on the `Apps` section in the admin and, also, on the VTEX App Store.
* `description` \- Brief description of the app's features.
* `builders` \- List of [builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-builders/) that facilitate the app's development by abstracting service configurations.
* `dependencies` \- List of apps that the app you are developing depends on for proper functioning.

Incorporating the new app's basic information into the `manifest.json` file is a crucial step at the beginning of the development process. This step is essential to make the app unique and distinct from the example version provided by VTEX.

To add this information, open the app's code in your code editor, and update the `manifest.json` file as in the following:

1. Replace the `vendor` field value with the name of the VTEX account you are using for development.
2. Replace the `name` field value with the name of your app. Avoid using special characters, except hyphens (-).
3. Replace the values in the `title` and `description` fields with appropriate ones that describe the app you are developing.
4. Add the `store@0.x` builder to the builder list to allow the creation of new blocks:

`1

"builders": {

2

+ "store": "0.x"

3

}

`

1. If you want to import any React components previously developed for your new app, update the `dependencies` list with the name and version of the app that runs the desired component. For example:

`1

"dependencies": {

2

+ "vtex.styleguide": "9.x"

3

}

`

This will allow you to later import the app component added in `dependencies` into your code via the `import {componentName} from '{dependency}'` structure.

### Step 3 - Linking your app

To upload all the changes you made in your local files, you must link your app to the current development workspace by running the following command:

`1

vtex link

`

If the process runs without any errors, the following message will be displayed: `App linked successfully`.

To check and review your local app code, run the `vtex browse` command to open a browser window for your current workspace. Alternatively, access `https://{workspace}--{account}.myvtex.com`, replacing `workspace` with the development workspace in use and `account` with the name of your VTEX account.

> When linking an app to a development workspace, the `yarn install` command is automatically executed in the builder directories (e.g., `node` and `react` directories). Nevertheless, for an enhanced development experience, consider manually running `yarn install` in the root folder of your project to activate additional features, such as linter and prettier checks.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/_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/Getting-Started/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/vtex-io-documentation-3-creating-the-new-app.md)

[1\. Setting up your development environment« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app//docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)[3\. Declaring a theme blockNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app//docs/guides/vtex-io-documentation-4-declaring-a-theme-block)

See also

[ManifestApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-manifest)[BuildersApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-builders)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/_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/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-3-creating-the-new-app%23instructions)

[Step 1 - Cloning the boilerplate repository to your local files](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-3-creating-the-new-app%23step-1-cloning-the-boilerplate-repository-to-your-local-files)[Step 2 - Editing the manifest.json file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-3-creating-the-new-app%23step-2-editing-the-manifestjson-file)[Step 3 - Linking your app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-3-creating-the-new-app%23step-3-linking-your-app)

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/Getting-Started/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/vtex-io-documentation-3-creating-the-new-app.md)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-3-creating-the-new-app%23instructions)

[Step 1 - Cloning the boilerplate repository to your local files](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-3-creating-the-new-app%23step-1-cloning-the-boilerplate-repository-to-your-local-files)[Step 2 - Editing the manifest.json file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-3-creating-the-new-app%23step-2-editing-the-manifestjson-file)[Step 3 - Linking your app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app/docs/guides/vtex-io-documentation-3-creating-the-new-app%23step-3-linking-your-app)

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 headless profile management and order history 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/headless-profile-management-and-order-history/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/getting-started)

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-commerce)

[Headless catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-catalog)

[Headless cart and checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-cart-and-checkout)

[Headless profile management and order history](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/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/headless-profile-management-and-order-history/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/getting-started)

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-commerce)

[Headless catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-catalog)

[Headless cart and checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-cart-and-checkout)

[Headless profile management and order history](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/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/headless-profile-management-and-order-history/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides)

Integration Guides

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-commerce)

[Headless profile management and order history](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history)

Headless profile management and order history

Profile management is an important feature, that allows shoppers in your store to view and edit their personal information, as well as order history and other features.

VTEX's native storefront accomplishes this with the [My account page](https://read.calvincode.net/reader?url=https://help.vtex.com/pt/tutorial/how-my-account-works--2BQ3GiqhqGJTXsWVuio3Xh), but below you can learn how to use VTEX APIs to build the same features in your headless shopping experience.

## Profile management

Regarding profile management, your integration must be able to [access profile information](#access-profile-information), [edit profile information](#edit-profile-information) and also perform [password resets](#password-reset).

### Accessing profile information

The best way to retrieve shopper profile information on your headless storefront is to use this endpoint of the Checkout API:

* [Get client profile by email](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23get-/api/checkout/pub/profiles)

By default, this endpoint returns only complete profiles, but you may use the boolean query parameter `ensureComplete=false` to get incomplete profiles as well.

> A complete profile includes all information necessary to place an order: `email`, `firstName`, `lastName`, `phone`, `document`, and an associated address with all required fields.

### Editing profile information

VTEX uses [Master Data v1](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/master-data--4otjBnR27u4WUIciQsmkAw) to store and manage shopper information. So in order to manage profile data from your storefront, you must use the Master Data v1 API.

> Learn more about [Master Data](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/master-data--4otjBnR27u4WUIciQsmkAw%23versions-available) and its [basic components](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/master-data--4otjBnR27u4WUIciQsmkAw%23basic-components).

In Master Data v1, shopper profiles are documents in the `CL` data entity, while addresses are documents in the `AD` data entity. See below the endpoints for managing Master Data v1 documents:

* [Create new document](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/masterdata-api%23post-/api/dataentities/-acronym-/documents)
* [Update partial document](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/masterdata-api%23patch-/api/dataentities/-acronym-/documents/-id-)
* [Get document by ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/masterdata-api%23get-/api/dataentities/-acronym-/documents/-id-)
* [Delete document](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/masterdata-api%23delete-/api/dataentities/-acronym-/documents/-id-)

If you prefer to search shopper information by other information, such as email address, instead of the document ID, use the search endpoint:

* [Search documents](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/masterdata-api%23get-/api/dataentities/-acronym-/search)

### Password

Currently, there is no way to edit shoppers' passwords from a headless frontend. However, you can implement password expiration, so that your customers can then go to your store and create a new password.

To implement this feature, follow the instructions in the guide [Expiring a shopper's password](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/expiring-a-shoppers-password).

> This method of password expiration does not trigger any notification. You must notify the shopper that they must create a new password on your website. Learn more about [Shopper authentication for headless stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-commerce%23authenticating-shopper-identity).

### News letter subscription

When shoppers go to the profile management section of your store, they may wish to manage their consent of newsletter subscription. For this purpose, note that this information is in the shopper profile, in the boolean field named `isNewsletterOptIn`.

## Order history

You can use the endpoints below to fetch order information related to a specific shopper.

* [Retrieve list of user's orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api%23get-/api/oms/user/orders)
* [Retrieve user order details](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api%23get-/api/oms/user/orders/-orderId-)

### Actions on existing orders

Some stores allow shoppers to request changes or even the cancellation of existing orders. For order cancelation, use this endpoint:

* [Cancel order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api%23post-/api/oms/pvt/orders/-orderId-/cancel)

For requesting changes to an existing order, you can use the endpoint below, but see the [Change order guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-order) to learn more about this process.

* [Register change on order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api%23post-/api/oms/pvt/orders/-orderId-/changes)

## Learn more

See these other guides to learn more about building a headless shopping experience using VTEX:

* [Headless commerce overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-commerce)
* [Headless catalog and search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-catalog)
* [Headless cart and checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F47991446%3Fv%3D4%26w=64%26q=75)](https://github.com/PedroAntunesCosta)

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/Integration-Guides/headless-commerce/headless-profile-management-and-order-history.md)

[Headless cart and checkout« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history//docs/guides/headless-cart-and-checkout)[Login (SSO)Next »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history//docs/guides/login-integration-guide)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F47991446%3Fv%3D4%26w=64%26q=75)](https://github.com/PedroAntunesCosta)

ON THIS PAGE

[Profile management](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23profile-management)

[Accessing profile information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23accessing-profile-information)[Editing profile information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23editing-profile-information)[Password](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23password)[News letter subscription](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23news-letter-subscription)

[Order history](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23order-history)

[Actions on existing orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23actions-on-existing-orders)

[Learn more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23learn-more)

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/Integration-Guides/headless-commerce/headless-profile-management-and-order-history.md)

Copy page

On this page

ON THIS PAGE

[Profile management](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23profile-management)

[Accessing profile information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23accessing-profile-information)[Editing profile information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23editing-profile-information)[Password](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23password)[News letter subscription](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23news-letter-subscription)

[Order history](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23order-history)

[Actions on existing orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23actions-on-existing-orders)

[Learn more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history/docs/guides/headless-profile-management-and-order-history%23learn-more)

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