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

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

[Categories](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/categories)

[Brands](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/brands)

[Products](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/products)

[Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/specifications)

[Product specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/product-specifications)

[SKU specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/sku-specifications)

[Updating SKU Specifications with Catalog API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/updating-sku-specifications-with-catalog-api)

[SKUs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/skus)

[Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/images)

[Alternative API requests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/alternative-api-requests)

[How to implement product color variation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/how-to-implement-product-color-variation)

---

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

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

[Categories](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/categories)

[Brands](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/brands)

[Products](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/products)

[Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/specifications)

[Product specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/product-specifications)

[SKU specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/sku-specifications)

[Updating SKU Specifications with Catalog API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/updating-sku-specifications-with-catalog-api)

[SKUs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/skus)

[Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/images)

[Alternative API requests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/alternative-api-requests)

[How to implement product color variation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/how-to-implement-product-color-variation)

---

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

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

[SKUs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/skus)

SKUs

A [Stock Keeping Unit (SKU)](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ/3mJbIqMlz6oKDmyZ2bKJoA%23) corresponds to the actual item in the inventory that customers can purchase, which means it is equivalent to a product variation at VTEX, such as a _long sleeve gray size S shirt_.

Once you have created a product, it is time to submit its respective SKUs.

> Try the interactive version of this article by accessing this [link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/managing-skus). Code will be highlighted and focused for your convenience.

## Creating an SKU

To create a new SKU, use the [Create SKU endpoint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/catalog-api%23post-/api/catalog/pvt/stockkeepingunit).

Follow these instructions when creating the request body:

