[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 how to connect with vtex core commerce apis using vtex io 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/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/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/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/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/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/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/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/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/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/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/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/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/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/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/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/app-development-guides)

[Services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-service)

[Calling commerce APIs on VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/calling-commerce-apis-on-vtex-io)

[Clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-clients)

[Developing custom Clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-how-to-create-and-use-clients)

[Connecting to VTEX Core Commerce APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io)

[Using Clients in Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/using-node-clients)

Handling events

[Path patterns](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/service-path-patterns)

[Configuring dynamic routes in VTEX IO services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/configuring-dynamic-routes-in-vtex-io-services)

[Developing service configuration apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-developing-service-configuration-apps)

[Node builder 7.x migration guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/node-builder-7x-migration-guide)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/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/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/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/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/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/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/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/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/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/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/app-development-guides)

[Services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-service)

[Calling commerce APIs on VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/calling-commerce-apis-on-vtex-io)

[Clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-clients)

[Developing custom Clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-how-to-create-and-use-clients)

[Connecting to VTEX Core Commerce APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io)

[Using Clients in Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/using-node-clients)

Handling events

[Path patterns](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/service-path-patterns)

[Configuring dynamic routes in VTEX IO services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/configuring-dynamic-routes-in-vtex-io-services)

[Developing service configuration apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-developing-service-configuration-apps)

[Node builder 7.x migration guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/node-builder-7x-migration-guide)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/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/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/app-development)

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/app-development-guides)

[Clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/vtex-io-documentation-clients)

[Connecting to VTEX Core Commerce APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io)

Connecting to VTEX Core Commerce APIs

Learn how to enable seamless HTTP communication with VTEX Core Commerce APIs within your VTEX IO app.

VTEX IO apps are designed to seamlessly interface with [VTEX Core Commerce APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference). These APIs provide a set of functionalities and data access points for managing and interacting with the VTEX ecommerce platform, enabling developers to perform various operations, such as managing orders, products, and customer data.

In this guide, you will learn how to create a custom client that can handle HTTP requests to these VTEX Core Commerce APIs, allowing your application to retrieve and manipulate data within the VTEX ecosystem.

## Before you begin

Ensure a smooth development process by having the following prerequisites in place:

