[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 product gifts 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.product-gifts/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

[Availability Notify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.availability-notify)

[Category Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.category-menu)

[Kit Look](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtexbr.kitlook)

[Icon Pack list](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-icons/iconpack)

[Iframe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.iframe)

[Live Shopping](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtexventures.livestreaming)

[PayPal Checkout with Smart Payment Buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.connector-paypal-commerce-platform)

[Personal Shopper](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtexventures.personal-shopper-free)

[Product Availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.product-availability)

[Product Comparison](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.product-comparison)

[Product Gifts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.product-gifts)

[Product Highlight by VTEX Segment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtexarg.product-highlight-by-vtex-segment)

[Product Specification Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.product-specification-badges)

[Quantity On Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtexarg.quantity-on-cart)

[Reviews and Ratings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.reviews-and-ratings)

[Querying personal MasterData Information with SafeData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.safedata)

[Seller Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.seller-selector)

[Similar Products Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.similar-products-variants)

[Store Drawer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-drawer)

[Store Locator](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-locator)

[Store Form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-form)

[Store Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-link)

[Store Media](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-media)

[Store Newsletter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-newsletter)

[Video](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-video)

[VTEX IO Sandbox Component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.sandbox)

[Shipping Option Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.shipping-option-components)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

[Availability Notify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.availability-notify)

[Category Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.category-menu)

[Kit Look](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtexbr.kitlook)

[Icon Pack list](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-icons/iconpack)

[Iframe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.iframe)

[Live Shopping](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtexventures.livestreaming)

[PayPal Checkout with Smart Payment Buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.connector-paypal-commerce-platform)

[Personal Shopper](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtexventures.personal-shopper-free)

[Product Availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.product-availability)

[Product Comparison](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.product-comparison)

[Product Gifts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.product-gifts)

[Product Highlight by VTEX Segment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtexarg.product-highlight-by-vtex-segment)

[Product Specification Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.product-specification-badges)

[Quantity On Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtexarg.quantity-on-cart)

[Reviews and Ratings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.reviews-and-ratings)

[Querying personal MasterData Information with SafeData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.safedata)

[Seller Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.seller-selector)

[Similar Products Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.similar-products-variants)

[Store Drawer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-drawer)

[Store Locator](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-locator)

[Store Form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-form)

[Store Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-link)

[Store Media](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-media)

[Store Newsletter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-newsletter)

[Video](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.store-video)

[VTEX IO Sandbox Component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.sandbox)

[Shipping Option Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.shipping-option-components)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Product Gifts

Official extension

Version: 0.4.0

Latest version: 0.4.0

The Product Gifts app provides blocks responsible for displaying, in the Product Description block, all gifts available for a given product.

:information\_source: _A product's gift is configured in a [Buy&Win promotion](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/buy-and-win--tutorials%5F322)_

![{"base64":"  ","img":{"width":1848,"height":856,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":375770,"url":"https://user-images.githubusercontent.com/52087100/75782082-20a08380-5d3d-11ea-9ae1-60873e03f1ac.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/52087100/75782082-20a08380-5d3d-11ea-9ae1-60873e03f1ac.png)

## Configuration

1. Add the `product-gifts` app to your theme's dependencies in the `manifest.json`. For example:

`1

"dependencies": {

2

 "vtex.product-gifts": "0.x"

3

}

`

Now, you are able to use all blocks exported by the `product-gifts` app. Check out the full list below:

| Block name        | Description                                                                                |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| product-gifts     | ![{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Mandatory-red) Renders a default Product Gifts block implementation.                             |
| gift-text         | ![{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Mandatory-red) Reads Catalog data regarding the product's gifts and provides it to its children. |
| product-gift-list | Renders the available gifts in a list format. It also provides context for its 3 children listed below.                                                                                |
| gift-name         | Renders the product's gift name.                                                                                |
| gift-image        | Renders the product's gift image.                                                                                |
| gift-description  | Renders the gift's description provided by the product-gift-list block.                                                                                |

1. Add the `product-gifts` block to your `store.product` template:

`1

"store.product": {

2

 "children": [

3

 // (...)

4

 "product-gifts",

5

 ]

6

}

`

When added to the `store.product` template but not declared with any children or prop, the Product Gifts block is rendered even so.

For the rendering, it uses the following block implementation behind the scenes:

`1

{

2

 "product-gifts": {

3

 "props": {

4

 "maxVisibleItems": {

5

 "desktop": 2,

6

 "mobile": 1

7

 }

8

 },

9

 "children": ["flex-layout.row#product-gifts-text", "product-gift-list"]

10

 },

11

12

 "flex-layout.row#product-gifts-text": {

13

 "props": {

14

 "verticalAlign": "middle",

15

 "colSizing": "auto",

16

 "preserveLayoutOnMobile": true

17

 },

18

 "children": [

19

 "rich-text#product-gifts",

20

 "flex-layout.col#product-gifts-text"

21

 ]

22

 },

23

 "flex-layout.col#product-gifts-text": {

24

 "children": ["gift-text"],

25

 "props": {

26

 "verticalAlign": "middle"

27

 }

28

 },

29

 "rich-text#product-gifts": {

30

 "props": {

31

 "text": "**+ GIFT**"

32

 }

33

 },

34

 "gift-text": {

35

 "props": {

36

 "text": "{exceedingItems, plural, =0{ } one {+ # gift} other {+ # gifts}}"

37

 }

38

 },

39

 "product-gift-list": {

40

 "children": ["flex-layout.row#gift"]

41

 },

42

 "flex-layout.row#gift": {

43

 "props": {

44

 "fullWidth": true

45

 },

46

 "children": ["flex-layout.col#gift-name-description", "gift-image"]

47

 },

48

 "flex-layout.col#gift-name-description": {

49

 "props": {

50

 "verticalAlign": "middle",

51

 "rowGap": 3

52

 },

53

 "children": ["gift-name", "gift-description"]

54

 }

55

}

`

### Advanced configuration

If desired, you can change the Product Gifts default implementation by explicitly declaring the code showed above in your `store.product` template.

As a result, you will be able to configure the Product Gifts behavior by using all available props for each block:

* **`product-gifts`**

![{"base64":"  ","img":{"width":1310,"height":478,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":96037,"url":"https://user-images.githubusercontent.com/27777263/75771051-ee385b80-5d27-11ea-8600-5ea7f47ff64c.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/27777263/75771051-ee385b80-5d27-11ea-8600-5ea7f47ff64c.png)

| Prop name       | Type                | Description                                            | Default value |
| --------------- | ------------------- | ------------------------------------------------------ | ------------- |
| maxVisibleItems | number \| "showAll" | Maximum number of gifts that will be displayed at once | "showAll"     |

* **`gift-text`**

![{"base64":"  ","img":{"width":156,"height":90,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":6067,"url":"https://user-images.githubusercontent.com/27777263/75767717-01e0c380-5d22-11ea-8054-4440438a5441.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/27777263/75767717-01e0c380-5d22-11ea-8054-4440438a5441.png)

| Prop name | Type   | Description                                                                                | Default value                                                      |
| --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
| text      | String | A translatable string (according to [ICU pattern](https://read.calvincode.net/reader?url=https://formatjs.io/guides/message-syntax/)) that has variables that might be used to render any desired text regarding the gifts. | "{exceedingItems, plural, =0{ } one {+ # gift} other {+ # gifts}}" |

You can configure the string received by the `text` prop using the following variables:

| Variable name  | Description                                                                                |
| -------------- | -------------------------------------------------------------------------------------------- |
| exceedingItems | Number of items that were not rendered because of the maxVisibleItems prop of product-gifts. |
| totalGifts     | Total number of gifts available.                                                             |
| visibleItems   | Number of items that are being rendered.                                                     |

* **`gift-name`**

![{"base64":"  ","img":{"width":516,"height":72,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":15366,"url":"https://user-images.githubusercontent.com/27777263/75767722-03aa8700-5d22-11ea-8150-2cbe2a7bb37a.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/27777263/75767722-03aa8700-5d22-11ea-8150-2cbe2a7bb37a.png)

| Prop name         | Type    | Description                                                                                | Default value |
| ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| linkToProductPage | Boolean | Whether or not the gift-name block should be a link to the gift's product page.                                                                               | false         |
| nameType          | enum    | Name type to be displayed alongside the gift. Possible values are: productName (displays the gift's product name) and skuName (displays the gift's SKU name). | skuName       |

* **`gift-image`**

![{"base64":"  ","img":{"width":396,"height":296,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":51380,"url":"https://user-images.githubusercontent.com/27777263/75767721-02795a00-5d22-11ea-8f51-fe80664b7f68.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/27777263/75767721-02795a00-5d22-11ea-8f51-fe80664b7f68.png)

| Prop name  | Type             | Description                                     | Default value |
| ---------- | ---------------- | ----------------------------------------------- | ------------- |
| maxWidth   | Number \| String | Gift image maximum width.                       | 125           |
| maxHeight  | Number \| String | Gift image maximum height.                      | 125           |
| minWidth   | Number \| String | Gift image minimum width.                       | 125           |
| minHeight  | Number \| String | Gift image minimum height.                      | 125           |
| imageLabel | String           | The label of the image that should be rendered. | undefined     |

:information\_source: _If no image label is defined, the_ `gift-image` _block will use the first available image from the product's SKU._

## Customization

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

Thereafter, you should add a single column table with the available CSS handles for that block:

| CSS Handles              |
| ------------------------ |
| giftDescription          |
| giftListItem             |
| giftNameLink             |
| giftNameText             |
| productGiftListContainer |
| productGiftText          |
| productGiftsContainer    |

[Product Comparison« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.product-comparison)[Product Highlight by VTEX SegmentNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtexarg.product-highlight-by-vtex-segment)

See also

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

ON THIS PAGE

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

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

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-gifts/docs/apps/vtex.product-gifts%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 interactive marchitecture tool 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/interactive-marchitecture-tool/docs/guides)

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

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

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

Guides

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

[Cloud infrastructure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/cloud-infrastructure)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/security)

[Data privacy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/data-privacy)

[Composability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/composability)

[VTEX Composable Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/vtex-composable-components)

[Interactive Marchitecture tool](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/interactive-marchitecture-tool)

[Extensibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/extensibility)

[Store architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/store-architecture)

[Developer experience](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/developer-experience)

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

[Cloud infrastructure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/cloud-infrastructure)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/security)

[Data privacy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/data-privacy)

[Composability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/composability)

[VTEX Composable Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/vtex-composable-components)

[Interactive Marchitecture tool](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/interactive-marchitecture-tool)

[Extensibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/extensibility)

[Store architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/store-architecture)

[Developer experience](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/developer-experience)

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

[Composability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/composability)

[Interactive Marchitecture tool](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool/docs/guides/interactive-marchitecture-tool)

Interactive Marchitecture tool

Learn how to use the Interactive Marchitecture tool and simulate a composable VTEX store architecture.

The [Interactive Marchitecture tool](https://read.calvincode.net/reader?url=https://vtex.com/en-us/assets/interactive-architecture/) allows you to simulate the store architecture interactively by choosing which services and add-ons will be used, along with third-party providers for integrations. For reference, see types of architectures for specific scenarios in our [Store architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-architecture) guide.

![{"base64":"  ","img":{"width":1694,"height":864,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":173121,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Composability/interactive-marchitecture-tool.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Composability/interactive-marchitecture-tool.png)

When you open the [Interactive Marchitecture tool](https://read.calvincode.net/reader?url=https://vtex.com/en-us/assets/interactive-architecture/), you first have to choose the desired region to plan the store architecture. The region selection defines the available partners for third-party integrations.

The tool displays all the services, add-ons, and integrations described in the [VTEX Composable Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-composable-components) guide. You can identify each component type by its color:

* Services: Hot pink boxes.
* Add-ons: Light pink boxes.
* Integrations: Dark blue boxes.
* Platform interaction tools: Light blue boxes.

You can enable and disable services, add-ons, User Admin features, and Developer Tooling by clicking them. If you double-click an add-on, a pop-up opens with a video explaining it.

When you click a type of integration, e.g., Carriers, a pop-up opens with the available partners for that type of integration and the selected region. You can choose up to four partners. Then, you can click the X in the top-right corner to close the pop-up.

![{"base64":"  ","img":{"width":779,"height":525,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":57219,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Composability/marchitecture-carriers-options.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Composability/marchitecture-carriers-options.png)

_Pop-up containing available carriers for the LATAM region_

![{"base64":"  ","img":{"width":174,"height":142,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":7444,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Composability/marchitecture-selected-carriers.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Composability/marchitecture-selected-carriers.png)

_Selected carriers in the architecture planning_

After selecting all the desired options for your store planning, you should have something like the image below.

![{"base64":"  ","img":{"width":1663,"height":861,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":230579,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Composability/marchitecture-filled.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/VTEX-Platform-Overview/Composability/marchitecture-filled.png)

> If you want to reset your architecture planning, click the 🔃refresh button in the top right corner or refresh the page in your browser.

Contributors

2

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

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

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-Platform-Overview/Composability/interactive-marchitecture-tool.md)

[VTEX Composable Components« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool//docs/guides/vtex-composable-components)[ExtensibilityNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/interactive-marchitecture-tool//docs/guides/extensibility)

Contributors

2

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

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

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-Platform-Overview/Composability/interactive-marchitecture-tool.md)

Copy page

On this page

On this page

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


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

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

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

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

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

VTEX IO Apps

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

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

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

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.login/docs/apps/vtex.search/banner)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.login/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.login/docs/apps/vtex.search/didyoumean)

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

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

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

[Banner](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.login/docs/apps/vtex.search/banner)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Suggestions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.login/docs/apps/vtex.search/suggestions)

[DidYouMean](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.login/docs/apps/vtex.search/didyoumean)

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Login

Official extension

Version: 2.69.1

Latest version: 2.69.1

[![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGPg4+Mz1Nfjl5T7f2c+AAzxA3lptuDWAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square","width":110,"height":20,"type":"svg"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

The VTEX Login app is responsible for handling user login in your store.

![{"base64":"  ","img":{"width":2857,"height":1497,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":840962,"url":"https://user-images.githubusercontent.com/52087100/99320783-21396580-284b-11eb-8a54-f64aa1cf7781.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/52087100/99320783-21396580-284b-11eb-8a54-f64aa1cf7781.gif)

## Configuration

1. Add the Login app to your theme's dependencies in the `manifest.json` file:

`1

 "dependencies": {

2

+ "vtex.login": "2.x"

3

 }

`

Now, you are able to use all the blocks exported by the Login app. Check out the full list below:

| Block name    | Description                                                                                |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| login         | ![{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Mandatory-red) Renders the Login component, as shown in the media above. |
| login-content | Only renders the login form .                                                                                |

1. Add the `login` block and its props to your store's header. For example:

`1

"login": {

2

 "props": {

3

 "emailAndPasswordTitle": "LOG-IN",

4

 "accessCodeTitle": "Acess Code LOG-IN",

5

 "emailPlaceholder": "e-mail",

6

 "passwordPlaceholder": "password",

7

 "showPasswordVerificationIntoTooltip": true,

8

 }

9

}

`

### `login` props

| Prop name                           | Type       | Description                                                                                | Default value |
| ----------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| optionsTitle                        | string     | Text to entitle the login options.                                                                                | undefined     |
| emailAndPasswordTitle               | string     | Text to display the email-and-password option.                                                                                | undefined     |
| accessCodeTitle                     | string     | Text to display the access-code option.                                                                                | undefined     |
| emailPlaceholder                    | string     | Text to be displayed as placeholder to the email input.                                                                                | undefined     |
| passwordPlaceholder                 | string     | Text to be displayed as placeholder to the password input.                                                                                | undefined     |
| acessCodePlaceholder                | string     | Text to be displayed as placeholder to the access code input.                                                                                | undefined     |
| showPasswordVerificationIntoTooltip | boolean    | Whether a tooltip responsible for checking the password format should be shown (true) or not (false).                                                                                | true          |
| showIconProfile                     | boolean    | Whether the hpa-profile icon from [Store Icons](https://read.calvincode.net/reader?url=https://vtex.io/docs/components/all/vtex.store-icons/) should be displayed on the Login component (true) or not (false).                                                                                | true          |
| iconLabel                           | string     | Text string to entitle the Login icon.                                                                                | undefined     |
| hideIconLabel                       | boolean    | Whether the text string defined for the Login icon should be hidden (true) or not (false).                                                                                | false         |
| labelClasses                        | \[string\] | Login icon's classnames.                                                                                | undefined     |
| providerPasswordButtonLabel         | string     | Text to be displayed as the password button label.                                                                                | undefined     |
| identifierPlaceholder               | string     | Text to be displayed as placeholder to the extension input.                                                                                | undefined     |
| invalidIdentifierError              | string     | Error message for invalid user identifier.                                                                                | undefined     |
| mirrorTooltipToRight                | boolean    | Whether the Login tooltip should open towards the right side of the screen (true) or not (false).                                                                                | false         |
| logInButtonBehavior                 | enum       | Expected behavior of the Login component when clicked on. Possible values are: popover (opens a popover tab) and link (redirects user to the /login page).                                                                                | popover       |
| accountOptionsButtonBehavior        | enum       | Expected behavior of the My account button when clicked on. Possible values are: popover (opens a popover tab) and link (redirects user to the /account page).                                                                                | popover       |
| accountOptionLinks                  | \[object\] | Creates a custom link to replace the default one set for the accountOptionsButtonBehavior's link value (/account). Check out below the available props for the object.                                                                                | undefined     |
| termsAndConditions                  | string     | Text to be displayed below the login options regarding terms&conditions.                                                                                | undefined     |
| hasGoogleOneTap                     | boolean    | ![{"base64":"  ","img":{"width":35,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Beta-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Beta-red) Whether the [Google's One-tap sign-up and auto sign-in](https://read.calvincode.net/reader?url=https://developers.google.com/identity/one-tap/web/) solution should be enabled (true) or not (false). | false         |
| googleOneTapAlignment               | enum       | ![{"base64":"  ","img":{"width":35,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Beta-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Beta-red) Defines pop-up alignment for the Google One-tap login. Possible values are Left and Right.                                                                     | Right         |
| googleOneTapMarginTop               | string     | ![{"base64":"  ","img":{"width":35,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Beta-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Beta-red) Defines the pop-up top margin for the Google One-tap login. The values supported are the same supported by the CSS property top.                               | 3rem          |
| disabledEmailInputs                 | boolean    | Whether user email editing should be allowed (true) or not (false).                                                                                | false         |
| blockOAuthAutoRedirect              | boolean    | If this prop is true and the only active provider is an OAuth, the login won't auto-redirect as usual. Also, the query string oAuthRedirect will be disabled.                                                                                | false         |

> _Notice that the Google One Tap props are still in Beta. Although they are ready to be used, UX improvements should be expected._

* **`accountOptionLinks` object:**

| Prop name | Type       | Description                     | Default value |
| --------- | ---------- | ------------------------------- | ------------- |
| label     | string     | Text lable for the custom link. | undefined     |
| path      | string     | Custom link's path.             | undefined     |
| cssClass  | \[string\] | Login icon's class names.       | undefined     |

### `login-content` props

| Prop name                           | Type    | Description                                                                                | Default value |
| ----------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| isInitialScreenOptionOnly           | boolean | Whether only the login options will be displayed on the initial screen (true) or not (false).                                                                                | true          |
| defaultOption                       | enum    | Defines the default login options to be shown. Possible values are: 0 (shows the access-code option for login), 1 (shows the email/password option for login) and 2 (shows the corporate option for login). | 0             |
| optionsTitle                        | string  | Text to entitle the login options.                                                                                | undefined     |
| emailAndPasswordTitle               | String  | Text to display the email-and-password option.                                                                                | undefined     |
| accessCodeTitle                     | string  | Text to display the access-code option.                                                                                | undefined     |
| emailPlaceholder                    | string  | Text to be displayed as placeholder to the email input.                                                                                | undefined     |
| passwordPlaceholder                 | string  | Text to be displayed as placeholder to the password input.                                                                                | undefined     |
| showPasswordVerificationIntoTooltip | boolean | Whether a tooltip responsible for checking the password format should be shown (true) or not (false).                                                                                | true          |
| acessCodePlaceholder                | string  | Text to be displayed as placeholder to the access code input.                                                                                | undefined     |
| providerPasswordButtonLabel         | string  | Text to be displayed as the password button label.                                                                                | undefined     |
| identifierPlaceholder               | string  | Text to be displayed as placeholder to the extension input.                                                                                | undefined     |
| invalidIdentifierError              | string  | Error message for invalid user identifier.                                                                                | undefined     |
| termsAndConditions                  | string  | Text to be displayed below the login options regarding terms&conditions.                                                                                | undefined     |
| disabledEmailInputs                 | boolean | Whether user email editing should be allowed (true) or not (false).                                                                                | false         |

### Advanced configuration

The email/password login asks by default two inputs from users:

* The email (_user identifier_)
* The password

It is possible to **set up the User Identifier Extension, allowing other identifiers to be used in the Login's form instead** \- as long as they can be resolved to the user email behind the scenes.

For example: if your account stores the National Identity Document of each user, the email/password login could be changed to ask for the following two inputs:

* The National Identity Document (_user identifier_)
* The password

In order to display an identifier other than the user email, you must create an **extension app** of your own to work behind the scenes with the Login component.

The new extension app should be set up to receive the custom user identifier from the interface, such as the National Identity Document, and link it to the accurate user using the store data. Thereafter, the app should fetch the user email and return it to the Login app, which will behave as if the user just typed in their email.

An example implementation is available at the ["user-identifier-extension-example" repository](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/user-identifier-extension-example).

Find below the needed instructions to perform the User Identifier Extension in your store:

> _This extension is only allowed for enterprise clients. You can check your account plan in your VTEX contract._

1. Ensure that the Login app is added as your extension app's dependency and that the `store` builder is listed as one of its builders, as shown below:

`1

"dependencies": {

2

 "vtex.login": "2.x"

3

},

`

`1

"builders": {

2

 "store": "0.x",

3

},

`

1. [Develop a new component](https://read.calvincode.net/reader?url=https://vtex.io/docs/getting-started/desenvolva-componentes-usando-vtex-io-e-react/1) to replace the `email` input in the login form. It can be anything you desire for that position, such as a file uploader or a simple text input which takes the National Identity Document.

> _When developing it, remember that it must know how to convert the custom identifier to an email. This should be done by registering a callback function, which returns an email within the Login app, in the `react/{{ComponentName}}.js` file. For example:_

`` 1

import { useState, useCallback, useEffect } from 'react'

2

3

const ComponentName = ({ renderInput, identifierPlaceholder, registerSubmitter }) => {

4

 // The component receives 3 props:

5

 // - renderInput is a function that returns the same Input component used by the login app, defined in styleguide.

6

 // It receives an object with three named parameters, trivially used by Inputs with react: value, onChange, placeholder.

7

 // When "onChange" is called, the login app clears the "email is invalid" error, if it exists.

8

 // - identifierPlaceholder is the value of the configuration "identifierPlaceholder" defined in the Store Front. It has a

9

 // fallback to the value of the configuration "emailPlaceholder".

10

 // - registerSubmitter is a function that receives your async callback function defined in this file. Your callback will be called

11

 // when the user submits the form.

12

13

 // This code controls the state of the rendered Input component.

14

 const [inputValue, setInputValue] = useState('')

15

 const onChangeInput = useCallback(e => setInputValue(e.target.value), [

16

 setInputValue,

17

 ])

18

19

 // This callback function (onSubmit) should return the resolved email. In the example below, it adds `@email.com` to the current

20

 // value in the Input component (eg. "john" would be resolved to "john@email.com").

21

 const onSubmit = useCallback(async () => {

22

 const email = `$\{inputValue\}@email.com`

23

 return email

24

 }, [inputValue])

25

26

 // This code registers the async callback function you defined in the login app when this component mounts.

27

 useEffect(() => {

28

 registerSubmitter(onSubmit)

29

 }, [registerSubmitter, onSubmit])

30

31

 // The component calls "renderInput" and renders its result.

32

 return renderInput({

33

 value: inputValue,

34

 onChange: onChangeInput,

35

 placeholder: identifierPlaceholder,

36

 })

37

}

38

39

export default ComponentName

 ``

1. In the `store/interfaces.json` file, create a new [interface](https://read.calvincode.net/reader?url=https://vtex.io/docs/getting-started/desenvolva-componentes-usando-vtex-io-e-react/4%23entendendo-interfaces) for `user-identifier`, declaring the component you created in the previous step:

`1

"user-identifier.{{InterfaceName}}": {

2

 "component": "{{ComponentName}}"

3

},

`

> _The interface name, which is represented in the example above as `{{InterfaceName}}`, can be any of your choosing._ℹ _In the example above, the component created in the step 2 is represented by `{{ComponentName}}`._

1. In the `store/plugins.json` file, plug in the new interface (`user-identifier`) to the Login app:

`1

"login > user-identifier": "user-identifier.{{InterfaceName}}",

2

"login-content > user-identifier": "user-identifier.{{InterfaceName}}",

`

> _If the `store/plugins.json` file is not available, you should create it._

> _Since the Login app behaves as if users were typing their emails, error messages like `The email is invalid` may appear even if the component is asking users other identifiers. This message, along with others, can be edited in the admin's CMS._

## Modus Operandi

The Login app reads the following query-string parameters:

* `returnUrl` \- Redirects users to the given `returnUrl` once they are logged in. Caution: This parameter only works for the store's domain and should be UTF-8 encoded (as in javascript's `encodeURIComponent`).
* `oAuthRedirect` \- Redirects users to the given OAuth Provider page, instead of displaying the native login options. For this to work, the given OAuth Provider must be listed on the component as one of the login options. Caution: The parameter value is case sensitive and must be `Google`, `Facebook` or the registered name of the chosen OAuth Provider.
* `userEmail` \- User email data.
* `flowState` \- Default state of the login flow. Possible values:
   * `createPass` \- Sends an email to users with the code required to create a new password. Caution: When used, this parameter also requires the `userEmail` query string in the same URL.

> _Use the parameters above to build the Login's desired URLs - through which you will be able to set the expected behavior for the component._

## Customization

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

| CSS Handles                |
| -------------------------- |
| container                  |
| contentInitialScreen       |
| contentFormVisible         |
| profile                    |
| label                      |
| optionsSticky              |
| optionsList                |
| optionsListItem            |
| optionsListItemContainer   |
| accessCodeOptionBtn        |
| emailPasswordOptionBtn     |
| corporateOptionBtn         |
| facebookOptionBtn          |
| googleOptionBtn            |
| customOAuthOptionBtn       |
| oauthProvider              |
| inputContainer             |
| inputContainerAccessCode   |
| inputContainerPassword     |
| inputContainerEmail        |
| emailVerification          |
| emailForm                  |
| emailAndPasswordForm       |
| forgotPasswordForm         |
| formLinkContainer          |
| arrowUp                    |
| buttonLink                 |
| formError                  |
| content                    |
| content--emailVerification |
| content--emailAndPassword  |
| content--codeConfirmation  |
| content--accountOptions    |
| content--recoveryPassword  |
| button                     |
| sendButton                 |
| buttonSocial               |
| buttonDanger               |
| backButton                 |
| accountOptions             |
| codeConfirmation           |
| corporateEmail             |
| formTitle                  |
| formSubtitle               |
| box                        |
| contentContainer           |
| formFooter                 |
| contentForm                |
| contentAlwaysWithOptions   |
| options                    |
| tooltipContainer           |
| tooltipContainerTop        |
| tooltipContainerLeft       |
| loginOptionsContainer      |
| termsAndConditions         |
| forgotPasswordLink         |
| dontHaveAccount            |
| eyeIcon                    |
| selectCodeDeliveryMethod   |
| deliveryMethodOptions      |

[Locale Switcher« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.login/docs/apps/vtex.locale-switcher)[MenuNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.login/docs/apps/vtex.menu)

See also

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

ON THIS PAGE

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

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

[Modus Operandi](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.login/docs/apps/vtex.login%23modus-operandi)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.login/docs/apps/vtex.login%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=)