* During SKU creation, do not set `IsActive` as `true`. If you send the request to activate the SKU when creating it, you will receive a `400 Bad Request` error. The value to `IsActive` must always be `false` when sending that request for activation to occur afterward, as explained in [Activating an SKU](#activating-an-sku).
* We suggest you set `ActivateIfPossible` as `true,` unless you plan to have an internal workflow to [manually activate SKUs](#manual-activation).
* If there is a need to create a new SKU with a specific custom ID, specify the `Id` (integer) in the request. Otherwise, VTEX will generate the ID automatically.
* Besides the main ID, you must provide at least one of the following alternate IDs in the request body: `RefId` or `EAN`. It is possible to provide both as well.

#### **Request body example (custom ID)**

`1

{

2

 "Id": 1,

3

 "ProductId": 310117069,

4

 "IsActive": false,

5

 "ActivateIfPossible": true,

6

 "Name": "sku test",

7

 "RefId": "125478",

8

 "Ean": "8949461894984",

9

 "PackagedHeight": 10,

10

 "PackagedLength": 10,

11

 "PackagedWidth": 10,

12

 "PackagedWeightKg": 10,

13

 "Height": null,

14

 "Length": null,

15

 "Width": null,

16

 "WeightKg": null,

17

 "CubicWeight": 0.1667,

18

 "IsKit": false,

19

 "CreationDate": null,

20

 "RewardValue": null,

21

 "EstimatedDateArrival": null,

22

 "ManufacturerCode": "123",

23

 "CommercialConditionId": 1,

24

 "MeasurementUnit": "un",

25

 "UnitMultiplier": 2.0000,

26

 "ModalType": null,

27

 "KitItensSellApart": false,

28

 "Videos": [ "https://www.youtube.com/" ]

29

}

`

#### **Request body example (automatically generated ID)**

`1

{

2

 "ProductId": 310117069,

3

 "IsActive": false,

4

 "ActivateIfPossible": true,

5

 "Name": "sku test",

6

 "RefId": "125478",

7

 "Ean": "8949461894984",

8

 "PackagedHeight": 10,

9

 "PackagedLength": 10,

10

 "PackagedWidth": 10,

11

 "PackagedWeightKg": 10,

12

 "Height": null,

13

 "Length": null,

14

 "Width": null,

15

 "WeightKg": null,

16

 "CubicWeight": 0.1667,

17

 "IsKit": false,

18

 "CreationDate": null,

19

 "RewardValue": null,

20

 "EstimatedDateArrival": null,

21

 "ManufacturerCode": "123",

22

 "CommercialConditionId": 1,

23

 "MeasurementUnit": "un",

24

 "UnitMultiplier": 2.0000,

25

 "ModalType": null,

26

 "KitItensSellApart": false,

27

 "Videos": [ "https://www.youtube.com/" ]

28

}

`

#### **Response body example**

`1

{

2

 "Id":1,

3

 "ProductId": 310117069,

4

 "IsActive": false,

5

 "ActivateIfPossible": true,

6

 "Name": "sku test",

7

 "RefId": "125478",

8

 "Ean": "8949461894984",

9

 "PackagedHeight": 10,

10

 "PackagedLength": 10,

11

 "PackagedWidth": 10,

12

 "PackagedWeightKg": 10,

13

 "Height": null,

14

 "Length": null,

15

 "Width": null,

16

 "WeightKg": null,

17

 "CubicWeight": 0.1667,

18

 "IsKit": false,

19

 "CreationDate": null,

20

 "RewardValue": null,

21

 "EstimatedDateArrival": null,

22

 "ManufacturerCode": "123",

23

 "CommercialConditionId": 1,

24

 "MeasurementUnit": "un",

25

 "UnitMultiplier": 2.0000,

26

 "ModalType": null,

27

 "KitItensSellApart": false,

28

 "Videos": [ "https://www.youtube.com/" ]

29

}

`

## Updating an SKU

After an SKU has been successfully created, if any changes are needed or if it's necessary to [activate it manually](#manual-activation), use the [Update SKU endpoint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/catalog-api%23put-/api/catalog/pvt/stockkeepingunit/-skuId-).

#### **Request body example**

`1

{

2

 "Id": 70,

3

 "ProductId": 42,

4

 "IsActive": true,

5

 "Name": "Size 10",

6

 "RefId": "B096QW8Y8Z",

7

 "PackagedHeight": 15.0,

8

 "PackagedLength": 15.0,

9

 "PackagedWidth": 15.0,

10

 "PackagedWeightKg": 15.0,

11

 "Height": null,

12

 "Length": null,

13

 "Width": null,

14

 "WeightKg": null,

15

 "CubicWeight": 0.0,

16

 "IsKit": false,

17

 "CreationDate": "2020-01-25T15:51:00",

18

 "RewardValue": null,

19

 "EstimatedDateArrival": null,

20

 "ManufacturerCode": null,

21

 "CommercialConditionId": 1,

22

 "MeasurementUnit": "un",

23

 "UnitMultiplier": 1.0,

24

 "ModalType": null,

25

 "KitItensSellApart": false,

26

 "Videos": []

27

}

`

#### **Response body example**

`1

{

2

 "Id": 70,

3

 "ProductId": 42,

4

 "IsActive": true,

5

 "Name": "Size 10",

6

 "RefId": "B096QW8Y8Z",

7

 "PackagedHeight": 15.0,

8

 "PackagedLength": 15.0,

9

 "PackagedWidth": 15.0,

10

 "PackagedWeightKg": 15.0,

11

 "Height": null,

12

 "Length": null,

13

 "Width": null,

14

 "WeightKg": null,

15

 "CubicWeight": 0.0,

16

 "IsKit": false,

17

 "CreationDate": "2020-01-25T15:51:00",

18

 "RewardValue": null,

19

 "EstimatedDateArrival": null,

20

 "ManufacturerCode": null,

21

 "CommercialConditionId": 1,

22

 "MeasurementUnit": "un",

23

 "UnitMultiplier": 1.0,

24

 "ModalType": null,

25

 "KitItensSellApart": false,

26

 "Videos": []

27

}

`

## Activating an SKU

Before you can activate an SKU, it must meet the following requirements:

* The SKU must have at least one of the following alternate IDs configured: `RefId` or `EAN`.
* The SKU must have at least one image associated. To associate an image to an SKU, use the [Create SKU file endpoint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/catalog-api%23post-/api/catalog/pvt/stockkeepingunit/-skuId-/file).
* If the SKU has [specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/specifications), they must be filled in.
* If the field `ActivateIfPossible` is `false`, the SKU must be activated manually. For more information, check the [Manual activation](#manual-activation) section.
* If the SKU is a [kit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/catalog-api%23get-/api/catalog/pvt/stockkeepingunitkit), it must have at least one component active.
* The SKU must be associated with an active product, which, in turn, must be associated with an active Brand and an active Category.

Once the SKU complies with all the aspects listed above, there are two ways that you can activate your SKU - [manually](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-activate-an-sku%23manual-activation) or [automatically](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/how-to-activate-an-sku%23automatic-activation). Read the following sections for more details.

> Note that additional configurations are necessary for a product and its SKUs to become visible in a store:
>
> * Having registered a price for the SKU in the associated trade policy (also known as sales channel). Read the Pricing onboarding guide for more information on this process.
> * Having at least one unit in stock. Read the Fulfillment onboarding guide for more information on managing inventory.
> * Configuring your storefront's CMS to display products correctly, as described in this Frequently Asked Question.

### Manual activation

To manually activate your SKU, follow these steps:

1. [Create the SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/catalog-api%23post-/api/catalog/pvt/stockkeepingunit), setting `IsActive` as `false` and `ActivateIfPossible` as `false`.
2. If the SKU is a kit, [create and associate SKU components](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/catalog-api-post-sku-kit).
3. [Create and associate SKU files](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/catalog-api%23post-/api/catalog/pvt/stockkeepingunit/-skuId-/file).
4. [Update the SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/catalog-api%23put-/api/catalog/pvt/stockkeepingunit/-skuId-) as active, setting `IsActive` as `true`.

Now the SKU should be active in your store.

### Automatic activation

This configuration will automatically update the SKU as active once it is associated with an image or an active component. You do not need to update the SKU as in the previous steps.

To automatically activate your SKU, follow these steps:

1. [Create the SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/catalog-api%23post-/api/catalog/pvt/stockkeepingunit), setting `IsActive` as `false` and `ActivateIfPossible` as `true`.
2. If the SKU is a kit, [create and associate SKU components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/catalog-api%23post-/api/catalog/pvt/stockkeepingunitkit).
3. [Create and associate SKU files](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/catalog-api%23post-/api/catalog/pvt/stockkeepingunit/-skuId-/file).

Now the SKU should be active in your store.

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/_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/skus/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

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

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/catalog-integration/skus.md)

[Updating SKU Specifications with Catalog API« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus//docs/guides/updating-sku-specifications-with-catalog-api)[ImagesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus//docs/guides/images)

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/_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/skus/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

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

ON THIS PAGE

[Creating an SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/skus%23creating-an-sku)

[Updating an SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/skus%23updating-an-sku)

[Activating an SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/skus%23activating-an-sku)

[Manual activation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/skus%23manual-activation)[Automatic activation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/skus%23automatic-activation)

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/catalog-integration/skus.md)

Copy page

On this page

ON THIS PAGE

[Creating an SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/skus%23creating-an-sku)

[Updating an SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/skus%23updating-an-sku)

[Activating an SKU](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/skus%23activating-an-sku)

[Manual activation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/skus%23manual-activation)[Automatic activation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/skus/docs/guides/skus%23automatic-activation)

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 assets builder 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-assets-builder/docs/guides)

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

App Development

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

---

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

---

Project structure

[Manifest](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-manifest)

[Billing Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-billing-options)

[Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-builders)

[Admin Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-admin-builder)

[Assets Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-assets-builder)

[Docs Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-docs-builder)

[GraphQL Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-graphql-builder)

[Messages Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-messages-builder)

[Node Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-node-builder)

[PaymentProvider Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-paymentprovider-builder)

[Pixel Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-pixel-builder)

[React Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-react-builder)

[Store Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-store-builder)

[Styles Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-styles-builder)

[Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-dependencies)

[Peer Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-peerdependencies)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

App Development

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

---

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

---

Project structure

[Manifest](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-manifest)

[Billing Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-billing-options)

[Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-builders)

[Admin Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-admin-builder)

[Assets Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-assets-builder)

[Docs Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-docs-builder)

[GraphQL Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-graphql-builder)

[Messages Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-messages-builder)

[Node Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-node-builder)

[PaymentProvider Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-paymentprovider-builder)

[Pixel Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-pixel-builder)

[React Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-react-builder)

[Store Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-store-builder)

[Styles Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-styles-builder)

[Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-dependencies)

[Peer Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-peerdependencies)

---

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

---

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

---

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

---

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

---

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

---

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

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/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-assets-builder/docs/app-development)