* **VTEX IO Development Workspace:** Set up your VTEX IO environment by following the steps outlined in [Creating a Development Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace).
* **TypeScript Familiarity:** Acquire a basic understanding of TypeScript, as we'll be using the `node` [Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-builders) for TypeScript development. For details, refer to [Typescript's Official Documentation](https://read.calvincode.net/reader?url=https://www.typescriptlang.org/docs/).
* **Understanding of Clients:** Clients play a crucial role in facilitating interactions between your application and both external and internal services. Learn more about [Clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-clients).

## Instructions

### Step 1 - Setting up your VTEX IO app

1. Start a new VTEX IO app using the `node` builder and open the project using your preferred code editor.
2. Install the `@vtex/api` package by running the following command:
`1
yarn add @vtex/api
`
3. Update the app's `manifest.json` to include the appropriate `outbound-access` policy for the requested URL. Here's a hypothetical example:
manifest.json
`1
{
2
 "name": "your-app",
3
 "version": "1.0.0",
4
 "scripts": {
5
 // ...
6
 },
7
 "dependencies": {
8
 // ...
9
 },
10
 "builders": {
11
 // ...
12
 },
13
 "policies": [
14
 {
15
 "name": "outbound-access",
16
 "attrs": {
17
 "host": "{{account}}.vtexcommercestable.com.br",
18
 "path": "/api/checkout/pub/orderForm/*"
19
 }
20
 }
21
 ]
22
}
`

### Step 2 - Creating a Client for connecting to VTEX Core Commerce APIs

1. Create a TypeScript file for your Client in the `node/clients` directory. Choose a name that easily identifies your Client (e.g., `myClient.ts`).
2. Create a client that represents the module you want to access. It will be a class that extends `JanusClient`.
./node/clients/myClient.ts
`1
import type { InstanceOptions, IOContext } from '@vtex/api'
2
import { JanusClient } from '@vtex/api'
3

4
export default class MyClient extends JanusClient {
5
 constructor(context: IOContext, options?: InstanceOptions) {
6
 super(context, { …options })
7
 }
8
}
`
3. In the constructor, set the `VtexIdclientAutCookie` header with the required token for authorization. Use `ctx.authToken` for the app's token, or `ctx.vtex.storeUserAuthToken` or `ctx.vtex.adminUserAuthToken` for requests from VTEX Admin or VTEX Storefront, respectively. Refer to [App authentication using auth tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/app-authentication-using-auth-tokens) for more information.
./node/clients/myClient.ts
`1
import type { InstanceOptions, IOContext } from '@vtex/api'
2
import { JanusClient } from '@vtex/api'
3

4
export default class MyClient extends JanusClient {
5
 constructor(context: IOContext, options?: InstanceOptions) {
6
 super(ctx, {
7
 ...options,
8
 headers: {
9
 Accept: 'application/json',
10
 VtexIdclientAutCookie: ctx.storeUserAuthToken,
11
 'x-vtex-user-agent': ctx.userAgent,
12
 ...options?.headers,
13
 },
14
 })
15
 }
16
}
`
> Ensure to export the Client from its module using either [default or named export](https://read.calvincode.net/reader?url=https://medium.com/@etherealm/named-export-vs-default-export-in-es6-affb483a0910).

### Step 3 - Implementing the Client methods

In your Client TypeScript file, implement the desired methods using the [HttpClient](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-how-to-create-and-use-clients%23httpclient-methods) for targeted HTTP calls.

./node/clients/myClient.ts

`` 1

import type { InstanceOptions, IOContext } from '@vtex/api'

2

import { JanusClient } from '@vtex/api'

3

4

export default class MyClient extends JanusClient {

5

 constructor(context: IOContext, options?: InstanceOptions) {

6

 super(ctx, {

7

 ...options,

8

 headers: {

9

 Accept: 'application/json',

10

 VtexIdclientAutCookie: ctx.storeUserAuthToken,

11

 'x-vtex-user-agent': ctx.userAgent,

12

 ...options?.headers,

13

 },

14

 })

15

 }

16

17

 public newOrderForm = (orderFormId?: string) => {

18

 return this.http

19

 .postRaw<OrderForm>(this.routes.orderForm(orderFormId), undefined, {

20

 metric: 'checkout-newOrderForm',

21

 })

22

 .catch(statusToError) as Promise<IOResponse<OrderForm>>

23

 }

24

25

 private get routes() {

26

 const base = '/api/checkout/pub'

27

28

 return {

29

 orderForm: (orderFormId?: string) =>

30

 `$\{base\}/orderForm/$\{orderFormId ?? ''\}`

31

 }

32

 }

33

34

}

 ``

In the provided example, the `newOrderForm` method is implemented to make HTTP requests using `this.http`. It facilitates the creation of a new order form by sending a POST request (`postRaw`) to the specified endpoint. The method includes additional configurations, such as defining the metric for tracking and handling potential errors in the response.

### Step 4 - Exporting custom clients

Now that you've created your custom Client, organize and export it for use in your VTEX IO service. Follow these steps:

1. Create an `index.ts` file in the `node/clients` folder.
2. Inside the `index.ts` file, import the custom client you created in the previous step. For example:
`1
import MyClient from "./myClient.ts";
`
3. Define a class called `Clients` that extends `IOClients`. This class is used to organize and configure your custom Clients. Within the Clients class, declare a `get` property for each of your custom Clients. This property allows you to access a specific Client by name. In our example, we've created a client named `myClient` that uses the `MyClient` class.
`1
import { IOClients } from "@vtex/api";
2
import MyClient from "./myClient.ts";
3

4
export class Clients extends IOClients {
5
 public get status() {
6
 return this.getOrSet("myClient", MyClient);
7
 }
8
}
`

Now that you have developed and exported your custom Client to communicate with the desired service, your Clients can be accessed and used within your VTEX IO service to perform various tasks. Learn how to use clients effectively in the [Using Node Clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/using-node-clients) guide.

## Key considerations

* **GraphQL apps:** Some Core Commerce modules already feature a GraphQL app that abstracts their endpoints. Check if the desired data is available via one of our GraphQL apps. Utilize the [GraphQL IDE](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/graphql-ide) app on the Admin for exploration.
* **Authentication:** IO apps do not require an appKey/appToken pair to make requests to VTEX Core Commerce APIs. Every app has its own rotating token that can be used on the app's code. In scenarios where using the app's token is not ideal (e.g., authorization depends on the calling user), opt to use the user's token instead, using `ctx.vtex.storeUserAuthToken` or `ctx.vtex.adminUserAuthToken`. Refer to [Authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authentication) for more information.

## Example

* [CheckoutClient](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-graphql/blob/master/node/clients/checkout.ts)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/_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/back-end-development-guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io.md)

[Developing custom Clients« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io//docs/guides/vtex-io-documentation-how-to-create-and-use-clients)[Using Clients in Node appsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io//docs/guides/using-node-clients)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23instructions)

[Step 1 - Setting up your VTEX IO app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23step-1-setting-up-your-vtex-io-app)[Step 2 - Creating a Client for connecting to VTEX Core Commerce APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23step-2-creating-a-client-for-connecting-to-vtex-core-commerce-apis)[Step 3 - Implementing the Client methods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23step-3-implementing-the-client-methods)[Step 4 - Exporting custom clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23step-4-exporting-custom-clients)

[Key considerations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23key-considerations)

[Example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23example)

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/back-end-development-guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23instructions)

[Step 1 - Setting up your VTEX IO app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23step-1-setting-up-your-vtex-io-app)[Step 2 - Creating a Client for connecting to VTEX Core Commerce APIs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23step-2-creating-a-client-for-connecting-to-vtex-core-commerce-apis)[Step 3 - Implementing the Client methods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23step-3-implementing-the-client-methods)[Step 4 - Exporting custom clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23step-4-exporting-custom-clients)

[Key considerations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23key-considerations)

[Example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io/docs/guides/how-to-connect-with-vtex-core-commerce-apis-using-vtex-io%23example)

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 molecules quantity selector 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/molecules-quantity-selector/docs/guides)

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

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

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

