[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 creating an institutional page with content types 1 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/creating-an-institutional-page-with-content-types-1/docs/guides)

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

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

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

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-an-institutional-page-with-content-types-1/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-an-institutional-page-with-content-types-1/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-an-institutional-page-with-content-types-1/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-an-institutional-page-with-content-types-1/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-an-institutional-page-with-content-types-1/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-an-institutional-page-with-content-types-1/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-an-institutional-page-with-content-types-1/updates/release-notes)

Creating an institutional page with Content types

Content types are templates that structure your documents. They can be pages, publications, articles, events, products, and any other type of content that you want to insert into your project. You can also use them in the CMS to create an institutional page.

To create an institutional page, follow these instructions.

## Instructions

1. Define the components of your page. In the example below, we use the `ww.vtex.com` page and its title, partners, highlights, and carousel components.

![{"base64":"  ","img":{"width":1049,"height":559,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":241068,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/creating-an-institutional-page-with-content-types-1-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/creating-an-institutional-page-with-content-types-1-0.png)

1. In the cms folder, go to the `content-types.json` file.

![{"base64":"  ","img":{"width":381,"height":216,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":47545,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/creating-an-institutional-page-with-content-types-1-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/creating-an-institutional-page-with-content-types-1-1.png)

1. In the `content-type.json` file, create a new content type. To do this, define the following information:
   * `id`: content type ID. It is recommended to have a lowercase pattern with no spaces, like with URLs.
   * `name`: name that will be displayed on the page.
   * `configurationSchemaSets`: extra blocks that will configure the page, such as menu settings and slug blocks, for example.
content-type.json
`1
{
2
 "id": "landing",
3
 "name": "Landing Page",
4
 "configurationSchemaSets": []
5
}
`
2. Determine the page sections in the `section.json` file. To define the sections, duplicate an existing one and edit it with the new names and descriptions you want on your page.
section.json
`1
{
2
 “name” “Hero”,
3
 “schema”: {
4
 “title” “Hero”,
5
 “description”: “Add a quick promotion with an image/action pair”,
6
 “type”: “object”,
7
 “properties”: {
8
 “title”: {
9
 “type”: “string”
10
 },
11
 “subtitle”: {
12
 “type”: “string”
13
 },
14
 “linkText”: {
15
 “type”: “string”,
16
 “title”: “Link text”
17
 },
18
 “link”: {
19
 “type”: “string”,
20
 “title”: “Link path”
21
 },
22
 “ImageSrc”: {
23
 “type”: “string”,
24
 “title”: “Image”,
25
 “widget”: {
26
 “ui:widget”: image-uploader
27
 },
28
 “Imagealt”: {
29
 “Type”: “string”,
30
 “title”: “Alt text”
31
 }
32
 }
33
 }
34
 }
35
}
`
>  These fields are the structure of your page. Complete them based on what was defined in step one of this guide.
3. After defining the sections, save them. If you want to view the draft, go to the repository for testing. 6\. Go to the store to view the final version of your page.

## Learn More

* [Setting up the VTEX Headless CMS in your FastStore project](https://read.calvincode.net/reader?url=https://www.faststore.dev/tutorials/cms/2%23step-2---syncing-your-changes)
* [Adding Content Types and Sections to the VTEX Headless CMS](https://read.calvincode.net/reader?url=https://www.faststore.dev/tutorials/cms/3)
* [Querying the CMS data](https://read.calvincode.net/reader?url=https://www.faststore.dev/tutorials/cms/4)

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/concepts-1/creating-an-institutional-page-with-content-types-1.md)

Contributors

1

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

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-an-institutional-page-with-content-types-1/docs/guides/creating-an-institutional-page-with-content-types-1%23instructions)

[Learn More](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-an-institutional-page-with-content-types-1/docs/guides/creating-an-institutional-page-with-content-types-1%23learn-more)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/concepts-1/creating-an-institutional-page-with-content-types-1.md)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-an-institutional-page-with-content-types-1/docs/guides/creating-an-institutional-page-with-content-types-1%23instructions)

[Learn More](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-an-institutional-page-with-content-types-1/docs/guides/creating-an-institutional-page-with-content-types-1%23learn-more)

On this page

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


[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 search control fulltextsearchbox 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/search-control-fulltextsearchbox/docs/guides)

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

[How search parameters work](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/how-search-parameters-work)

[Search Control – fulltextSearchBox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/search-control-fulltextsearchbox)

[Consult store search terms information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/consult-store-search-terms-information)

[Consult product search information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/consult-product-search-information)

[Get banner list for a specific search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/get-banner-list-for-a-specific-search)

[Get a list of the possible facets for a specific search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/get-a-list-of-the-possible-facets-for-a-specific-search)

[Segmenting the search result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/vtex-io-documentation-segmenting-the-search-result)

[Access Control List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/access-control-list)

[Delivery promise for headless stores (Beta)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/delivery-promise-for-headless-stores)

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

[How search parameters work](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/how-search-parameters-work)

[Search Control – fulltextSearchBox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/search-control-fulltextsearchbox)

[Consult store search terms information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/consult-store-search-terms-information)

[Consult product search information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/consult-product-search-information)

[Get banner list for a specific search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/get-banner-list-for-a-specific-search)

[Get a list of the possible facets for a specific search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/get-a-list-of-the-possible-facets-for-a-specific-search)

[Segmenting the search result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/vtex-io-documentation-segmenting-the-search-result)

[Access Control List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/access-control-list)

[Delivery promise for headless stores (Beta)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/delivery-promise-for-headless-stores)

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

Search

[Search Control – fulltextSearchBox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/search-control-fulltextsearchbox)

Search Control – fulltextSearchBox

The `<vtex.cmc:fullTextSearchBox />` control is responsible for generating the search box for [VTEX Legacy CMS Portal](https://read.calvincode.net/reader?url=https://help.vtex.com/tracks/cms--2YcpgIljVaLVQYMzxQbc3z/1oN446gRGcR2s70RvBCAmj). This control includes a search input field and a dropdown for restricting searches to specific departments. Below is an example of the control without any applied CSS styling:

![{"base64":"  ","img":{"width":341,"height":105,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":4646,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/Search/controle-busca-cru.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/Search/controle-busca-cru.png)

> VTEX offers two search solutions: VTEX Search and VTEX Intelligent Search. This guide specifically covers VTEX Search. For more information on VTEX Intelligent Search, refer to [this track](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb).

Search functionality is a crucial feature that should be accessible on all store pages. As a best practice, include this control in a [subtemplate](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/subtemplates--tutorials%5F577) within the store's header.

## HTML rendered by the control

The `fullTextSearchBox` control generates the following HTML structure:

`1

<fieldset class="busca">

2

 <legend>Buscar no site</legend>

3

 Buscar

4

 <select id="ftDept4aceafb578de4c7caf31e06bcc8d45b9">

5

 <option value="">Todo o site</option>

6

 <option value="1000000">Integracao</option>

7

 <option value="1">Eletrodomésticos</option>

8

 <option value="3">Moda</option>

9

 </select>

10

 <input type="hidden" id=ftIdx4aceafb578de4c7caf31e06bcc8d45b9 value="" />

11

 <input id="ftBox4aceafb578de4c7caf31e06bcc8d45b9" class="fulltext-search-box" type="text" size="20" accesskey="b" />

12

 <input id="ftBtn4aceafb578de4c7caf31e06bcc8d45b9" type="button" value="Buscar" class="btn-buscar" />

13

</fieldset>

`

## Autocomplete feature

The `fullTextSearchBox` control includes a built-in autocomplete feature, which activates when a user types at least three characters in the search field. Customizing the autocomplete requires applying your own CSS. Below is an example of the HTML output for autocomplete:

`1

2

adidas em Modelos

3

adidas em Tênis

4

adidas em Lançamentos

5

adidas em Masculino

6

7

8

  minibola adidas brazuca glider - copa do mundo

9

10

11

12

13

14

 tênis adidas springblade feminino

15

16

17

18

19

20

 tênis adidas dynamic fusion 50 feminino

21

22

23

`

## CSS customization examples

The `fullTextSearchBox` control allows for extensive customization using CSS. Here are some examples:

**Example 1**

![{"base64":"  ","img":{"width":560,"height":318,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":169791,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/Search/controle-busca-autocomplete-560x318.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/Search/controle-busca-autocomplete-560x318.png)

**Example 2**

![{"base64":"  ","img":{"width":560,"height":43,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":10212,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/Search/controle-busca-exemplo-560x43.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/Search/controle-busca-exemplo-560x43.png)

**Example 3**

![{"base64":"  ","img":{"width":518,"height":69,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":4109,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/Search/controle-busca-exemplo1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/Search/controle-busca-exemplo1.png)

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Search/search-control-fulltextsearchbox.md)

[How search parameters work« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox//docs/guides/how-search-parameters-work)[Consult store search terms informationNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox//docs/guides/consult-store-search-terms-information)

Contributors

1

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

ON THIS PAGE

[HTML rendered by the control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/search-control-fulltextsearchbox%23html-rendered-by-the-control)

[Autocomplete feature](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/search-control-fulltextsearchbox%23autocomplete-feature)

[CSS customization examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/search-control-fulltextsearchbox%23css-customization-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/Search/search-control-fulltextsearchbox.md)

Copy page

On this page

ON THIS PAGE

[HTML rendered by the control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/search-control-fulltextsearchbox%23html-rendered-by-the-control)

[Autocomplete feature](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/search-control-fulltextsearchbox%23autocomplete-feature)

[CSS customization examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/search-control-fulltextsearchbox/docs/guides/search-control-fulltextsearchbox%23css-customization-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] Provide a guide on guides vtex add to cart button 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-add-to-cart-button/docs/guides)

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

VTEX IO Apps

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

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

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

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

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

[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/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/guides/vtex-add-to-cart-button/docs/guides/google-one-tap-login)

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

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

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

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

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

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

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

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

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

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

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

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

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

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/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/guides/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/guides/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/guides/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/guides/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/guides/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/guides/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/guides/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/guides/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/guides/vtex-add-to-cart-button/docs/apps/vtex.product-summary/productsummaryskuname)

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/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/guides/vtex-add-to-cart-button/docs/guides/vtex-io-deprecated-apps)

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

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

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

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

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

[Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/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/guides/vtex-add-to-cart-button/docs/guides/google-one-tap-login)

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

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

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

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

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

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

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

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

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

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

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

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

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

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/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/guides/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/guides/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/guides/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/guides/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/guides/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/guides/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/guides/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/guides/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/guides/vtex-add-to-cart-button/docs/apps/vtex.product-summary/productsummaryskuname)

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/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/guides/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/guides/vtex-add-to-cart-button/docs/vtex-io-apps)

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/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/guides/vtex-add-to-cart-button/docs/guides/basic-components)[AutocompleteNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/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/guides/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/guides/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=)


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

[User] Provide a guide on guides get payment data mercado libre orders api in VTEX.

[Assistant]
Documentation

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

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/master-data)

---

Payments

---

Orders

[Feed v3](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/orders-feed)

[Order modifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/order-modifications)

[Change seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/change-seller)

[Cancel order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/order-canceling-improvements)

[Actions in orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/actions-orders)

[Fetching marketplace information with the Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/get-marketplace-data-orders-api)

[Fetching payment details from a Mercado Libre order with Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/get-payment-data-mercado-libre-orders-api)

[Formatting order invoicing time via API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/formatting-order-invoicing-time)

[Using VTEX Admin filters on orders via API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/using-orders-management-filters-in-api)

[Adding a second address for invoicing an order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/adding-a-second-address-to-the-order)

Subscriptions

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/master-data)

---

Payments

---

Orders

[Feed v3](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/orders-feed)

[Order modifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/order-modifications)

[Change seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/change-seller)

[Cancel order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/order-canceling-improvements)

[Actions in orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/actions-orders)

[Fetching marketplace information with the Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/get-marketplace-data-orders-api)

[Fetching payment details from a Mercado Libre order with Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/get-payment-data-mercado-libre-orders-api)

[Formatting order invoicing time via API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/formatting-order-invoicing-time)

[Using VTEX Admin filters on orders via API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/using-orders-management-filters-in-api)

[Adding a second address for invoicing an order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/adding-a-second-address-to-the-order)

Subscriptions

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides)

Orders

[Actions in orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/actions-orders)

[Fetching payment details from a Mercado Libre order with Orders API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/get-payment-data-mercado-libre-orders-api)

Fetching payment details from a Mercado Libre order with Orders API

When [setting up order integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-integration) for your ERP middleware or similar integration, you may need additional payment details from orders placed in external marketplaces.

This article explains where our [native Mercado Libre connector](https://read.calvincode.net/reader?url=https://help.vtex.com/pt/tracks/mercado-libre-integration-set-up--2YfvI3Jxe0CGIKoWIGQEIq/51oWBHvVxSs8eAwLQhSbSd) stores this information in the orderForm data structure and how to fetch this data for your integration.

## Understanding customData

Checkout API allows integrators to [create customizable fields in the shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-and-handle-custom-information-in-the-order%23creating-apps-and-fields-through-the-configuration-request) through the `customData` object. Their middleware can create extra fields in the orderForm and set the value of each of these fields when placing an order, so that this additional information can be retrieved when fetching order details with Orders API.

## Custom fields created by Mercado Libre connector

Our native Mercado Libre connector leverages this functionality to add custom fields to orders, as seen in the code snippet below. Note: the actual orders data structure is much larger - we are omitting everything else and highlighting only `customData` in this example.

`1

{

2

 ...

3

 "customData": {

4

 "customApps": [

5

 {

6

 "fields": {

7

 "orderIdMarketplace": "4113970696",

8

 "paymentIdMarketplace": "12040787637",

9

 "authorization_code": "1234567",

10

 "currency_id": "BRL",

11

 "first_six_digits": "0",

12

 "installments": "1",

13

 "last_four_digits": "0",

14

 "payment_method_id": "hipercard",

15

 "payment_type": "credit_card"

16

 },

17

 "id": "marketplace-integration",

18

 "major": 1

19

 }

20

 ]

21

 },

22

 ...

23

}

`

The table below lists the `customData` fields created by the Mercado Libre connector.

| Field                | Description                                                                                |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| orderIdMarketplace   | Order identifier in Mercado Libre                                                                                |
| paymentIdMarketplace | Payment identifiers in Mercado Libre                                                                                |
| authorization\_code  | Authorization code for Mercado Libre payments                                                                                |
| currency\_id         | [ISO 4127](https://read.calvincode.net/reader?url=https://en.wikipedia.org/wiki/ISO%5F4217) currency code                                                                                |
| first\_six\_digits   | [Issuer Identification Number (IIN)](https://read.calvincode.net/reader?url=https://en.wikipedia.org/wiki/Payment%5Fcard%5Fnumber%23Issuer%5Fidentification%5Fnumber%5F%28IIN%29) of credit cards used in Mercado Libre payments |
| installments         | Number of installments for Mercado Libre order                                                                                |
| last\_four\_digits   | Last four digits of credit cards used in Mercado Libre payments                                                                                |
| payment\_method\_id  | Payment method identifier in Mercado Libre                                                                                |
| payment\_type        | Payment type identifier in Mercado Libre                                                                                |

> The default value returned is `0` if the payment method does not offer any data for `authorization_code`, `first_six_digits`, `last_four_digits`

## Multiple payments

If there is an order that was payed for with more than one payment method, the data returned by [Mercado Libre's Orders API](https://read.calvincode.net/reader?url=https://developers.mercadolivre.com.br/en%5Fus/manage-sales%23How-can-I-know-if-there-are-two-payments) is split by vertical bars (`|`) in the following fields:

* `paymentIdMarketplace`
* `authorization_code`
* `first_six_digits`
* `last_four_digits`
* `payment_method_id`
* `payment_type`

`1

{

2

 ...

3

 "customData": {

4

 "customApps": [

5

 {

6

 "fields": {

7

 "orderIdMarketplace": "893431118",

8

 "paymentIdMarketplace": "885920310 | 885920410",

9

 "authorization_code": "008877 | 211118",

10

 "currency_id": "BRL",

11

 "first_six_digits": "402360 | 512106",

12

 "installments": "1",

13

 "last_four_digits": "1001 | 2002",

14

 "payment_method_id": "visa | master",

15

 "payment_type": "credit_card | credit_card"

16

 },

17

 "id": "marketplace-integration",

18

 "major": 1

19

 }

20

 ]

21

 },

22

 ...

23

}

`

Contributors

2

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

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Orders/actions-orders/get-payment-data-mercado-libre-orders-api.md)

[Fetching marketplace information with the Orders API« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api//docs/guides/get-marketplace-data-orders-api)[Formatting order invoicing time via APINext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api//docs/guides/formatting-order-invoicing-time)

Contributors

2

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

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

ON THIS PAGE

[Understanding customData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/get-payment-data-mercado-libre-orders-api%23understanding-customdata)

[Custom fields created by Mercado Libre connector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/get-payment-data-mercado-libre-orders-api%23custom-fields-created-by-mercado-libre-connector)

[Multiple payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/get-payment-data-mercado-libre-orders-api%23multiple-payments)

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/Orders/actions-orders/get-payment-data-mercado-libre-orders-api.md)

Copy page

On this page

ON THIS PAGE

[Understanding customData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/get-payment-data-mercado-libre-orders-api%23understanding-customdata)

[Custom fields created by Mercado Libre connector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/get-payment-data-mercado-libre-orders-api%23custom-fields-created-by-mercado-libre-connector)

[Multiple payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-payment-data-mercado-libre-orders-api/docs/guides/get-payment-data-mercado-libre-orders-api%23multiple-payments)

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 add service to the cart 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/add-service-to-the-cart/docs/guides)

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/checkout-security)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/shopping-cart-section-api-quick-start-guides)

[Simulate a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/simulate-a-shopping-cart)

[Get current or create a new cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/create-a-new-cart)

[Get cart information by ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/get-cart-information-by-id)

[Remove all items from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/remove-all-items-from-cart)

[Remove all personal data from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/remove-all-personal-data)

[Add cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-cart-items)

[Update cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/update-cart-items)

[Change the price of an SKU in a cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/change-price)

[Ignore profile data from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/ignore-profile-data)

[Get cart installments information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/get-cart-installments-information)

[Add coupons to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-coupons-to-the-cart)

[Add a service (offering) to a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-service-to-the-cart)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/cart-attachments-section-api-quick-start-guides)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/configuration-section-api-quick-start-guides)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/fulfillment-checkout-section-api-quick-start-guides)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/region-section-api-quick-start-guides)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/checkout-error-codes)

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/checkout-security)

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/shopping-cart-section-api-quick-start-guides)

[Simulate a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/simulate-a-shopping-cart)

[Get current or create a new cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/create-a-new-cart)

[Get cart information by ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/get-cart-information-by-id)

[Remove all items from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/remove-all-items-from-cart)

[Remove all personal data from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/remove-all-personal-data)

[Add cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-cart-items)

[Update cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/update-cart-items)

[Change the price of an SKU in a cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/change-price)

[Ignore profile data from cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/ignore-profile-data)

[Get cart installments information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/get-cart-installments-information)

[Add coupons to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-coupons-to-the-cart)

[Add a service (offering) to a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-service-to-the-cart)

[Cart Attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/cart-attachments-section-api-quick-start-guides)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/configuration-section-api-quick-start-guides)

[Fulfillment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/fulfillment-checkout-section-api-quick-start-guides)

[Region](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/region-section-api-quick-start-guides)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/checkout-error-codes)

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