Project structure

[Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-builders)

[Assets Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-assets-builder)

Assets builder

Learn how to use the VTEX IO Assets builder.

The `assets` builder manages assets within VTEX IO apps. It does this by collecting all asset paths used and uploading them to the File Manager service.

The File Manager service manages store files and their respective URLs, translating asset paths and exporting immutable URLs for proper rendering of block assets.

> For more information about using this builder in a Store Theme app, see [Using the assets builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-the-assets-builder).

## Folder structure

An app that uses the `assets` builder has a folder named `\assets` in its root directory. The directory structure may vary depending on specific project settings.

You can add any image extension, such as `.jpeg`, `.png`, and `.gif`, as well as store font files (`.ttf`or `.woff`) to later [customize store typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-customizing-your-stores-typography).

Assets can be added directly to the `/assets` folder, or for better organization, subfolders can be created within it, as illustrated below:

`1

assets

2

 ┣ 📂 fonts

3

 ┗ 📄 {FileName}.woff

4

 ┣ 📄 {FileName}.jpeg

5

 ┣ 📄 {FileName}.png

`

## Usage

To use the `assets` builder in your app, follow these steps:

1. Add the `assets` builder to your app’s builder list in the `manifest.json` file, as shown below:
`1
"builders": {
2
 "assets": "0.x"
3
}
`
2. In the root directory of your app, create an `/assets` folder to manage store assets.
3. Add the asset files to the `/assets` folder. Add subfolders to organize the files as needed.
4. To use the stored assets within your app, use the asset path as the value of a given parameter. Note that if you have structured subfolders within the `assets` folder, you need to include the folder hierarchy in the asset path. For example: `assets/fonts/{FileName}.woff`.