[Accordion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-accordion)

[Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-alert)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-breadcrumb)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-buy-button)

[Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-card)

[Carousel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-carousel)

[CartItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-cart-item)

[CheckboxField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-checkbox-field)

[DiscountBadge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-discount-badge)

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-dropdown)

[Gift](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-gift)

[IconButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-icon-button)

[InputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-input-field)

[LinkButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-link-button)

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-modal)

[NavbarLinks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-navbar-links)

[OrderSummary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-order-summary)

[Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-popover)

[ProductCard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-product-card)

[ProductPrice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-product-price)

[ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-product-title)

[QuantitySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-quantity-selector)

[RadioField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-radio-field)

[RadioGroup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-radio-group)

[Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-rating)

[RatingField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-rating-field)

[RegionBar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-region-bar)

[SearchAutocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-search-auto-complete)

[SearchDropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-search-dropdown)

[SearchHistory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-search-history)

[SearchInputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-search-input-field)

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-search-products)

[SearchTop](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-search-top)

[SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-select-field)

[SKUSelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-sku-selector)

[Table](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-table)

[Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-tag)

[TextareaField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-textarea-field)

[Toast](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-toast)

[Toggle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-toggle)

[ToggleField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-toggle-field)

[Tooltip](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-tooltip)

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

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

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

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

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

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

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

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

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

[Accordion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-accordion)

[Alert](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-alert)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-breadcrumb)

[BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-buy-button)

[Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-card)

[Carousel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-carousel)

[CartItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-cart-item)

[CheckboxField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-checkbox-field)

[DiscountBadge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-discount-badge)

[Dropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-dropdown)

[Gift](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-gift)

[IconButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-icon-button)

[InputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-input-field)

[LinkButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-link-button)

[Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-modal)

[NavbarLinks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-navbar-links)

[OrderSummary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-order-summary)

[Popover](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-popover)

[ProductCard](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-product-card)

[ProductPrice](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-product-price)

[ProductTitle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-product-title)

[QuantitySelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-quantity-selector)

[RadioField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-radio-field)

[RadioGroup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-radio-group)

[Rating](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-rating)

[RatingField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-rating-field)

[RegionBar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-region-bar)

[SearchAutocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-search-auto-complete)

[SearchDropdown](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-search-dropdown)

[SearchHistory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-search-history)

[SearchInputField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-search-input-field)

[SearchProducts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-search-products)

[SearchTop](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-search-top)

[SelectField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-select-field)

[SKUSelector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-sku-selector)

[Table](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-table)

[Tag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-tag)

[TextareaField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-textarea-field)

[Toast](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-toast)

[Toggle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-toggle)

[ToggleField](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-toggle-field)

[Tooltip](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-tooltip)

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

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

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

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

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

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