[Shopping Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/shopping-cart-section-api-quick-start-guides)

[Add a service (offering) to a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-service-to-the-cart)

Add a service (offering) to a shopping cart

A service, also known as an offering, is an item that may come with a product, optionally and with an additional cost. It is used to assign a value of an additional service to an SKU, as a gift packaging.

You can add a service to a shopping cart by using the [Checkout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api). To do so, follow the sections below.

## Checking if a cart product has a service attached to it

First, you must check if a product has a service available attached to it. This way, you know the options of service you can add to the item in the shopping cart.

You must use the [Cart simulation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23post-/api/checkout/pub/orderForms/simulation?endpoint=post-/api/checkout/pub/orderForms/simulation) endpoint and send the `skuId`, `seller` and `quantity` in the request body, as the code example below.

`1

{ "items": [

2

 {

3

 "id": "30",

4

 "quantity": 1,

5

 "seller": "1"

6

 }

7

 ]

8

}

`

In the response body, you must check if the `offerings` object presents the following information, as in the example below:

`1

 "offerings": [

2

 {

3

 "type": "Removal of additional old appliance",

4

 "id": "1",

5

 "name": "Removal of additional old appliance",

6

 "allowGiftMessage": false,

7

 "attachmentOfferings": ["Name", "Info"],

8

 "price": 2999

9

 }

10

 ]

`