## Use case examples

As an example, check the folder structure of this builder in the [B2B Theme app](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/b2b-theme):

`1

assets

2

 ┣ 📂 fonts

3

 ┗ 📄 {FileName}.woff

4

 ┣ 📂 icons

5

 ┗ 📄 {FileName}.svg

6

 ┗ 📄 {FileName}.svg

7

┗ 📄 {FileName}.jpg

`

* The `fonts` folder contains `.woff` files, which are web fonts.
* The `icons` folder holds `.svg` files, which may be icons, logos, graphics, and other vector images.

Contributors

1

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

Was this helpful?

Yes

No

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

[Admin Builder« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder//docs/guides/vtex-io-documentation-admin-builder)[Docs BuilderNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder//docs/guides/vtex-io-documentation-docs-builder)

Contributors

1

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

ON THIS PAGE

[Folder structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-assets-builder%23folder-structure)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-assets-builder%23usage)

[Use case examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-assets-builder%23use-case-examples)

Was this helpful?

 Send feedback

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

Copy page

On this page

ON THIS PAGE

[Folder structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-assets-builder%23folder-structure)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-assets-builder%23usage)

[Use case examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder/docs/guides/vtex-io-documentation-assets-builder%23use-case-examples)

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 quickorder 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.quickorder/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

[Order Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder/docs/apps/vtex.order-configuration)

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

[SKU List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder/docs/apps/vtex.sku-list)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

[Order Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder/docs/apps/vtex.order-configuration)

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

[SKU List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder/docs/apps/vtex.sku-list)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Quickorder

Official extension

Version: 3.16.3

Latest version: 3.16.3