QuantitySelector

Allow shoppers to choose the quantity of a product to buy.

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

The `QuantitySelector` component allows customers to select the quantity of a given product to purchase.

Example

Code

---

## Usage

### Import the component

`1

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

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";

`

---

## Examples

### Disabled

Example

Code

---

## Design tokens

| Local token                           | Default value/Global token linked                                             |
| ------------------------------------- | ----------------------------------------------------------------------------- |
| \--fs-qty-selector-width              | calc(var(--fs-control-tap-size) \* 2.7)                                       |
| \--fs-qty-selector-height             | calc(var(--fs-control-tap-size) + (var(--fs-qty-selector-border-width) \* 2)) |
| \--fs-qty-selector-shadow             | none                                                                          |
| \--fs-qty-selector-shadow-hover       | 0 0 0 var(--fs-border-width) var(--fs-border-color-active)                    |
| \--fs-qty-selector-bkg-color          | var(--fs-color-body-bkg)                                                      |
| \--fs-qty-selector-bkg-color-hover    | var(--fs-qty-selector-bkg-color)                                              |
| \--fs-qty-selector-border-radius      | var(--fs-border-radius)                                                       |
| \--fs-qty-selector-border-width       | var(--fs-border-width)                                                        |
| \--fs-qty-selector-border-width-hover | var(--fs-border-width)                                                        |
| \--fs-qty-selector-border-color       | var(--fs-border-color)                                                        |
| \--fs-qty-selector-border-color-hover | var(--fs-border-color-active)                                                 |
| \--fs-qty-selector-text-size          | var(--fs-text-size-base)                                                      |
| \--fs-qty-selector-text-color         | var(--fs-color-text)                                                          |
| \--fs-qty-selector-text-color-hover   | var(--fs-qty-selector-text-color)                                             |

### Design tokens: Button

| Local token                             | Default value/Global token linked    |
| --------------------------------------- | ------------------------------------ |
| \--fs-qty-selector-button-bkg-color     | transparent                          |
| \--fs-qty-selector-button-border-radius | var(--fs-qty-selector-border-radius) |

### Design tokens: Disabled

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

---

## Data attributes

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

`data-fs-quantity-selector`

`data-fs-quantity-selector=["disabled"]`

`data-quantity-selector-button="left" | "right"`

`data-quantity-selector-input`

---

## Props

| Name                  | Type                                                      | Description                                                                            | Default              |
| --------------------- | --------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------- |
| **testId**            | string                                                    | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-quantity-selector |
| **max**               | number                                                    | The maximum value the quantity selector can receive                                    |                      |
| **min**               | number                                                    | The minimum value the quantity selector can receive                                    | 1                    |
| **initial**           | number                                                    | The initial value for quantity selector                                                |                      |
| **unitMultiplier**    | number                                                    | Controls by how many units the value advances                                          | 1                    |
| **useUnitMultiplier** | false \| true                                             | Controls wheter you use or not the unitMultiplier                                      |                      |
| **disabled**          | false \| true                                             | Specifies that the whole quantity selector component should be disabled.               | false                |
| **onChange**          | (value: number) => void                                   | Event emitted when value is changed                                                    |                      |
| **onValidateBlur**    | (min: number, maxValue: number, quantity: number) => void | Event emitted when value is out of the min and max bounds                              |                      |

Contributors

3

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

[ProductTitle« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-product-title)[RadioFieldNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-quantity-selector/docs/guides/faststore/molecules-radio-field)

Contributors

3

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

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

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

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

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

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

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

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

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/molecules/quantity-selector.mdx)

Copy page

On this page

ON THIS PAGE

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

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

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

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

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

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

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

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

On this page

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


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

[User] How do I use the VTEX admin customers app? Provide documentation and configuration details.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/apps/vtex.my-account)

---

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

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/storefront-development)

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/updates/release-notes)

VTEX IO Apps

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

---

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

---

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

---

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

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/apps/vtex.my-account)

---

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

---

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

Admin Customers

Official extension

Version: 2.18.2

Latest version: 2.18.2

> This app is no longer maintained by VTEX. This means support and maintenance are no longer provided.

> To continue using the B2B Suite, it is important to install the [VTEX B2B Admin Customers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.b2b-admin-customers).

# Customers Admin

A VTEX admin app that helps manage your customer data. This application allows users to create, edit, and search for customers. It's an alternative to MasterData when it comes to managing the documents from the CL entity.