If the `offerings` array presents this information, the SKU has a service associated with it. You will use the `id` value in the next step.

> If you have multiple services associated with the product, all of them will be returned in the `offerings` array.

## Adding a service to a product

You can add a service to an item in the shopping cart by using the checkout [orderForm](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/orderform-fields).

To do so, you must add the item to the cart using the [Add cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23post-/api/checkout/pub/orderForm/-orderFormId-/items) endpoint.

Then, you must send the service `id` from the previous step in the desired `item` by using the request body of the `POST` `https://{accountName}.{environment}.com/api/checkout/pub/orderForm/{orderFormId}/items/{itemPosition}/offerings` request:

`1

{

2

 "id": "1"

3

}

`

The expected response is the `orderForm` structure with the `offerings` array with the service information inside it, as the code below:

`1

 "offerings": [

2

 {

3

 "type": "Removal of additional old appliance",

4

 "id": "1",

5

 "name": "Removal of additional old appliance",

6

 "allowGiftMessage": false,

7

 "attachmentOfferings": ["Name", "Info"],

8

 "price": 2999

9

 }

10

 ]

`

### Adding more than one service to a product

If you need to add more than a service to a specific product, you must add more units of the product that the service is attached to. To do so, you must follow the steps below:

1. Update the product you want to add the service to have `"quantity": 1`. Use the [Handle cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23patch-/api/checkout/pub/orderForm/-orderFormId-/items?endpoint=patch-/api/checkout/pub/orderForm/-orderFormId-/items) endpoint with the following request body:

`1

{

2

 "orderItems": [

3

 {

4

 "index": 0,

5

 "quantity": 1

6

 }

7

 ]

8

}

`

1. Attach the `offering` to the `item` in the shopping cart. Use the `POST` `https://{accountName}.{environment}.com/api/checkout/pub/orderForm/{orderFormId}/items/{itemPosition}/offerings` request as the previous section:

`1

{

2

 "id": "1"

3

}

`

1. Update the `quantity` back to the previous value, sending the `noSplitItem` field as `true` in the [Handle cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23patch-/api/checkout/pub/orderForm/-orderFormId-/items?endpoint=patch-/api/checkout/pub/orderForm/-orderFormId-/items) endpoint in the request body. This field will make sure the items do not split the configuration, making it possible to have the same `quantity` of products and services.

`1

 "orderItems": [

2

 {

3

 "index": 0,

4

 "quantity": 4

5

 }

6

 ],

7

 "noSplitItem": true

`

## Removing a service (offering) from a shopping cart

To remove a service (offering), you must use the `POST` `https://{accountName}.{environment}.com/api/checkout/pub/orderForm/{orderFormId}/items/{itemPosition}/offerings/{serviceId}/remove` endpoint with the service `id` in the request body:

`1

{

2

 "id": "1"

3

}

`