[![{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

The Quickorder app, designed for **B2B scenarios**, creates a custom page in your store aimed at purchases in bulk, offering tools such as uploading a spreadsheet to make bulk orders more agile.

![{"base64":"  ","img":{"width":1540,"height":972,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":116667,"url":"https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/RawQuickorder.png"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/RawQuickorder.png)

_Example of a quick order page without customization_

## Configuration

1. [Install](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-installing-an-app) the Quickorder app by running `vtex install vtex.quickorder@3.x` in your terminal.
2. Open your store's Store Theme app directory in your code editor.
3. Add the Quickorder app as a `peerDependency` in the `manifest.json` file:
`1
 "peerDependencies": {
2
+ "vtex.quickorder": "3.x"
3
 }
`

Once installed, the app will generate a new route called `/quickorder` for your store, creating the Quickorder custom page that allows bulk orders.

The new page already contains a default template with all blocks exported by the **Quickorder** app. This means the **Quickorder** page is ready to be rendered and no further actions are required.

However, you can customize it by overwriting the template and creating a brand new one tailored to your preferences. To do so, check the [Advanced configurations](#advanced-configurations) section below.

### Advanced configurations

In order to define the **Quickorder** custom page UI, you must use the blocks exported by the `vtex.quickorder` app:

| Block name              | Description                                                                                |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| quickorder-textarea     | Renders a text box, allowing users to paste a list of desired SKUs following the structure \[SKU Reference ID\],\[Quantity\]. For more on this component, check out the [How the app works](#how-the-app-works) section.                                                            |
| quickorder-upload       | Renders an upload box, working as an option that replaces the Copy/Paste SKU component (quickorder-textarea block). It allows users to upload a spreadsheet containing the desired SKUs. For more on this component, check out the [How the app works](#how-the-app-works) section. |
| quickorder-autocomplete | Renders a custom search bar, allowing users to look for SKUs and add them to the Minicart at once according to the desired quantity. For more on this component, check out the [How the app works](#how-the-app-works) section.                                                     |
| quickorder-categories   | Renders the store's category tree, allowing users to look for the desired SKUs and add them to the Minicart at once according to the desired quantity.                                                                                |

To use these blocks, follow the instructions below.

1. In the `store` folder of your Store Theme app, create a new file called `quickorder.json`.
2. Then, create a new store template called `store.quickorder`.
3. In its `blocks` array, declare the blocks responsible for building your **Quickorder** custom page. For example:
`1
{
2
 "store.quickorder": {
3
 "blocks": [
4
 "flex-layout.row#title",
5
 "flex-layout.row#textarea",
6
 "flex-layout.row#upload",
7
 "flex-layout.row#autocomplete",
8
 "flex-layout.row#categories"
9
 ]
10
 },
`
4. Configure each one of the blocks previously declared using its props, as shown in the example below:
`1
{
2
 "store.quickorder": {
3
 "blocks": [
4
 "flex-layout.row#title",
5
 "flex-layout.row#textarea",
6
 "flex-layout.row#upload",
7
 "flex-layout.row#autocomplete",
8
 "flex-layout.row#categories"
9
 ]
10
 },
11
 "flex-layout.row#title": {
12
 "children": ["flex-layout.col#title"]
13
 },
14
 "flex-layout.col#title": {
15
 "children": ["rich-text#title"],
16
 "props": {
17
 "blockClass": "titleQuickorder",
18
 "preventVerticalStretch": true
19
 }
20
 },
21
 "rich-text#title": {
22
 "props": {
23
 "text": "## Quick Order"
24
 }
25
 },
26

27
 "flex-layout.row#textarea": {
28
 "children": ["flex-layout.col#textarea"]
29
 },
30
 "flex-layout.col#textarea": {
31
 "children": ["quickorder-textarea"]
32
 },
33
 "quickorder-textarea": {
34
 "props": {
35
 "componentOnly": false,
36
 "text": "Copy/Paste Skus",
37
 "description": "[SKU Reference ID],[Quantity]",
38
 }
39
 },
40

41
 "flex-layout.row#upload": {
42
 "children": ["flex-layout.col#upload"]
43
 },
44
 "flex-layout.col#upload": {
45
 "children": ["quickorder-upload"]
46
 },
47
 "quickorder-upload": {
48
 "props": {
49
 "componentOnly": false,
50
 "text": "Upload",
51
 "description": "Upload a Spreadsheet with two columns (SKU, Quantity) to bulk order",
52
 "downloadText": "Click here to download a spreadsheet model",
53
 "alwaysShowAddToCart:": true,
54
 }
55
 },
56

57
 "flex-layout.row#autocomplete": {
58
 "children": ["flex-layout.col#autocomplete"]
59
 },
60
 "flex-layout.col#autocomplete": {
61
 "children": ["quickorder-autocomplete"]
62
 },
63
 "quickorder-autocomplete": {
64
 "props": {
65
 "componentOnly": false,
66
 "text": "One by One",
67
 "description": "Type the product name, select, enter quantity, add to the cart",
68
 }
69
 },
70

71
 "flex-layout.row#categories": {
72
 "children": ["flex-layout.col#categories"]
73
 },
74
 "flex-layout.col#categories": {
75
 "children": ["quickorder-categories"]
76
 },
77
 "quickorder-categories": {
78
 "props": {
79
 "componentOnly": false,
80
 "text": "Categories",
81
 "description": "Add products directly from their categories",
82
 }
83
 }
84
}
`

#### Props

All blocks exported by the `quickorder` app share the same props:

| Prop name     | Type    | Description                                                                                | Default value |
| ------------- | ------- | --------------------------------------------------------------------------------------------------------------- | ------------- |
| text          | string  | Component title.                                                                                | undefined     |
| description   | string  | Component description. It should be used to explain users how to properly bulk order using the given component. | undefined     |
| componentOnly | boolean | If true, only the component will be loaded, removing the text and description column.                           | false         |

Especially, the `quickorder-upload` block also can use the following prop:

| Prop name           | Type    | Description                                                                                | Default value |
| ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| downloadText        | string  | Defines a text for the spreadsheet download button. Use this prop to explain users how to properly download the spreadsheet model provided by the component. | undefined     |
| alwaysShowAddToCart | boolean | Property that defines if the add to cart button will appear even if it has some invalid Sku.                                                                 | true          |

In addition, the `quickorder-upload` and the `quickorder-textarea` block can use the following prop:

| Prop name     | Type                                                    | Description                                                                                | Default value |
| ------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| hiddenColumns | array of strings (i.e. \["sku", "seller", "quantity"\]) | Defines which columns of the review block must be hidden, you might hide more than one column separating the values with comma | \[\]          |

For more on each of the components and their respective functionalities, check out the [How the app works](#how-the-app-works) section below.

## How the app works

The **Quickorder** custom page works just like any other store page, with a unique route and its own components.

This means that you can display a link to it in components from other pages, such as the homepage, so that your storefront users can access it faster.

When configuring the page itself, we recommend that you choose a maximum of 2 bulk order options (from the total of 4 available) to establish clear communication with users. Remember: the more options on the UI, the more complex the order process becomes.

Read the following sections to learn more about the available options.

### Copy/Paste SKU (`quickorder-textarea` block)

The **Copy/Paste SKU** option allows user to paste a list of desired SKUs in a text box following the structure `[SKU Reference ID],[Quantity]`, where:

* `SKU Reference ID`: SKU Reference ID (be aware that this is not the SKU ID displayed in your admin's Catalog).
* `Quantity`: SKU quantity you wish to add to the cart.

For example:

![{"base64":"  ","img":{"width":600,"height":290,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":132552,"url":"https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/Copy-n-Paste.gif"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/Copy-n-Paste.gif)

> Remember that you need to validate the list after pasting it. Validating the Reference IDs will let you know if the selected SKUs are in fact available for purchase.

### Upload (`quickorder-upload` block)

Another possible option that replaces the **Copy/Paste SKU** option is to upload a spreadsheet containing two columns (SKU and Quantity) to the **Upload** component (`quickorder-upload` block).

![{"base64":"  ","img":{"width":326,"height":260,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":14205,"url":"https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/Spreadsheet.png"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/Spreadsheet.png)

The spreadsheet will work in the same way as the list pasted using the **Copy/Paste SKU** option, as follows:

* `SKU` column: SKU Reference ID (be aware that this is not the SKU ID displayed in your admin's Catalog).
* `Quantity` column: SKU quantity you wish to add to the cart.

> Once uploaded, the spreadsheet is then validated. Based on the filled in SKU reference IDs, **Quickorder** will confirm whether the SKUs are in fact available for purchase.

### Custom Search Bar (`quickorder-autocomplete` block)

The **Custom Search Bar** component works as a custom search bar. Simply add the name of the desired SKU, then select it and set the amount you wish to add to the cart.

Remember to add each selected item to the cart by clicking on `Add`.

![{"base64":"  ","img":{"width":600,"height":293,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":166341,"url":"https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/One-by-One.gif"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/One-by-One.gif)

This option does not require any validation, since selecting the SKUs using a search bar already ensures that they are available to purchase.

### Categories (`quickorder-categories` block)

The **Categories** component allows users to choose their desired SKUs and respective quantities using the store's categories tree, adding all the selected options to the cart at once.

![{"base64":"  ","img":{"width":600,"height":290,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":233023,"url":"https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/Category.gif"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/Category.gif)

> This option is only recommended if you have less than 50 SKUs for each category in your Catalog. Otherwise, the component will take too long to load and will negatively affect your store's user experience.

This scenario also does not require validating the SKUs that you've added to the cart, since selecting them directly from the store's categories tree ensures their availability.

## Customization

In order to apply CSS customizations to this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS Handles                |
| -------------------------- |
| autocompleteBlock          |
| buttonAdd                  |
| buttonClear                |
| buttonsBlock               |
| buttonValidate             |
| categoriesSubCategory      |
| categoriesProductContainer |
| categoryButtonAdd          |
| categoryContainer          |
| categoryLoadingProducts    |
| categoryHelper             |
| categoryInputQuantity      |
| categoryProductLabel       |
| categoryProductTitle       |
| categoryProductThumb       |
| categoryProductReference   |
| categoryProductItem        |
| categoryTitle              |
| componentContainer         |
| container                  |
| copyPasteBlock             |
| dropzoneContainer          |
| dropzoneLink               |
| dropzoneText               |
| downloadLink               |
| inputQuantity              |
| productLabel               |
| productTitle               |
| productSku                 |
| productThumb               |
| reviewBlock                |
| skuSelection               |
| textContainer              |
| textContainerTitle         |
| textContainerDescription   |
| title                      |
| customOptionButton         |

[Order Configuration« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder/docs/apps/vtex.order-configuration)[SKU ListNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder/docs/apps/vtex.sku-list)

See also

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

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder/docs/apps/vtex.quickorder%23configuration)

[Advanced configurations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder/docs/apps/vtex.quickorder%23advanced-configurations)

[How the app works](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder/docs/apps/vtex.quickorder%23how-the-app-works)

[Copy/Paste SKU (quickorder-textarea block)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder/docs/apps/vtex.quickorder%23copypaste-sku-quickorder-textarea-block)[Upload (quickorder-upload block)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder/docs/apps/vtex.quickorder%23upload-quickorder-upload-block)[Custom Search Bar (quickorder-autocomplete block)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder/docs/apps/vtex.quickorder%23custom-search-bar-quickorder-autocomplete-block)[Categories (quickorder-categories block)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder/docs/apps/vtex.quickorder%23categories-quickorder-categories-block)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.quickorder/docs/apps/vtex.quickorder%23customization)

Was this helpful?

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


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

[User] How do I use the VTEX add to cart button 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.add-to-cart-button/docs/guides)

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

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

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

VTEX IO Apps

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

[Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.add-to-cart-button)

[Autocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.search/Autocomplete)

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.search/banner)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.breadcrumb)

[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.store-footer)

[Google One-Tap Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/guides/google-one-tap-login)

[Header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.store-header)

[Locale Switcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.locale-switcher)

[Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.login)

[Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.menu)

[Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.minicart)

[Order Placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.order-placed)

[Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-customizer)

[Product Highlights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-highlights)

[Product Identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-identifier)

[Product List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-list)

[Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-price)

[Product Quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-quantity)

[Product Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-specifications)

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary)

[Product Summary Attachment List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummaryattachmentlist)

[Product Summary Buy Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummarybuybutton)

[Product Summary Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummarydescription)

[Product Summary Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummaryimage)

[Product Summary List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummarylist)

[Product Summary Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummaryname)

[Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummaryshelf)

[Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummaryskuselector)

[Product Summary SKU Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummaryskuname)

[Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.rich-text)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.search)

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.search/didyoumean)

[Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.search-result)

[Store Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.store-image)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/troubleshooting)

---

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

VTEX IO Apps

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

[Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.add-to-cart-button)

[Autocomplete](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.search/Autocomplete)

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.search/banner)

[Breadcrumb](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.breadcrumb)

[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.store-footer)

[Google One-Tap Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/guides/google-one-tap-login)

[Header](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.store-header)

[Locale Switcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.locale-switcher)

[Login](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.login)

[Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.menu)

[Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.minicart)

[Order Placed](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.order-placed)

[Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-customizer)

[Product Highlights](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-highlights)

[Product Identifier](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-identifier)

[Product List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-list)

[Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-price)

[Product Quantity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-quantity)

[Product Specifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-specifications)

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary)

[Product Summary Attachment List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummaryattachmentlist)

[Product Summary Buy Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummarybuybutton)

[Product Summary Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummarydescription)

[Product Summary Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummaryimage)

[Product Summary List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummarylist)

[Product Summary Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummaryname)

[Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummaryshelf)

[Product Summary SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummaryskuselector)

[Product Summary SKU Name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.product-summary/productsummaryskuname)

[Rich Text](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.rich-text)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.search)

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.search/didyoumean)

[Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.search-result)

[Store Image](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.store-image)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Add To Cart Button

Official extension

Version: 0.31.0

Latest version: 0.31.0

[![{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)

The `add-to-cart-button` block is designed to add products to the [Minicart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.minicart/) (`minicart.v2`).

![{"base64":"  ","img":{"width":2094,"height":1052,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":407330,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-add-to-cart-button-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-add-to-cart-button-0.png)

> The **Add to Cart** button is only compatible with stores using Minicart v2\. For these stores, it will function correctly on the Shelf component and the Product Details page. If you are using [Minicart v1](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/minicart/blob/383d7bbd3295f06d1b5854a0add561a872e1515c/docs/README.md), you should configure the [Buy Button block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/buybutton) on the Product Details page and the [Product Summary Buy button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/productsummarybuybutton) on the Shelf component instead.

## Configuration

1. Import the `vtex.add-to-cart-button` app to your theme dependencies in the `manifest.json` file, as follows:

`1

"dependencies": {

2

 "vtex.add-to-cart-button": "0.x"

3

}

`

1. Add the `add-to-cart-button` to another theme block using the product context, such as the `product-summary.shelf`. In the example below, the `add-to-cart-button` is added to the `flex-layout.row` block from the `store.product` template, which uses the product context:

`1

 "store.product": {

2

 "children": [

3

 "flex-layout.row#product",

4

 ]

5

 },

6

 "flex-layout.row#product": {

7

 "children": [

8

 "add-to-cart-button"

9

 ]

10

 }

`

| Prop name               | Type    | Description                                                                                | Default value                                                                               |
| ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| onClickBehavior         | enum    | Controls what happens when users click the button. Possible values are: go-to-product-page, add-to-cart, ensure-sku-selection (if multiple SKUs are available, users will be redirected to the product page to select the desired one. If the product only has 1 SKU available, it will be automatically added to the cart when the button is clicked) and add-to-cart-and-trigger-shipping-modal (opens a modal for ZIP code input if none is provided; otherwise, it adds the item to the cart. See more in [vtex.shipping-option-components](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/shipping-option-components)). | add-to-cart                                                                                |
| onClickEventPropagation | enum    | Controls whether the 'onClick' event, triggered upon user clicks, should propagate to the parent elements of the page. Possible values are: disabled and enabled.                                                                                | disabled                                                                                |
| isOneClickBuy           | boolean | Determines whether the user should be redirected to the checkout page (true) or not (false) when the **Add to Cart** button is clicked.                                                                                | false                                                                                |
| customOneClickBuyLink   | string  | Defines the link to which users will be redirected when the **Add to Cart** button is clicked, and the isOneClickBuy prop is set to true.                                                                                | /checkout/#/cart                                                                            |
| customToastUrl          | string  | Defines the link to which users will be redirected when the toast (pop-up notification displayed when adding an item to the minicart) is clicked.                                                                                | /checkout/#/cart                                                                            |
| text                    | string  | Defines a custom text message to be displayed on the **Add to Cart** button.                                                                                | Add to cart _(automatic translation will be applied following your store default language)_ |
| unavailableText         | string  | Defines a custom text message to be displayed on the **Add to Cart** button when a product is unavailable.                                                                                | Unavailable _(automatic translation will be applied following your store default language)_ |
| customPixelEventId      | string  | Defines the id for the event that the button will send upon user interaction.                                                                                | undefined                                                                                |

## Customization

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

| CSS Handles         |
| ------------------- |
| buttonText          |
| buttonDataContainer |
| tooltipLabelText    |

[Basic components« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/guides/basic-components)[AutocompleteNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.search/Autocomplete)

See also

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

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.add-to-cart-button%23configuration)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button/docs/apps/vtex.add-to-cart-button%23customization)

Was this helpful?

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