The [vtex.admin-customers-graphql](https://read.calvincode.net/reader?url=https://github.com/vtex/admin-customers-graphql) depends on this application. Its responsibility is to group all the GraphQL queries and mutations needed to manage MasterData data.

## 🚀 Installation

Using the [VTEX IO CLI](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/vtex-io-cli-installation-and-command-reference/%23command-reference), log into the VTEX account you are working on and install the latest version:

`1

vtex install vtex.admin-customers

`

After installing the app, you can find it in the Admin at **Customers > Customers**.

## ✅ Features

The list below presents every feature of this application, where the checked ones have already been implemented. The features that are yet to come are unchecked.

> Please, whenever a new feature from the list below is implemented, mind-marking the checkbox and create a feature demo.

* [Listing](#listing)
* [Memorize visibility fields](#memorize-visibility-fields)
* [Search](#search)
* [Filters](#filters)
* [Creation](#creation)
* [Details view](#details-view)
* [Edition](#edition)
* Deletion of profile (GDPR/LGPD)
* Address association listing
* Schema viewing with user-level configuration
* Counters

## 🎥 Demonstration

**Listing**

![{"base64":"  ","img":{"width":1912,"height":935,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":3299212,"url":"https://user-images.githubusercontent.com/17439470/127700770-fedd9c66-5112-4bc7-9f85-c43117e8c355.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17439470/127700770-fedd9c66-5112-4bc7-9f85-c43117e8c355.gif)

**Memorize visibility fields**

The visibility fields is a feature to toggle visibility of table columns.

Here we have an additional feature that saves the preferred column visibility configuration of the end user, maintaining your configurations even after a page refresh and future visits to this page.

![{"base64":"  ","img":{"width":1912,"height":937,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1358706,"url":"https://user-images.githubusercontent.com/17439470/127700866-92656fe0-1f8a-4b4d-8e3c-2d4a2a736778.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17439470/127700866-92656fe0-1f8a-4b4d-8e3c-2d4a2a736778.gif)

**Search**

The search input uses the fields: **E-mail**, **First Name** or **Last Name** to filter the results that matches the terms searched while also displaying the results on the table.

![{"base64":"  ","img":{"width":1912,"height":938,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":389613,"url":"https://user-images.githubusercontent.com/17439470/127700895-78509248-fc5b-4036-b45c-cee8fa7f0509.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17439470/127700895-78509248-fc5b-4036-b45c-cee8fa7f0509.gif)

**Filters**

With these filters, it is possible to refine your search. You can filter by: **E-mail**, **First Name**, **Last Name**, **Document ID**, **Document** or **Receive Newsletter**.

Every filter has conditionals for you to choose from; it could be **equal**, **not equal**, or **contains**.

![filters 1](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17439470/127700913-dbb54e5c-4327-4df6-9e4d-022b6fa34c3f.png)![filters 2](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17439470/127700917-a4d5dcac-56fb-491c-b7af-adaea10d2cc6.png) **Creation**

![{"base64":"  ","img":{"width":1903,"height":931,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":2315179,"url":"https://user-images.githubusercontent.com/17439470/127700937-27bde86b-7825-4a75-b32a-20bae727f41a.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17439470/127700937-27bde86b-7825-4a75-b32a-20bae727f41a.gif)

**Details view** ![detail](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17439470/127700959-633b02c0-0eb8-4159-a81d-586cbf5ce65b.PNG) **Edition**

![{"base64":"  ","img":{"width":1912,"height":932,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":913163,"url":"https://user-images.githubusercontent.com/17439470/127700969-7b58c9f9-cb65-4fd3-b605-739e9576f020.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/17439470/127700969-7b58c9f9-cb65-4fd3-b605-739e9576f020.gif)

## ☕ Developing

1. Clone this repo `git clone https://github.com/vtex/admin-customers`
2. `yarn --cwd react/` for code completion
3. `vtex link`
4. Navigate to `workspace--account.myvtex.com/admin/app/example`

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Customers Admin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/apps/vtex.admin-customers%23customers-admin)

[🚀 Installation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/apps/vtex.admin-customers%23-installation)

[✅ Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/apps/vtex.admin-customers%23-features)

[🎥 Demonstration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/apps/vtex.admin-customers%23-demonstration)

[☕ Developing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.admin-customers/docs/apps/vtex.admin-customers%23-developing)

Was this helpful?

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