[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 affiliates program app in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

[AB Tester](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtexarg.abtester)

[Abandoned Cart Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.abandoned-cart-service)

[Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.badges)

[Broadcaster](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.broadcaster)

[Catalog Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.catalog-images)

[Checkout UI Custom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.checkout-ui-custom)

[Checkout UI Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.checkout-ui-settings)

[Messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.messages)

[Product Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.product-context)

[Pickup point selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtexbr.pickup-selector)

[Rewriter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.rewriter)

[Responsive Values](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.responsive-values)

[Search GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.search-graphql)

[Session Client](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.session-client)

[Store Icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.store-icons)

[Store Sitemap](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.store-sitemap)

[VTEX Telemarketing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.telemarketing)

[Assembly Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/assembly-options-app)

[Affiliates Program](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app)

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

[AB Tester](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtexarg.abtester)

[Abandoned Cart Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.abandoned-cart-service)

[Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.badges)

[Broadcaster](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.broadcaster)

[Catalog Images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.catalog-images)

[Checkout UI Custom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.checkout-ui-custom)

[Checkout UI Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.checkout-ui-settings)

[Messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.messages)

[Product Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.product-context)

[Pickup point selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtexbr.pickup-selector)

[Rewriter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.rewriter)

[Responsive Values](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.responsive-values)

[Search GraphQL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.search-graphql)

[Session Client](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.session-client)

[Store Icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.store-icons)

[Store Sitemap](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.store-sitemap)

[VTEX Telemarketing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/apps/vtex.telemarketing)

[Assembly Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/assembly-options-app)

[Affiliates Program](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app)

---

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

---

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

---

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

---

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

---

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

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

[Affiliates Program](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/guides/affiliates-program-app)

Affiliates Program

> For the **Affiliates Program app**, an affiliate is different from the standard definition of [affiliate in VTEX](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/o-que-e-afiliado--4bN3e1YarSEammk2yOeMc0). In the app's context, an affiliate is anyone who associates with a VTEX store to promote sales while receiving a commission.

The [Affiliates Program app](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/aplicativo-affiliates-program--7IpHHHcjjWxdmSRMw1FMPQ) creates a specific URL of your VTEX store for each of your affiliates, and every URL is targeted with a parameter that identifies the affiliate. When an affiliate shares their URL with shoppers, and they buy something through that link, the affiliate earns a commission over sales.

The image below is an example of an affiliate’s page to be shared with shoppers:

![{"base64":"  ","img":{"width":2989,"height":1421,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":800373,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-0.png)

The app also creates a profile page for the affiliate to keep track of orders and commissions, as you will see in the next section. Affiliates do not need access to your VTEX store Admin in order to access their profile page, which looks like the following image:

![{"base64":"  ","img":{"width":2987,"height":1152,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":138698,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-1.png)

The **Affiliates Program app’s** main characteristics and behavior are the following:

* The app [provides pages and dashboards](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/aplicativo-affiliates-program--7IpHHHcjjWxdmSRMw1FMPQ%23vtex-admin-pages) in your VTEX Admin, allowing your store to manage affiliates, orders, and commissions.
* The merchant using a VTEX store can register an affiliate by filling out a form. More information on the next section.
* The merchant using a VTEX store configures a default affiliates’ commission percentage over all products. It is possible to configure a specific commission for an SKU, and that configuration is prioritized over the default value.
* The [affiliates’ URLs can be customized](#affiliates-pages-customization) to show specific products and guide the customer’s user experience.

### Affiliates Program in VTEX Admin

After installing and configuring the app, you will find three pages in your VTEX Admin:

* [Affiliate Management](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/aplicativo-affiliates-program--7IpHHHcjjWxdmSRMw1FMPQ%23affiliate-management): allows you to add new affiliates and manage the existing ones. You can add a new affiliate by clicking on the button `Add affiliate` and filling out the form.

![{"base64":"  ","img":{"width":1366,"height":634,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":106377,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-2.png)

* [Orders Management](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/aplicativo-affiliates-program--7IpHHHcjjWxdmSRMw1FMPQ%23order-management): provides information about affiliates’ orders. The page enables you to filter data in multiple ways and export it via email.
![{"base64":"  ","img":{"width":1366,"height":801,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":139108,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-3.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-3.png)
* [Commissions Management](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/aplicativo-affiliates-program--7IpHHHcjjWxdmSRMw1FMPQ%23commission-management): allows you to manage affiliates’ commissions and import information using files with . CSV or . XLSX extension.
![{"base64":"  ","img":{"width":1366,"height":923,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":88174,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-4.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-4.png)

## Compatibility

The Affiliates Program app is compatible only with stores using [VTEX IO](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/cms--2YcpgIljVaLVQYMzxQbc3z/4yB9wSl79cArd68aRBnBZ2), so make sure you fit the criteria. Stores using [Legacy CMS Portal](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/cms--2YcpgIljVaLVQYMzxQbc3z/1oN446gRGcR2s70RvBCAmj) or [Headless CMS](https://read.calvincode.net/reader?url=https://www.faststore.dev/docs/headless-cms-overview) are not compatible.

## Installation

To install the Affiliates Program app, follow the steps below:

1. In the VTEX App Store, log into your VTEX store’s account.
2. Go to the [Affiliates Program app](https://read.calvincode.net/reader?url=https://apps.vtex.com/vtex-affiliates/p) page.
3. Click on `GET APP`.
4. In your cart in the VTEX App Store, click on `PLACE ORDER`.
5. Click on `GO TO INSTALL PAGE`.
6. In the VTEX Admin, click on `INSTALL`.

The app settings will appear in your VTEX Admin under _Other > Affiliates_, and you will see a page like the image below:

> If using the [New VTEX Admin](https://read.calvincode.net/reader?url=https://content.vtex.com/join-new-admin-beta-program-en/), you will find the app settings under _Apps > Affiliates_.

![{"base64":"  ","img":{"width":1366,"height":810,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":55980,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-5.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-5.png)

In **Settings**, you will define for how long the lead will be valid and set a default commission percentage. To do so, follow the steps below:

1. Fill in the **Lead duration in days** field with the number of days you wish to configure the lead. It is the lead that sets the priority of an affiliate to receive commissions.
> Every affiliate has its own unique identification code, which is the `Affiliate ID` . When a shopper buys something through the affiliate's URL, the `Affiliate ID` is linked to the shopper for the period configured in this step - 60 days by default. If within the lead duration that shopper makes a second purchase, whether by accessing the store in an organic way, or through another affiliate's URL, the `Affiliate ID` of the first affiliate is prioritized and ensures commission. Note that the `Affiliate ID` for the app's context is not the `Affiliate ID` in the standard definition of [affiliate in VTEX](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/o-que-e-afiliado--4bN3e1YarSEammk2yOeMc0).
2. Fill in the **Default value to be used for sku commission** field with the percentual you want to set to determine the affiliates’ commission over sales. Use numbers only, decimals are not allowed.
3. Click on `SAVE`.

The following message will be displayed:

> _Your information was submitted successfully._

## Configuration

You will need to access your VTEX store’s code to set up the app and the affiliate’s URL, as shown in the following sections.

### Set up the Affiliates Program app

Open your store's **Store Theme** app directory in your code editor and add the Affiliates Program app to your theme's `manifest.json` file inside `peerDependencies` , as shown below:

`1

"peerDependencies": {

2

 "vtex.affiliates": "1.x"

3

 }

`

When you add the Affiliates Program app as a dependency, the app exports theme blocks used to create pages on the storefront: `affiliate` , `affiliate-profile` , and `affiliate-form` . These pages will be available with a default layout:

* **Affiliate’s page:** the page the affiliate sends to shoppers based on your VTEX store storefront. The URL is `{storeName.com}/affiliates/{affiliateSlug}`.
* **Affiliates profile page:** a page where the affiliate can see orders made through their URL and analyze a dashboard with different metrics. The URL is `{storeName.com}/affiliates/{affiliateSlug}/profile`.
* **Affiliate’s form:** a page with a form to be filled by anyone who wants to become an affiliate. The URL is `{storeName.com}/affiliate/form`.

To access the first two pages, you will have to configure an affiliate to be able to replace `{affiliateSlug}` with a valid slug.

### Set up a shareable URL

For the affiliate to be able to share their URL, you will need to add the `affiliate-url-monitoring` block into the header of your theme. That block seeks parameters with a valid affiliate slug to add the affiliate’s information to the purchase.

To do so, check out the example below:

After that, the affiliate will share a URL with the parameter **targeting** with their slug as value so that the affiliate’s information is associated with the sale. See an example in the table below:

| Example URL                                         | Behavior                                                                                |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| https://storeName.com/product/p                     | URL without the **targeting** parameter, which does not identify the affiliate.            |
| https://storeName/product/p?targeting=affiliateName | URL with the **targeting** parameter, which links the shopper’s purchase to the affiliate. |

It is possible to change the parameter property used for the affiliate to share the URL by changing the code in [props](#props). You can also change it in VTEX Admin, by accessing _CMS > [Site Editor](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/site-editor-overview--299Dbeb9mFczUTyNQ9xPe1) \> Blocks > Affiliate Monitoring_ and editing the `Parameter` field, as shown in the image below:

> If using the [New VTEX Admin](https://read.calvincode.net/reader?url=https://content.vtex.com/join-new-admin-beta-program-en/), go to _Storefront > Site Editor > Blocks > Affiliate Monitoring_.

![{"base64":"  ","img":{"width":261,"height":280,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":453437,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-6.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-6.png)

## Advanced configurations

You can customize the appearance and content of the affiliate’s page - `{storeName.com}/affiliates/{affiliateSlug}` , as explained in the next sections:

* [Affiliate’s page customization](#affiliates-pages-customization)
* [Props](#props)
* [CSS customization](#css-customization)

### Affiliate’s pages customization

The default implementation of the affiliate’s page is the following:

| Block                      | Route                    |
| -------------------------- | ------------------------ |
| store.affiliates interface | /affiliates/:slug        |
| store.affiliates-profile   | affiliates/:slug/profile |
| store.affiliate-form       | affiliate/form           |

To customize these pages, follow the steps below:

1. Open your store's **Store Theme** app directory in your code editor.
2. Go to `store/blocks`.
3. Create the following files:
   * `affiliates.jsonc`
   * `affiliates-profile.jsonc`
   * `affiliates-form.jsonc`
4. Copy the respective block’s code – you will find them below.
**affiliates.jsonc code**

```

{
"store.affiliates": {
"blocks": ["affiliate-validator"]
},
"affiliate-validator": {
"props": {
"Valid": "affiliate-template",
"Invalid": "affiliate-invalid-template"
}
},
"affiliate-template": {
"children": [
"affiliate-store-name",
"flex-layout.row#banner",
"affiliate-profile-button",
"search-result-layout.customQuery#affiliate"
]
},
"flex-layout.row#banner": {
"children": ["image#affiliate-banner"]
},
"image#affiliate-banner": {
"props": {
"src": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/VTEX_Logo.svg/400px-VTEX_Logo.svg.png"
}
},
"search-result-layout.customQuery#affiliate": {
"props": {
"querySchema": {
"skusFilter": "ALL_AVAILABLE",
"simulationBehavior": "default",
"queryField": "137",
"mapField": "productClusterIds",
"facetsBehavior": "Dynamic"
}
},
"blocks": [
"search-result-layout.desktop",
"search-result-layout.mobile",
"search-not-found-layout"
]
},
"affiliate-invalid-template": {
"children": ["rich-text#invalid-affiliate"]
},
"rich-text#invalid-affiliate": {
"props": {
"textAlignment": "CENTER",
"textPosition": "CENTER",
"text": "Affiliate does not exist or has not been approved",
"font": "t-heading-1"
}
}
}

```

**affiliates-profile.jsonc code**

```

{
"store.affiliates-profile": {
"children": ["affiliate-profile"]
},
"affiliate-profile": {
"children": ["affiliate-profile-topbar", "affiliate-profile-validator"]
},
"affiliate-profile-validator": {
"props": {
"Valid": "flex-layout.row#profile",
"Invalid": "rich-text#profileerror"
}
},
"rich-text#profileerror": {
"props": {
"text": "### Faça o login com a conta correta do afiliado para acessar as informações",
"textAlignment": "CENTER",
"textPosition": "CENTER"
}
},
"flex-layout.row#profile": {
"children": ["flex-layout.col#profile"]
},
"flex-layout.col#profile": {
"children": [
"affiliate-profile-title",
"affiliate-profile-totalizer",
"affiliate-profile-table"
]
}
}

```

**store.affiliate-form.jsonc code**

```

{
"store.affiliate-form": {
"children": ["affiliate-form"]
}
}

```

1. Paste the code in the corresponding file. For example, paste the `store.affiliates` JSON in the `affiliates.jsonc` file.
2. Customize the code as you wish.
3. Repeat steps 4 to 6 for each of the three blocks.
4. Deploy the changes.

### Props

You will have to configure two specific component types with props for them to work correctly.

`affiliate-validator` and `affiliate-profile-validator props`

| Prop name | Type   | Description                                                           | Default value              |
| --------- | ------ | --------------------------------------------------------------------- | -------------------------- |
| valid     | string | Set the block name that will be rendered if the affiliate is valid.   | affiliate-template         |
| invalid   | string | Set the block name that will be rendered if the affiliate is invalid. | affiliate-invalid-template |

`affiliate_url_monitoring` props

| Prop name | Type   | Description                                                                | Default value |
| --------- | ------ | -------------------------------------------------------------------------- | ------------- |
| parameter | string | Parameter name that will be used to validate the URL the affiliate shared. | targeting     |

### CSS customization

If you wish to apply CSS customizations to the Affiliates Program app blocks, check out [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            |
| ---------------------- |
| affiliateStoreName     |
| affiliateProfileTitle  |
| profileButtonContainer |

## Email templates

The Affiliates Program app allows your VTEX store to export spreadsheets with information about the affiliates' orders and commissions. Exported spreadsheets will be sent via email to the VTEX Admin [user](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/managing-users--tutorials%5F512).

For this configuration, you need to create two email templates on the [Message Center](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/understanding-the-message-center--tutorials%5F84):

* Affiliate Orders Export Template
* Commissions By Sku Export Template

To create a new custom email template, follow the steps below:

1. In your VTEX Admin, go to _Customer > Message Center > Templates_.
2. Click on the `New Template` button.
3. Check the `Enable sending emails` flag.
4. Fill in the fields that appear.
> You can use the image below as a reference, but use your information.

![{"base64":"  ","img":{"width":1209,"height":365,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":36721,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-7.jpg"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-7.jpg)

 5\. Copy the **Affiliate Orders Export Template** code - you will find it below. 6\. Paste it in the `Html` section. 7\. Change it as you wish. > You can scroll down the page to check the preview.
1. Click on `Save`.

After creating the _Affiliate Orders Export Template_, repeat the process to create the _Commissions By Sku Export Template_. Use the image below as an example for step 4\. On step 5, copy the **Commissions By Sku Export Template** code, which can be found at the end of this section.

![{"base64":"  ","img":{"width":1203,"height":364,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":39180,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-8.jpg"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/affiliates-program-app-8.jpg)

**Affiliate Orders Export Template**

`1

 <!DOCTYPE html>

2

<html lang="pt-br">

3

4

<head>

5

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

6

 <meta name="viewport" content="initial-scale=1.0">

7

8

 <meta name="format-detection" content="telephone=no">

9

10

 <title>{{_accountInfo.TradingName}}</title>

11

 <style type="text/css">

12

 p {

13

 font-family: Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;

14

 };

15

 .vtex-button {

16

 border-width: .125rem;

17

 border-style: solid;

18

 font-weight: 500;

19

 vertical-align: middle;

20

 padding: 0;

21

 line-height: 1;

22

 border-radius: .25rem;

23

 min-height: 2.5rem;

24

 box-sizing: border-box;

25

 font-family: Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;

26

 font-size: 1rem;

27

 text-transform: uppercase;

28

 letter-spacing: 0;

29

 background-color: #134cd8;

30

 border-color: #134cd8;

31

 color: #fff;

32

 cursor: pointer;

33

 };

34

 </style>

35

</head>

36

37

<body marginwidth="0" marginheight="0" bgcolor="#fff" style="padding:0px 0px;color:#333;" leftmargin="0" topmargin="0">

38

39

 <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" align="left" valign="top">

40

 <tbody>

41

 <tr>

42

 <td align="center" valign="top">

43

 <table width="100%" style="max-width: 36rem;" align="center" cellpadding="0" cellspacing="0"

44

 border="0" valign="top">

45

 <tbody>

46

 <tr>

47

 <td>

48

 <div

49

 style="border:1px solid #e3e4e6;border-radius:8px;margin-top:1rem;margin-bottom:1rem;padding-top:3rem;padding-right:3rem;padding-bottom:3rem;padding-left:3rem">

50

 <img src="https://master--qamarketplace.myvtex.com/_v/public/assets/v1/published/vtex.messages-templates@0.1.12/public/react/cdbfb2a8b730a7ee840752d7af7ddc1c.png"

51

 width="77px" height="28px"

52

 style="display:block;outline:none;border:none;text-decoration:none"

53

 class="CToWUd" />

54

 <p style="font-size:24px;color:#25354d;margin-bottom:32px">

55

 <strong>Planilha de pedidos de afiliados exportada</strong></p>

56

 <p style="font-size:16px;color:#3f3f40;margin-bottom:32px">

57

 Olá,</p>

58

 <p style="font-size:16px;color:#3f3f40">

59

 Segue o link para baixar a planilha pedidos de afiliados.

60

 </p>

61

 <div style="margin-bottom: 24px">

62

 <a href="{{link}}" download>

63

 <button

64

 style="border-width: .125rem; border-style: solid; font-weight: 500; vertical-align: middle; padding: 0; line-height: 1; border-radius: .25rem; min-height: 2.5rem; box-sizing: border-box; font-family: Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; font-size: 1rem; text-transform: uppercase; letter-spacing: 0; background-color: #134cd8; border-color: #134cd8; color: #fff; cursor: pointer;"

65

 type="button">

66

 <div style="display: flex; align-items: center; justify-content: center; height: 100%; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem;">

67

 Baixar Planilha

68

 </div>

69

 </button>

70

 </a>

71

 </div>

72

 <p style="margin-bottom:4px;font-size:16px;color:#3f3f40">

73

 Abraços,</p>

74

 <p style="margin-top:0px;font-size:16px;color:#3f3f40">

75

 VTEX</p><br />

76

 <p style="font-size:12px;color:#727273;margin-bottom:0px">

77

 O link para download é válido por 24 horas. Após esse tempo, será necessário realizar a exportação novamente.

78

 </p>

79

 <div

80

 style="color:#e3e4e6;border-top:1px solid #e3e4e6;border-bottom:0px solid #e3e4e6;margin-bottom:2rem;margin-top:1rem">

81

 </div>

82

 <p style="font-size:12px;color:#727273;margin-bottom:0px">

83

 Esse email é enviado automaticamente e não recebe respostas.

84

 </p>

85

 <p style="font-size:12px;color:#727273;margin-top:.25rem;margin-bottom:0px">

86

 Precisa de ajuda? <a href="https://help.vtex.com/?locale=pt" alt="VTEX Help"

87

 style="font-weight:bold;color:#3F3F40">Fale Conosco</a>

88

 </p><br />

89

 <p style="font-size:12px;color:#727273;margin-bottom:0px">

90

 © VTEX Praia de Botafogo, 300, 3º Andar, Botafogo, Rio de Janeiro, RJ,

91

 22250-040

92

 </p>

93

 </div>

94

 </td>

95

 </tr>

96

 </tbody>

97

 </table>

98

 </td>

99

 </tr>

100

 </tbody>

101

 </table>

102

103

104

</body>

105

</html>

`

**Commissions By Sku Export Template**

`1

<!DOCTYPE html>

2

<html lang="pt-br">

3

4

<head>

5

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

6

 <meta name="viewport" content="initial-scale=1.0">

7

8

 <meta name="format-detection" content="telephone=no">

9

10

 <title>{{_accountInfo.TradingName}}</title>

11

 <style type="text/css">

12

 p {

13

 font-family: Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;

14

 };

15

 .vtex-button {

16

 border-width: .125rem;

17

 border-style: solid;

18

 font-weight: 500;

19

 vertical-align: middle;

20

 padding: 0;

21

 line-height: 1;

22

 border-radius: .25rem;

23

 min-height: 2.5rem;

24

 box-sizing: border-box;

25

 font-family: Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;

26

 font-size: 1rem;

27

 text-transform: uppercase;

28

 letter-spacing: 0;

29

 background-color: #134cd8;

30

 border-color: #134cd8;

31

 color: #fff;

32

 cursor: pointer;

33

 };

34

 </style>

35

</head>

36

37

<body marginwidth="0" marginheight="0" bgcolor="#fff" style="padding:0px 0px;color:#333;" leftmargin="0" topmargin="0">

38

39

 <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" align="left" valign="top">

40

 <tbody>

41

 <tr>

42

 <td align="center" valign="top">

43

 <table width="100%" style="max-width: 36rem;" align="center" cellpadding="0" cellspacing="0"

44

 border="0" valign="top">

45

 <tbody>

46

 <tr>

47

 <td>

48

 <div

49

 style="border:1px solid #e3e4e6;border-radius:8px;margin-top:1rem;margin-bottom:1rem;padding-top:3rem;padding-right:3rem;padding-bottom:3rem;padding-left:3rem">

50

 <img src="https://master--qamarketplace.myvtex.com/_v/public/assets/v1/published/vtex.messages-templates@0.1.12/public/react/cdbfb2a8b730a7ee840752d7af7ddc1c.png"

51

 width="77px" height="28px"

52

 style="display:block;outline:none;border:none;text-decoration:none"

53

 class="CToWUd" />

54

 <p style="font-size:24px;color:#25354d;margin-bottom:32px">

55

 <strong>Planilha de comissionamento por SKU exportada</strong></p>

56

 <p style="font-size:16px;color:#3f3f40;margin-bottom:32px">

57

 Olá,</p>

58

 <p style="font-size:16px;color:#3f3f40">

59

 Segue o link para baixar a planilha de comissionamento por SKU.

60

 </p>

61

 <div style="margin-bottom: 24px">

62

 <a href="{{link}}" download>

63

 <button

64

 style="border-width: .125rem; border-style: solid; font-weight: 500; vertical-align: middle; padding: 0; line-height: 1; border-radius: .25rem; min-height: 2.5rem; box-sizing: border-box; font-family: Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; font-size: 1rem; text-transform: uppercase; letter-spacing: 0; background-color: #134cd8; border-color: #134cd8; color: #fff; cursor: pointer;"

65

 type="button">

66

 <div style="display: flex; align-items: center; justify-content: center; height: 100%; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem;">

67

 Baixar Planilha

68

 </div>

69

 </button>

70

 </a>

71

 </div>

72

 <p style="margin-bottom:4px;font-size:16px;color:#3f3f40">

73

 Abraços,</p>

74

 <p style="margin-top:0px;font-size:16px;color:#3f3f40">

75

 VTEX</p><br />

76

 <p style="font-size:12px;color:#727273;margin-bottom:0px">

77

 O link para download é válido por 24 horas. Após esse tempo, será necessário realizar a exportação novamente.

78

 </p>

79

 <div

80

 style="color:#e3e4e6;border-top:1px solid #e3e4e6;border-bottom:0px solid #e3e4e6;margin-bottom:2rem;margin-top:1rem">

81

 </div>

82

 <p style="font-size:12px;color:#727273;margin-bottom:0px">

83

 Esse email é enviado automaticamente e não recebe respostas.

84

 </p>

85

 <p style="font-size:12px;color:#727273;margin-top:.25rem;margin-bottom:0px">

86

 Precisa de ajuda? <a href="https://help.vtex.com/?locale=pt" alt="VTEX Help"

87

 style="font-weight:bold;color:#3F3F40">Fale Conosco</a>

88

 </p><br />

89

 <p style="font-size:12px;color:#727273;margin-bottom:0px">

90

 © VTEX Praia de Botafogo, 300, 3º Andar, Botafogo, Rio de Janeiro, RJ,

91

 22250-040

92

 </p>

93

 </div>

94

 </td>

95

 </tr>

96

 </tbody>

97

 </table>

98

 </td>

99

 </tr>

100

 </tbody>

101

 </table>

102

103

104

</body>

105

106

</html>

`

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/functional-apps/affiliates-program-app.md)

[Assembly Options« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app//docs/guides/assembly-options-app)[Layout AppsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app//docs/guides/layout-apps)

Contributors

1

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

ON THIS PAGE

[Compatibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23compatibility)

[Installation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23installation)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23configuration)

[Set up the Affiliates Program app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23set-up-the-affiliates-program-app)[Set up a shareable URL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23set-up-a-shareable-url)

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

[Affiliate’s pages customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23affiliates-pages-customization)[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23props)[CSS customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23css-customization)

[Email templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23email-templates)

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/Store-Framework-Apps/functional-apps/affiliates-program-app.md)

Copy page

On this page

ON THIS PAGE

[Compatibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23compatibility)

[Installation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23installation)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23configuration)

[Set up the Affiliates Program app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23set-up-the-affiliates-program-app)[Set up a shareable URL](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23set-up-a-shareable-url)

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

[Affiliate’s pages customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23affiliates-pages-customization)[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23props)[CSS customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23css-customization)

[Email templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/affiliates-program-app/docs/guides/affiliates-program-app%23email-templates)

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 erp integration set up order processing 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/erp-integration-set-up-order-processing/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/getting-started)

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-guide)

[Set up catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-catalog)

[Import prices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-import-prices)

[Import inventory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-import-inventory)

[Import customer data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/import-customer-data)

[Set up order integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-integration)

[Import products](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-import-products)

[Set up order processing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing)

[Update or delete information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-updating-and-deleting-information)

[FAQ: ERP Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/faq-erp-integration)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/recaptcha)

---

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

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/checkout-api-overview)

---

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

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/getting-started)

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-guide)

[Set up catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-catalog)

[Import prices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-import-prices)

[Import inventory](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-import-inventory)

[Import customer data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/import-customer-data)

[Set up order integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-integration)

[Import products](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-import-products)

[Set up order processing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing)

[Update or delete information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-updating-and-deleting-information)

[FAQ: ERP Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/faq-erp-integration)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/recaptcha)

---

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

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/checkout-api-overview)

---

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

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides)

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-guide)

[Set up order processing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing)

Set up order processing

In this step, you will send order updates from your ERP or WMS to VTEX.

## Before you begin

When an order is processed in an external fulfillment platform such as an ERP or WMS, it's not enough to set up order integration. VTEX should also receive order updates when applicable.

During handling an order can be [changed](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/change-making-changes-to-an-order--3d1XLIgPQcwaKGyMiWaYog?locale=en), [cancelled](https://read.calvincode.net/reader?url=https://help.vtex.com/tracks/orders--2xkTisx4SXOWXQel8Jg8sa/4ts2ItvjYo8wm5gg76miS3) or [invoiced](https://read.calvincode.net/reader?url=https://help.vtex.com/tracks/orders--2xkTisx4SXOWXQel8Jg8sa/2WgQrlHTyVo4hLjhUs1LMT). These events should be notified as illustrated in the diagram below.

![{"base64":"  ","img":{"width":477,"height":745,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":54842,"url":"https://user-images.githubusercontent.com/77292838/212996730-82bcc38a-58b3-4f03-b91f-f17e1f2e107c.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/212996730-82bcc38a-58b3-4f03-b91f-f17e1f2e107c.png)

If your freight carrier is integrated with VTEX, all you need to do is inform its identifier and tracking number when invoicing the order and order tracking information will be set up. Otherwise you should add the order tracking updates you want customers to see separately, as seen in the diagram below.

![{"base64":"  ","img":{"width":383,"height":416,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":36461,"url":"https://user-images.githubusercontent.com/77292838/212996800-e7bb2549-175a-4598-b3b3-56c406ae1f21.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/77292838/212996800-e7bb2549-175a-4598-b3b3-56c406ae1f21.png)

## Change order

Changing items is a feature that allows your store to modify the items or prices of an order. With this feature, the store can handle eventual changes in orders motivated by customer mistakes, product unavailability, and the inclusion of discounts, among other things. Learn more about how it works and its restrictions in the article [Changing items from a completed order](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/changing-items-from-a-complete-order--tutorials%5F190%23).

Check this [Change order guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-order) to learn how you can implement this feature to your integration.

## Change seller

If your store is a marketplace, your integration must also be prepared to change which seller is assigned to fulfill a given order. Learn more about the circumstances and limitations of this type of process in the article [How to use the Change Seller feature](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-to-use-the-change-seller-feature--5TBAwO2kOAMw44uyaaQMQO%23).

To learn how to implement this in your integration, check the [Change seller integration guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/change-seller).

## Cancel order

The [Cancel order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api%23post-/api/oms/pvt/orders/-orderId-/cancel) endpoint in the Orders API allows you to cancel an order. Optionally, you can add more information by creating a note in the order timeline using the [Create note](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/vtex-do-api%23post-/notes) endpoint in the VTEX DO API.

The order cancellation can be confirmed through the orders feed.

> Keep in mind that the OMS [order flow](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/order-flow-on-the-oms--tutorials%5F196) does not allow an order to be cancelled after it has been invoiced and that order cancellations cannot be reversed.

## Invoice order

The [Order Invoice Notification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api%23post-/api/oms/pvt/orders/-orderId-/invoice) endpoint in the Orders API allows you to notify VTEX that you are ready to ship the order and add invoice information to the order.

> Note that invoice information includes tracking number and URL. However this is not required to send the invoice to VTEX. It may be added later.

## Order tracking

Order tracking information is directly related to an order's invoice. An order's tracking number and URL may be sent to VTEX when [first invoicing an order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api%23post-/api/oms/pvt/orders/-orderId-/invoice), or later, with the [Update order's partial invoice API request](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api%23patch-/api/oms/pvt/orders/-orderId-/invoice/-invoiceNumber-).

### Tracking messages

Once an order was invoiced and has their tracking number and URL, if the designated carrier is integrated with VTEX, VTEX can log tracking messages and send them to your customers. If your freight carrier is not integrated with VTEX, you should add the tracking messages using the [Update order tracking status](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api%23put-/api/oms/pvt/orders/-orderId-/invoice/-invoiceNumber-/tracking) endpoint of the Orders API.

## Wrapping up

If you have done things correctly, you should have set up order processing. This includes sending notifications to VTEX when orders are changed, cancelled or invoiced, as well as when tracking updates are available from non-integrated freight carriers.

Contributors

2

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

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Integration-Guides/erp-integration-guide/erp-integration-set-up-order-processing.md)

[Import products« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing//docs/guides/erp-integration-import-products)[Update or delete informationNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing//docs/guides/erp-integration-updating-and-deleting-information)

Contributors

2

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

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23before-you-begin)

[Change order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23change-order)

[Change seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23change-seller)

[Cancel order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23cancel-order)

[Invoice order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23invoice-order)

[Order tracking](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23order-tracking)

[Tracking messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23tracking-messages)

[Wrapping up](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23wrapping-up)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Integration-Guides/erp-integration-guide/erp-integration-set-up-order-processing.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23before-you-begin)

[Change order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23change-order)

[Change seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23change-seller)

[Cancel order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23cancel-order)

[Invoice order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23invoice-order)

[Order tracking](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23order-tracking)

[Tracking messages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23tracking-messages)

[Wrapping up](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/erp-integration-set-up-order-processing/docs/guides/erp-integration-set-up-order-processing%23wrapping-up)

On this page

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


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

[User] Provide a guide on guides vtex io documentation 1 developnativeintegrationswithpixelapps in VTEX.

[Assistant]
Documentation

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

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

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/api-reference)

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

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/storefront-development)

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

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/troubleshooting)

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

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/code-samples)

---

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

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

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

[What is a Pixel app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-pixel-app)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-2-basicsetuptodevelopinvtexio)

[2\. Cloning the boilerplate repository](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-3-cloningtheboilerplaterepository)

[3\. Configuring your app settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-4-configuringyourappsettings)

[4\. Writing the head and body scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-5-writingtheheaderandbodyscripts)

[5\. Listening to store events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-6-listeningtostoreevents)

[6\. Structuring the documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-7-structuringthedocumentation)

[7\. Making your Pixel app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-8-makingyourpixelapppubliclyavailable)

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

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/app-development-guides)

---

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

---

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

---

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

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-app-store)

---

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

---

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

---

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

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

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

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

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

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

---

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

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/code-samples)

---

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

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

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

[What is a Pixel app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-pixel-app)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-2-basicsetuptodevelopinvtexio)

[2\. Cloning the boilerplate repository](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-3-cloningtheboilerplaterepository)

[3\. Configuring your app settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-4-configuringyourappsettings)

[4\. Writing the head and body scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-5-writingtheheaderandbodyscripts)

[5\. Listening to store events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-6-listeningtostoreevents)

[6\. Structuring the documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-7-structuringthedocumentation)

[7\. Making your Pixel app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-8-makingyourpixelapppubliclyavailable)

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

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/app-development-guides)

---

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

---

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

---

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

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-app-store)

---

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

---

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

---

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

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

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

Pixel apps

In this tutorial, you'll learn how to create a custom integration with a third-party solution by developing your own [**Pixel app**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-pixel-app).

Pixel apps are responsible for running scripts on all pages of a store website. You can use them to load JavaScript resources into your web pages and extend the core functionalities of your website.

* [Part 1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-2-basicsetuptodevelopinvtexio)
* [Part 2\. Cloning the boilerplate repository](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-cloningtheboilerplaterepository)
* [Part 3\. Configuring your app settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-configuringyourappsettings)
* [Part 4\. Writing the header and body scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-writingtheheaderandbodyscripts)
* [Part 5\. Listening to store events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents)
* [Part 6\. Structuring documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-structuringthedocumentation)
* [Part 7\. Making your Pixel app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-makingyourpixelapppubliclyavailable)

## Before you begin

Before taking this tutorial, check our [list of Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/) and make sure the integration you're looking for is not already available.

Also, if you're wondering whether to **create a Pixel app** or **customize an HTML tag with Google Tag Manager**, keep in mind that the first option is always the most recommended. Creating a new app allows for more freedom during development and may also help other users interested in the same solution.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/vtex-io-documentation-1-developnativeintegrationswithpixelapps.md)

[Best practices« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps//docs/guides/vtex-io-documentation-developing-custom-storefront-components)[What is a Pixel appNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps//docs/guides/vtex-io-documentation-pixel-app)

See also

[1\. Setting up your development environmentApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-2-basicsetuptodevelopinvtexio)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps%23before-you-begin)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/vtex-io-documentation-1-developnativeintegrationswithpixelapps.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps%23before-you-begin)

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