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

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

[Assistant]
Documentation

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

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

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

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

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

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

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

[Disclosure Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.disclosure-layout)

[Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.flex-layout)

[Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.modal-layout)

[Overlay Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.overlay-layout)

[Responsive Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.responsive-layout)

[Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.slider-layout)

[Stack Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.stack-layout)

[Sticky Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.sticky-layout)

[Tab Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.tab-layout)

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

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

[Disclosure Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.disclosure-layout)

[Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.flex-layout)

[Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.modal-layout)

[Overlay Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.overlay-layout)

[Responsive Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.responsive-layout)

[Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.slider-layout)

[Stack Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.stack-layout)

[Sticky Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.sticky-layout)

[Tab Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.tab-layout)

---

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

---

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

---

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

---

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

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

Condition Layout

Official extension

Version: 2.8.2

Latest version: 2.8.2

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

The Condition Layout app renders a component in your store when predefined conditions are met.

![{"base64":"  ","img":{"width":742,"height":1504,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":871202,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-condition-layout-0.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-condition-layout-0.gif)

## Configuration

### Step 1 - Adding the Condition Layout app to your theme dependencies

In the `manifest.json` file of your theme, add the Condition Layout app as a dependency:

`1

 "dependencies": {

2

+ "vtex.condition-layout": "2.x"

3

 }

`

You can now use all blocks exported by the `condition-layout` app. See the full list below:

| Block name                     | Description                                                                                |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| condition-layout.product       | Defines the condition logic in the product context and the children blocks that will be rendered when the predefined conditions are met.                     |
| condition-layout.binding       | Defines the condition logic in the current binding and the children blocks that will be rendered when the predefined conditions are met.                     |
| condition-layout.category      | Defines the condition logic on the current category or department page and the children blocks that will be rendered when the predefined conditions are met. |
| condition-layout.telemarketing | Defines the condition logic in the user role (telemarketing) and the children blocks that will be rendered when the predefined conditions are met.           |

### Step 2 - Adding the `condition-layout.product` block to your theme templates

In the product theme template, add the `condition-layout.product` block as a child. For example:

`1

{

2

 "store.product": {

3

 "children": ["condition-layout.product"]

4

 },

`

Or the `condition-layout.binding` block. For example:

`1

{

2

 "store.product": {

3

 "children": ["condition-layout.binding"]

4

 }

5

}

`

Or the `condition-layout.category` block. For example:

`1

{

2

 "store.search#my-category-page": {

3

 "children": ["condition-layout.category"]

4

 }

5

}

`

> Never use `condition-layout` directly. Always use it with a context variant, such as `condition-layout.product`.

### Step 3 - Defining the desired conditions

Now it is time to configure the `condition-layout.product` block!

**Use the block props to define your layout condition**. You can also declare blocks of your choice as children of `condition-layout.product`. These children blocks will be rendered if the condition is met.

For example:

`1

{

2

 "store.product": {

3

 "children": ["condition-layout.product#cond1"]

4

 },

5

 "condition-layout.product#cond1": {

6

+ "props": {

7

+ "conditions": [

8

+ {

9

+ "subject": "productId",

10

+ "arguments": {

11

+ "id": "12"

12

+ }

13

+ }

14

+ ]

15

+ "Then": "flex-layout.row#custom-pdp-layout-12",

16

+ "Else": "flex-layout.row#default"

17

+ }

18

+ }

`

Or for `condition-layout.binding`:

`1

{

2

 "store.product": {

3

 "children": ["condition-layout.binding#cond42"]

4

 },

5

 "condition-layout.binding#cond42": {

6

+ "props": {

7

+ "conditions": [

8

+ {

9

+ "subject": "bindingId",

10

+ "arguments": {

11

+ "id": "13fb71d0-binding-code-here-87h9c28h9013"

12

+ }

13

+ }

14

+ ]

15

+ "Then": "flex-layout.row#just-for-this-binding",

16

+ "Else": "flex-layout.row#for-other-bindings"

17

+ }

18

+ }

`

Or for `condition-layout.category`:

`1

{

2

 "store.product": {

3

 "children": ["condition-layout.category#cond42"]

4

 },

5

 "condition-layout.category#cond42": {

6

+ "props": {

7

+ "conditions": [

8

+ {

9

+ "subject": "department",

10

+ "arguments": {

11

+ "ids": ["1", "42"]

12

+ }

13

+ }

14

+ {

15

+ "subject": "category",

16

+ "arguments": {

17

+ "ids": ["301", "304"]

18

+ }

19

+ }

20

+ ]

21

+ "matchType": "any",

22

+ "Then": "flex-layout.row#just-for-this-category-or-department",

23

+ "Else": "flex-layout.row#for-other-category-or-department"

24

+ }

25

+ }

`

Or for `condition-layout.telemarketing`:

`1

{

2

 "store.product": {

3

 "children": ["condition-layout.telemarketing#show-block"]

4

 },

5

 "condition-layout.telemarketing#show-block": {

6

+ "props": {

7

+ "conditions": [

8

+ {

9

+ "subject": "impersonable",

10

+ "arguments": {

11

+ "value": true

12

+ }

13

+ }

14

+ ]

15

+ "Then": "flex-layout.row#just-for-telemarketers",

16

+ "Else": "flex-layout.row#for-other-user-roles"

17

+ }

18

+ }

`

> In the example above, whenever users interact with a product whose ID is equal to 12, the `flex-layout.row#custom-pdp-layout-12` block is rendered. If users interact with a product whose ID is not equal to 12, the rendered block is `flex-layout.row#default`.

| Prop name  | Type   | Description                                                                                | Default value |
| ---------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| conditions | object | List of desired conditions.                                                                                | undefined     |
| matchType  | enum   | Layout rendering criteria. Possible values are: all (all conditions must be met to render the layout), any (at least one of the conditions must be met to render the layout), or none (no conditions must be met to render the layout). | all           |
| Then       | block  | Name of the block to be rendered if the conditions are met. If no value is defined, the blocks declared as children of condition-layout.product will be rendered instead.                                                               | undefined     |
| Else       | block  | Name of the block to be rendered if the conditions are not met.                                                                                | undefined     |

* **`conditions` object:**

| Prop name | Type    | Description                                                                                | Default value |
| --------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| subject   | string  | Defines, based on the product context where the block is declared, which information is needed from the UI to validate the value chosen in the object prop. See below the possible values for this prop.                   | undefined     |
| arguments | object  | Defines the condition parameters. Note that the value of this prop varies depending on the value set for the subject prop. See below the table with the possible values for the subject prop and their expected arguments. | undefined     |
| toBe      | boolean | Determines whether the data fetched in the subject prop must meet the predefined conditions to render the new layout (true) or not (false).                                                                                | true          |

Possible values for `subject` prop of the `condition-layout.product` block:

| Subject                  | Description                                                                                | Arguments                                                                                |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
| productId                | Product IDs currently displayed on the UI.                                                                               | { id: string }                                                                                |
| categoryId               | Category IDs currently displayed on the UI.                                                                              | { id: string }                                                                                |
| brandId                  | Brand IDs currently displayed on the UI.                                                                                | { id: string }                                                                                |
| selectedItemId           | ID of the item currently selected by the user.                                                                           | { id: string }                                                                                |
| productClusters          | List of product clusters currently displayed on the UI.                                                                  | { id: string }                                                                                |
| categoryTree             | List of categories currently displayed on the UI. **Note:** Only available on the Product Detail Page.                   | { id: string }                                                                                |
| specificationProperties  | List of product specifications currently displayed on the UI.                                                            | { name: string, value: string }. Note: value is an optional prop. If omitted, only the specification name (name) will be checked. |
| areAllVariationsSelected | Determines whether all product variations currently available on the UI were selected by the user (true) or not (false). | No arguments are expected.                                                                                |
| isProductAvailable       | Determines whether the product is available (true) or not (false).                                                       | No arguments are expected.                                                                                |
| hasMoreSellersThan       | Determines whether the number of sellers for a product is greater than the argument passed.                              | { quantity: number }                                                                                |
| hasBestPrice             | Whether the product is being given a discount on its list price.                                                         | { value: boolean } or no arguments.                                                                                |
| sellerId                 | Whether any of the sellers of the product are included in the list of IDs passed.                                        | { ids: string\[\] }                                                                                |

Possible values for the `subject` prop of the `condition-layout.binding` block:

| Subject   | Description                      | Arguments      |
| --------- | -------------------------------- | -------------- |
| bindingId | ID of the desired store binding. | { id: string } |

Possible values for the `subject` prop of the `condition-layout.category` block:

| Subject    | Description                                   | Arguments           |
| ---------- | --------------------------------------------- | ------------------- |
| category   | Category IDs currently displayed on the UI.   | { ids: string\[\] } |
| department | Department IDs currently displayed on the UI. | { ids: string\[\] } |

Possible values for the `subject` prop of the `condition-layout.telemarketing` block:

| Subject      | Description                         | Arguments          |
| ------------ | ----------------------------------- | ------------------ |
| impersonable | Value of the impersonation setting. | { value: boolean } |

## App behavior

The `condition-layout.product` block mainly uses the `matchType` and `conditions` props to respectively set the criteria and the conditions that blocks must meet to be rendered.

The `conditions` prop does not rely on any automatic grammar to define the desired conditions. Instead, it relies on its two props, namely `subject` and `arguments`, which together define which condition must be met by using an underlying data validation method (with specific arguments) based on the UI behavior.

Lastly, the `matchType` prop decides the necessary number of valid conditions for the layout rendering.

## Customization

The Condition Layout merely establishes a logic to render other blocks. Therefore, the app does not have its own CSS handles for customization.

Instead, you should use the handles of the child blocks.

[Layout Apps« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/guides/layout-apps)[Disclosure LayoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.disclosure-layout)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)[V1 DOCVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.condition-layout@2.8.2/v1-DOC)[MIGRATION GUIDEVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.condition-layout@2.8.2/MIGRATION-GUIDE)

ON THIS PAGE

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

[Step 1 - Adding the Condition Layout app to your theme dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.condition-layout%23step-1-adding-the-condition-layout-app-to-your-theme-dependencies)[Step 2 - Adding the condition-layout.product block to your theme templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.condition-layout%23step-2-adding-the-condition-layoutproduct-block-to-your-theme-templates)[Step 3 - Defining the desired conditions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.condition-layout%23step-3-defining-the-desired-conditions)

[App behavior](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.condition-layout/docs/apps/vtex.condition-layout%23app-behavior)

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

Was this helpful?

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


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

[User] Provide a guide on guides vtex product summary productsummarybuybutton 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-product-summary-productsummarybuybutton/docs/guides)

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

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

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

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

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

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

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

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

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

---

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

Product Summary Buy Button

Product Summary Buy Button is the block exported by the [Product Summary app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary) responsible for rendering a Buy Button in the [Product Summary Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryshelf) block.

![{"base64":"  ","img":{"width":2852,"height":1550,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":667606,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummarybuybutton-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummarybuybutton-0.png)

> **The Product Summary Buy Button only effectively adds products to the Minicart if the store still uses the [Minicart v1](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/minicart/blob/383d7bbd3295f06d1b5854a0add561a872e1515c/docs/README.md)**. If the store uses the [Minicart v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-minicart/), please configure the [Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-add-to-cart-button/) in the `product-summary.shelf` block instead.

## Configuration

1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:

`1

 dependencies: {

2

 "vtex.product-summary": "2.x"

3

 }

`

1. Add the `product-summary-buy-button` block as a children of the `product-summary.shelf` block:

`1

 {

2

 "product-summary.shelf": {

3

 "children": [

4

 "product-summary-image",

5

 "product-summary-name",

6

 "product-rating-inline",

7

 "product-summary-space",

8

 "product-summary-price",

9

+ "product-summary-buy-button"

10

 ]

11

 },

12

 }

`

1. Then, declare the `product-summary-buy-button` and configure its behavior using the props stated below.

`1

{

2

 "product-summary-buy-button": {

3

 "props": {

4

 "isOneClickBuy": false

5

 }

6

 }

7

}

`

### Props

| Prop name         | Type    | Description                                                                                | Default value       |
| ----------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| isOneClickBuy     | boolean | Whether the user should be redirected to Checkout after clicking on the Buy Button (true) or not (false).                                                                                | false               |
| buyButtonText     | string  | Custom text that overwrites the default Buy Button text.                                                                                | undefined           |
| displayBuyButton  | enum    | Sets the Buy Button display mode. Possivle values are: displayButtonAlways (it will always be displayed), displayButtonHover (only displayed on hover), or displayButtonNone (it will be hidden for users).                                                                                | displayButtonAlways |
| customToastURL    | string  | Defines a redirect link to the Toast displayed when an item is added to your cart.                                                                                | /checkout/#/cart    |
| buyButtonBehavior | enum    | Sets the Buy Button behavior when it is clicked on. Possible values are: alwaysGoToProduct (redirect users to the product page), default (redirect users to the minicart), or alwaysAddToTheCart (add the selected SKU to the minicart). When choosing this last option, be careful: use it only if there are SKU Selectors for each product variation. This way, users can properly select their desired SKU. | default             |

## Customization

To apply CSS customizations in this and other blocks, follow the [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) guide.

| CSS Handles        |
| ------------------ |
| buyButtonContainer |
| buyButton          |
| isHidden           |

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarybuybutton/_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/basic-components/vtex-product-summary-productsummarybuybutton.md)

Contributors

1

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

ON THIS PAGE

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

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

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarybuybutton/docs/guides/vtex-product-summary-productsummarybuybutton%23customization)

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/basic-components/vtex-product-summary-productsummarybuybutton.md)

Copy page

On this page

ON THIS PAGE

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

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

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummarybuybutton/docs/guides/vtex-product-summary-productsummarybuybutton%23customization)

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 running native ab testing 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-running-native-ab-testing/docs/guides)

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