The expected response is the `orderForm` structure with the `offerings` array empty, like the example below:

`1

 "offerings": []

`

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Checkout/shopping-cart-section-api-quick-start-guides/add-service-to-the-cart.md)

[Add coupons to the cart« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart//docs/guides/add-coupons-to-the-cart)[Cart AttachmentsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart//docs/guides/cart-attachments-section-api-quick-start-guides)

Contributors

1

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

ON THIS PAGE

[Checking if a cart product has a service attached to it](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-service-to-the-cart%23checking-if-a-cart-product-has-a-service-attached-to-it)

[Adding a service to a product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-service-to-the-cart%23adding-a-service-to-a-product)

[Adding more than one service to a product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-service-to-the-cart%23adding-more-than-one-service-to-a-product)

[Removing a service (offering) from a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-service-to-the-cart%23removing-a-service-offering-from-a-shopping-cart)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Checkout/shopping-cart-section-api-quick-start-guides/add-service-to-the-cart.md)

Copy page

On this page

ON THIS PAGE

[Checking if a cart product has a service attached to it](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-service-to-the-cart%23checking-if-a-cart-product-has-a-service-attached-to-it)

[Adding a service to a product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-service-to-the-cart%23adding-a-service-to-a-product)

[Adding more than one service to a product](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-service-to-the-cart%23adding-more-than-one-service-to-a-product)

[Removing a service (offering) from a shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-service-to-the-cart/docs/guides/add-service-to-the-cart%23removing-a-service-offering-from-a-shopping-cart)

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