App Development

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

---

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

---

Project structure

---

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

---

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

---

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

---

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

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

[A/B testing Legacy and IO store versions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io)

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

App Development

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

---

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

---

Project structure

---

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

---

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

---

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

---

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

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

[A/B testing Legacy and IO store versions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io)

---

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

---

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

---

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

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

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

Running A/B tests

In this guide, you will learn how to manage an A/B test, covering steps from running the test to providing the results.

A/B testing involves comparing traffic between two store workspaces and helps you determine which performs better regarding user engagement and conversions. To run an A/B test, you can use the [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference) or the [A/B Tester](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-abtester) app.

> A/B tests have a maximum duration of 30 days from their start date. After this period, tests may end automatically without notice.

## Before you begin

Make sure you have [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference) installed on your machine.

## Running A/B tests via Admin

The A/B Tester app allows you to run A/B tests via the Admin. To use the app, follow these steps:

1. Open the terminal and log in to the desired account.
`1
vtex login {accountName}
`
> Replace the values between curly brackets based on your account name.
2. Install the A/B Tester app in the `master` workspace by running:
`1
vtex use master
2
vtex install vtex.ab-tester
`
3. Type `y` to confirm that you want to install the app in the `master` workspace.
4. Install the **A/B Tester app** in the `master` workspace by running the following:
`1
vtex install vtexarg.abtester
`
5. Type `y` to confirm the installation.
6. Now, in the VTEX Admin, go to **Extensions Hub > Installed Apps > AB Tester**.
7. See the [A/B Tester Admin app documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtexarg-abtester%23usage) to create A/B tests, compare and conclude tests.

## Running A/B tests via VTEX IO CLI

### Step 1 - Enabling A/B testing

1. Open the terminal and log in to the desired account. _Remember to replace the values between curly brackets based on your account name._
`1
vtex login {accountName}
`
> Replace the values between curly brackets based on your account name.
2. [Create and switch to a Production workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-production-workspace) by running the following command:
`1
vtex use {workspaceName} --production
`
3. Perform the changes you want to test in the production workspace you are using, such as installing or editing an app.
> If your store uses the [Checkout UI Custom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-custom-v0) app, you must first publish its configurations on your new production workspace. Otherwise, you might experience undesired consequences, such as losing the Checkout custom JavaScript code and styles.
4. Switch to the `master` workspace.
`1
vtex use master
`
5. Install the VTEX A/B tester app in the `master` workspace to enable A/B testing on your store website by running:
`1
vtex install vtex.ab-tester
`
> You can run `vtex ls` to ensure you have successfully installed `vtex.ab-tester` in the `master` workspace.
6. Run the following command in the `master` workspace.
`1
vtex workspace abtest start
`
![{"base64":"  ","img":{"width":2002,"height":524,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":97092,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/abtest-start___5c87b822a4829a1b74a8318510b00c4e.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/abtest-start___5c87b822a4829a1b74a8318510b00c4e.png)
7. Select the production workspace you want to use for comparison with the `master` and agree to proceed.

### Step 2 - Configuring the traffic and time

By agreeing to proceed with the test, you need to answer the following two questions:

1. `What's the proportion of traffic initially directed to the master workspace?`

You must answer this question with any whole number between 0 and 10000\. For example, if you answer `9000`, you will set 90% of the traffic to the `master` workspace.

> To promote the changes from your production workspace in the safest way possible, we strongly recommend leaving 90% of traffic dedicated to the `master` and the other 10% to the production workspace being tested.

1. `What's the amount of time respecting the restriction?`

This is the time (in hours) when the traffic proportion stated in the previous question remains constant. After this period, the A/B testing system automatically balances the traffic proportions, sending more traffic to the best-performing workspace. There are two possible answers to this question:

| Option                                                                                | Description                                                                                |
| ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Answer 0 to automatically proceed with the A/B test.**                                                      | In this case, VTEX IO will automatically split your website traffic between workspaces, routing 50% of your store traffic to the master and the other 50% to the production workspace being tested.Following that, the platform will automatically balance traffic every three minutes based on the conversion rates. This means that traffic will be gradually routed from the workspace with the lowest conversion rate to the workspace with the highest conversion rate.**The test doesn't conclude independently.** **Evaluate the test results daily.** |
| **Answer with the number of hours you want to keep constant the proportion of traffic previously specified.** | During peak operational periods, it's critical for the test to extract as much data as possible. At the same time, the test shouldn't overextend and end up harming users navigating the workspace with the poorest performance.                                                                                |

You can run many A/B tests simultaneously by comparing two or more workspaces to the `master` individually. However, if you set up the traffic manually, the A/B test will distribute the traffic evenly among all production workspaces being A/B tested. For example, suppose you started an A/B test between workspace A and `master`, routing 90% of traffic to the former and 10% to the latter. If you run a new A/B test between workspace B and the `master`, each production workspace, A and B, will only receive 5% of the store traffic.

> When a user session begins, their assigned workspace is determined by a cookie that lasts for 24 hours. During this period, the user will remain in the same workspace, regardless of traffic redistribution. After 24 hours, when a new session starts, the user may be randomly assigned to either workspace, which could be the same as before or a different one.

### Step 3 - Interpreting the test results

Any time during the A/B test, you can monitor the live results by executing the following command:

`1

vtex workspace abtest status

`

![{"base64":"  ","img":{"width":2002,"height":1232,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":235602,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/abtest-status___8ae7f35a70f9979b7294a5ba8b007c42.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/abtest-status___8ae7f35a70f9979b7294a5ba8b007c42.png)

You can update the workspaces used in the A/B test if necessary. However, fewer changes to these workspaces will lead to more accurate results.

Before concluding your A/B test, it's essential to understand the comparative and final results of the two workspaces. The following presents the metrics available for both results:

#### Comparative results

| Metric                          | Description                                                                                |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Conversion**                  | Conversion rate percentage displayed by each workspace during the test.                                                                                |
| **Expected Loss**               | Anticipated percentage of conversion loss for the store if the lower conversion rate workspace is selected as the winner (based on **Conversion** results).                |
| **N. of Sessions**              | Total number of sessions for each workspace since the beginning of the test.                                                                                |
| **N. of Sessions (last 24hrs)** | Number of sessions for each workspace during the test in the past 24 hours.                                                                                |
| **Revenue**                     | Total revenue placed by users navigating the store version associated with each workspace since the beginning of the test (expressed in the store's native currency).      |
| **Revenue (last 24 hs)**        | Total revenue placed by users navigating the store version associated with each workspace in the past 24 hours during the test (expressed in the store's native currency). |

#### Final results

| **Metric**                | **Description**                                                                                |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Start Date**            | Date and time for the test to start.                                                                                |
| **Running Time**          | Test duration.                                                                                |
| **Probability B beats A** | Probability, in percentage points, that the production workspace is better for your store than the current master workspace. This calculation is based on session and completed sales counts. If this metric is greater than 10%, the production workspace can become the winner. |
| **Winner**                | Workspace you selected as the winner.                                                                                |

> The main results of the A/B test are aimed at scenarios where the platform automatically directs store traffic. Although A/B testing can and should be used even in cases where traffic is directed manually, the numbers behind each result reflect an automatic segmentation depending on each workspace experience.

#### Validating the winner workspace

The best way to validate your A/B test workspace winner is to set a maximum conversion loss value based on the size of your store operation.

For example, when starting your test, you can set a maximum conversion loss of `0,0001%`. Then, when either workspace achieves an `Expect Loss` result greater than `0,0001%`, you should end the test and declare a winner.

### Step 4 - Finishing the A/B test

If your test has already reached the time frame you have manually set, or if you've already detected a winner during [Step 3](#step-3---interpreting-the-test-results), run the following command in `master` to conclude the test:

`1

vtex workspace abtest finish

`

> If you've manually set a predefined time frame to run your A/B test, monitor it throughout the entire period. Although the platform automatically redistributes traffic according to how each workspace behaves after the set time frame, overseeing the test is fundamental to its success.

This command displays a list of all workspaces tested by the `vtex.ab-tester` app in the `master` environment. Choose the workspace that you intend to finish. For example:

![{"base64":"  ","img":{"width":2002,"height":450,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":98932,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/abtest-end___2940fdcba7933cab4d828ba9e7a34d72.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/abtest-end___2940fdcba7933cab4d828ba9e7a34d72.png)

> Remember to save any relevant data using the `vtex workspace abtest finish` command before it ends automatically in 30 days – A/B test data can't be retrieved otherwise. You can access data from ongoing tests with the `vtex workspace abtest status` command.

After concluding the A/B test, follow the next step to promote the workspace to `master`.

### Step 5 - Promoting the production workspace to master

In [Step 4](#step-4---finishing-the-ab-test), you only ended the test on the selected workspace. Now, you need to promote it to `master` by following the steps below.

1. Change to the production workspace to be promoted.
> You must be logged in to your VTEX account.
`1
vtex use {workspaceName}
`
> Replace the values between curly brackets based on your workspace name.
2. Promote the workspace being used.
`1
vtex workspace promote
`

Now, all changes made in production are available in the master workspace.

Contributors

2

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/_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/App-Guides/ab-tests/vtex-io-documentation-running-native-ab-testing.md)

[A/B tests« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing//docs/guides/ab-tests)[A/B testing Legacy and IO store versionsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing//docs/guides/vtex-io-documentation-performing-ab-testing-between-legacy-and-io)

See also

[AB TesterVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtexarg-abtester)

Contributors

2

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/_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-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23before-you-begin)

[Running A/B tests via Admin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23running-ab-tests-via-admin)

[Running A/B tests via VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23running-ab-tests-via-vtex-io-cli)

[Step 1 - Enabling A/B testing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23step-1-enabling-ab-testing)[Step 2 - Configuring the traffic and time](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23step-2-configuring-the-traffic-and-time)[Step 3 - Interpreting the test results](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23step-3-interpreting-the-test-results)[Step 4 - Finishing the A/B test](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23step-4-finishing-the-ab-test)[Step 5 - Promoting the production workspace to master](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23step-5-promoting-the-production-workspace-to-master)

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/App-Guides/ab-tests/vtex-io-documentation-running-native-ab-testing.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-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23before-you-begin)

[Running A/B tests via Admin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23running-ab-tests-via-admin)

[Running A/B tests via VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23running-ab-tests-via-vtex-io-cli)

[Step 1 - Enabling A/B testing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23step-1-enabling-ab-testing)[Step 2 - Configuring the traffic and time](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23step-2-configuring-the-traffic-and-time)[Step 3 - Interpreting the test results](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23step-3-interpreting-the-test-results)[Step 4 - Finishing the A/B test](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23step-4-finishing-the-ab-test)[Step 5 - Promoting the production workspace to master](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/docs/guides/vtex-io-documentation-running-native-ab-testing%23step-5-promoting-the-production-workspace-to-master)

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