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

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

VTEX IO Apps

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Product Summary Buy Button

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

Version: 2.91.0

Latest version: 2.91.0

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

![{"base64":"  ","img":{"width":2852,"height":1550,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":667606,"url":"https://user-images.githubusercontent.com/52087100/76864047-38006600-683f-11ea-8a4e-74dc91712984.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/52087100/76864047-38006600-683f-11ea-8a4e-74dc91712984.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://vtex.io/docs/components/all/vtex.minicart/), please configure the [Add To Cart Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/docs/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/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization) guide.

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

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

See also

[Vtex.product SummaryVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/productsummarybuybutton/docs/apps/vtex.product-summary)[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-summary/productsummarybuybutton/docs/apps/vtex.product-summary/productsummarybuybutton%23configuration)

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

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/productsummarybuybutton/docs/apps/vtex.product-summary/productsummarybuybutton%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 io documentation making your theme content public 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-making-your-theme-content-public/docs/guides)

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/getting-started-3)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-1-basicsetup)

[2\. Configuring your account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-2-prerequesites)

[3\. Creating a Store Theme project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-3-settingyourstoretheme)

[4\. Configuring templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-4-configuringtemplates)

[5\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-5-definingstyles)

[6\. Building your own store theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme)

[7\. Making your store theme public](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-making-your-theme-content-public)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-glossary)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/troubleshooting)

---

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/getting-started-3)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-1-basicsetup)

[2\. Configuring your account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-2-prerequesites)

[3\. Creating a Store Theme project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-3-settingyourstoretheme)

[4\. Configuring templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-4-configuringtemplates)

[5\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-5-definingstyles)

[6\. Building your own store theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-6-buildingyourownstoretheme)

[7\. Making your store theme public](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-making-your-theme-content-public)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-glossary)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/storefront-best-practices)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/storefront-development)

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/store-framework)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/getting-started-3)

[7\. Making your store theme public](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-making-your-theme-content-public)

7\. Making your theme content public

Learn how to make your Store Framework theme public.

A [Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) is a VTEX IO app that operates like any other app with built-in features such as versioning and deployment.

In this guide, you'll find instructions on how to make your Store Theme available to end users.

## Instructions

If you're satisfied with the configurations you've made and want your theme to be available to all users, follow the steps below:

1. [**Link**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app/) the theme to a [development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/) to test your changes.
2. [**Release**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-releasing-a-new-app-version/) the theme.
3. [**Publish**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-publishing-an-app/) it as a release candidate version.
4. [**Install**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-an-app/) the theme in a [production workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-production-workspace/) to test your changes with traffic.
5. [**Validate**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-publishing-an-app/) it as a release candidate if no more changes are needed. Otherwise, go back to step 1 and use a development workspace. **Don't perform changes in a production workspace**.
6. [**Deploy**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-publishing-an-app/) it as a stable version if you're sure about all the changes you've made.
7. [**Promote the production workspace to master**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-promoting-a-workspace-to-master/) to make your theme public to your store's end users. Follow the [Deployment and workspace promotion](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-workspaces-best-practices%23deployment-and-workspace-promotion) best practices to deploy changes and promote workspaces seamlessly.

For more details on each of these steps, see [Making your new app version publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available/).

> To publish a new major version of your Store Theme, see also [Migrating CMS settings after a major theme update](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-migrating-cms-settings-after-major-update).

Contributors

2

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/getting-started-3/vtex-io-documentation-making-your-theme-content-public.md)

[6\. Building your own store theme« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public//docs/guides/vtex-io-documentation-6-buildingyourownstoretheme)[GlossaryNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public//docs/guides/store-framework-glossary)

Contributors

2

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

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-making-your-theme-content-public%23instructions)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Getting-Started/getting-started-3/vtex-io-documentation-making-your-theme-content-public.md)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-theme-content-public/docs/guides/vtex-io-documentation-making-your-theme-content-public%23instructions)

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 region section api quick start guides 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/region-section-api-quick-start-guides/docs/guides)

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/checkout-security)

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

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

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

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

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

[Get sellers by region or address](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/get-sellers-by-region-or-address)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/checkout-error-codes)

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/troubleshooting)

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/customization)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/checkout-security)

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

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

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

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

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

[Get sellers by region or address](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/get-sellers-by-region-or-address)

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides/checkout-error-codes)

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides/docs/guides)

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

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

Region

This section contains the quick start guides of the endpoints described in the [Region section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/checkout-api-overview%23region) of the Checkout API Reference.

* [Get sellers by region or address](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/get-sellers-by-region-or-address)

Contributors

1

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

Was this helpful?

Yes

No

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

[Get address by postal code« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides//docs/guides/get-address-by-postal-code)[Get sellers by region or addressNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/region-section-api-quick-start-guides//docs/guides/get-sellers-by-region-or-address)

Contributors

1

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

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Checkout/region-section-api-quick-start-guides.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] Provide a guide on guides basic components in VTEX.

[Assistant]
Title: Basic components

URL Source: https://developers.vtex.com/docs/guides/basic-components

Markdown Content:
Basic components

Use our storefront components to create a seamless shopping experience for your customers.

[Add to cart Button A button for adding items into the shopping cart. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.add-to-cart-button)[Breadcrumb Navigation scheme that shows a user's browsing history up to their current location in your store. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.breadcrumb)[Footer Displays your store's Footer. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-footer)[Google One-Tap Login Google One-tap delivers a seamless experience with a small pop-up that can authenticate a userwith a streamlined interface. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/google-one-tap-login)[Header Displays your store's Header. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-header)[Locale Switcher Component responsible for changing the current language of the store. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.locale-switcher)[Login Handles every functionality related to user login. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.login)[Menu Rendersthe Menu component, displaying a bar containing links and drop-down sub-menus. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.menu)[Minicart Fetching data from the Checkout OrderForm API, the Minicart component displays a summary list of allitems added by customers in their shopping cart. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.minicart)[Order Placed Renders the the orderPlaced page with all order data. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-placed)[Product Customizer Allows a product's attachments to be made available and ready to be chosen by users from theproduct page. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-customizer)[Product Identifier Shows a product identifier, such as the product reference, product ID, sku EAN or skureference. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-identifier)[Product List Works with Minicar to display all items in the user's cart, informing when some of them are unavailable. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-list)[Product Price The app exports blocks related to the product's price, such as list price, selling price and savings. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-price)[Product Quantity Allows users to a add a chosen amount of the displayed product in their cart. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-quantity)[Product SpecificationBadges This block is exported by the Product Summary app and it is responsible fordisplaying badges with the product's specifications in other store blocks. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/productsummaryspecificationbadges)[Product Summary App responsible for summarizing product information (such as name, price and image) in otherstore blocks, such as the Shelf and the Minicart. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary)[Product Summary AttachmentList This block is exported by the Product Summary app and it is responsible fordisplaying the product's attachments in other store blocks. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/productsummaryattachmentlist)[Product Summary Brand This block is exported by the Product Summary app and it is responsible for displaying theproduct's brand in other store blocks. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/productsummarybrand)[Product Summary Buy Button This block is exported by the Product Summary app and it is responsible for displaying aBuy Button block in other store blocks. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/productsummarybuybutton)[Product Summary Description This block is exported by the Product Summary app and it is responsible for displayingthe product's description in other store blocks. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/productsummarydescription)[Product Summary Image This block is exported by the Product Summary app and it is responsible for displaying theproduct's image in other store blocks. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/productsummaryimage)[Product Summary List This block is exported by the Product Summary app and it is responsible for displaying aproducts list in other store blocks. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/productsummarylist)[Product Summary Name This block is exported by the Product Summary app and it is responsible for displaying theproduct's name in other store blocks. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/productsummaryname)[Product Summary SKU Selector This block is exported by the Product Summary app and it is responsible for displayingthe SKU Selector block in other store blocks. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/productsummaryskuselector)[Rich Text The Rich Text brings texts to your store and everything else that Markdown language is able to. Itconverts texts written in Markdown language and displays its content as HTML elements. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.rich-text)[Search TheVTEX Search app is responsible for handling the new VTEX Intelligent Search solution in IO stores byproviding new UI components that enhance the search experience, such as the autocomplete feature. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search)[Search Result Handles the result fetched by the VTEX Search API and displaying it to users. The app exports allstore blocks expected in a search results page, such as the filters and the product gallery. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.search-result)[Shelf Displays a list of products in the store home page. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shelf)[Store Image Render an pre-defined image on the UI. See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-image)


[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 store components 3.178.5 ProductImages 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.store-components@3.178.5/ProductImages/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductImages/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductImages/docs/troubleshooting)

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Product Images

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

Version: 3.178.5

Latest version: 3.178.5

The `product-images` block renders an image or video configured in the SKU settings. To learn which media formats are supported, see the [Media](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/media-overview--31fhjHTt4TBoo50AmGQ9b2) section in the [Adding or editing SKUs](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/adding-or-editing-skus--4ryZ6J45kwn3jDiQBxGiiN) guide.

![{"base64":"  ","img":{"width":2102,"height":1084,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":409582,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-productimages-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-productimages-0.png)

## Configuration

1. Import the `vtex.store-components` app to your theme dependencies in the `manifest.json` file, as in the following example:

`1

 "dependencies": {

2

 "vtex.store-components": "3.x"

3

 }

`

1. Add the `product-images` block to any child of the `store.product` template (Product Details Page template). For example:

`1

 "store.product": {

2

 "children": [

3

 "flex-layout.row#product",

4

 ]

5

 },

6

 "flex-layout.row#product": {

7

 "children": [

8

+ "product-images"

9

 ]

10

 },

`

1. Declare the `product-images` block using the props stated in the [Props](#props) table. Example:

`1

 "product-images": {

2

 "props": {

3

 "displayThumbnailsArrows": true

4

 }

5

 },

`

### Props

| Prop name               | Type                             | Description                                                                                | Default value  |
| ----------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| aspectRatio             | string                           | Sets the image aspect ratio, determining whether it should be square, portrait, landscape, etc. Follow the [common aspect ratio notation](https://read.calvincode.net/reader?url=https://en.wikipedia.org/wiki/Aspect%5Fratio%5F%28image%29), represented by two numbers separated by a colon, such as 1:1 for square, 3:4 for portrait, or 1920:1080 for widescreen.                                                                                | "auto"         |
| blockClass              | string                           | Serves as the block's unique identifier for customization.                                                                                |                |
| contentOrder            | 'videos-first' \| 'images-first' | Controls the order in which the images and videos are displayed.                                                                                | 'images-first' |
| contentType             | enum                             | Controls the type of content that will be displayed in the block. Possible values are images, videos, or all.                                                                                | all            |
| displayMode             | enum                             | Defines how the product media should be displayed. Possible values are carousel (displays the product images and videos in a carousel), list (displays only the product images inline, with no extra markup), and first-image (displays only the first image available). **The list and first-image values don't display product videos and are only compatible with the maxHeight, hiddenImages, zoomFactor, aspectRatio,ModalZoomElement, and zoomMode props**. | carousel       |
| displayThumbnailsArrows | boolean                          | Displays navigation arrows on the thumbnail media (if there are enough thumbnails for them to scroll).                                                                                | false          |
| hiddenImages            | string                           | Hides images with labels that match the values listed in this prop. Intended to be used with the product-summary-sku-selector block. To learn more, see the [SKU Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/skuselector) documentation.                                                                                | skuvariation   |
| maxHeight               | number                           | Maximum height for individual product images (in pixels).                                                                                | 600            |
| ModalZoom               | block                            | Opens a modal to zoom in on the product image. This prop value must match the name of the block that triggers the modal containing the product image for zooming (for example, modal-layout from [Modal layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/apps/vtex.modal-layout) app). The ModalZoom prop will only work if the zoomMode prop is set as open-modal. To learn more, see the [Advanced configuration section](#Advanced-configuration).                          | undefined      |
| placeholder             | string                           | Sets the URL for a placeholder image to be displayed when no product image or video is available.                                                                                | undefined      |
| position                | enum                             | Sets the position of the thumbnails (left or right). Only used when thumbnailsOrientation is vertical.                                                                                | left           |
| showNavigationArrows    | boolean                          | Defines if the navigation arrows should be displayed.                                                                                | true           |
| showPaginationDots      | boolean                          | Defines if the pagination dots should be displayed.                                                                                |                |
| showImageLabel          | boolean                          | Controls if the image label text should be rendered above each image.                                                                                | true           |
| thumbnailVisibility     | visible or hidden                | Defines if the thumbnails should be displayed in carousel displayMode.                                                                                | visible        |
| thumbnailAspectRatio    | string                           | Sets the aspect ratio of the thumbnail image. For more information about aspect ratio, check out the aspectRatio prop.                                                                                | "auto"         |
| thumbnailMaxHeight      | number                           | Maximum height of the thumbnail image (in pixels).                                                                                | 150            |
| thumbnailsOrientation   | enum                             | Sets the orientation of the thumbnails. It can be vertical or horizontal.                                                                                | vertical       |
| zoomFactor              | number                           | Sets how much the zoom increases the image size (for example, 2 will make the zoomed-in image twice as large).                                                                                | 2              |
| zoomMode                | enum                             | Sets the image zoom behavior. Possible values are disabled (zoom is disabled), in-place-click (zoom is triggered when the image is clicked), in-place-hover (zoom is triggered when the image is hovered on), and open-modal (image is zoomed using a modal).                                                                                | in-place-click |

### Advanced configuration

In this section, you’ll learn how to use modal zoom, a property that allows you to open a popup displaying a product image for zooming. To use this feature, configure the `product-images` block by setting the `zoomMode` and `ModalZoom` props to `open-modal` and `modal-layout`, respectively.

When configured as explained, the `zoomMode` prop allows the image to trigger a modal for zooming. Additionally, the `MozalZoom` prop will render the block defined as its value. In this case, the `modal-layout` is required. This allows you to configure a modal containing the product image for zooming.

Once both props are correctly configured, you must declare the `modal-layout` block and the `product-images.high-quality-image` block as its child.

The `modal-layout` block renders the modal component and triggers the image zoom in a popup box. The `product-images.high-quality-image` block, in turn, is a _special_ block used exclusively to render the `product-image` block inside the modal.

Example:

`1

{

2

 "product-images.high-quality-image": {

3

 "props": {

4

 "zoomMode": "in-place-click",

5

 "zoomFactor": 2

6

 }

7

 },

8

 "modal-layout#product-zoom": {

9

 "children": [

10

 // you can put any other block inside the modal,

11

 // this is just a normal modal

12

 "flex-layout.row#product-name",

13

 "product-images.high-quality-image"

14

 ]

15

 },

16

 "product-images": {

17

 "props": {

18

 "ModalZoom": "modal-layout#product-zoom",

19

 // to use the ModalZoom, the product-images zoomMode value must be set as open-modal

20

 "zoomMode": "open-modal",

21

 "aspectRatio": {

22

 "desktop": "auto",

23

 "phone": "16:9"

24

 }

25

 }

26

 }

27

}

`

The `product-images.high-quality-image` block must be declared as a child of `modal-layout`. You can also declare other blocks exported by the [Modal Layout app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.modal-layout) as children.

The following table shows the props allowed by `product-images.high-quality-image`:

| Prop name   | Type       | Description                                                                                | Default value |
| ----------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| aspectRatio | string     | Sets the image aspect ratio, determining whether it should be square, portrait, landscape, etc. Follow the [common aspect ratio notation](https://read.calvincode.net/reader?url=https://en.wikipedia.org/wiki/Aspect%5Fratio%5F%28image%29), represented by two numbers separated by a colon, such as 1:1 for square, 3:4 for portrait, or 1920:1080 for widescreen. | auto          |
| defaultSize | number     | Image default size (in px).                                                                                | 1200          |
| imageSizes  | \[number\] | Image sizes (in px) to be used in the image [srcset HTML attribute](https://read.calvincode.net/reader?url=https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia%5Fand%5Fembedding/Responsive%5Fimages). If no value is defined for this prop, the srcset will use the original image size.                                                                  | undefined     |
| maxSize     | number     | Image maximum size (in px) for rendering, regardless of screen size. This prop only works if you also declare the imageSizes prop.                                                                                | 4096          |
| zoomFactor  | number     | Sets how much the zoom increases the image size (for example, 2 will make the zoomed-in image twice as large).                                                                                | 2             |
| zoomMode    | enum       | Sets the zoom behavior for the product-images.high-quality-image block. Possible values are disabled (no zoom), in-place-click (zoom on click), and in-place-hover (zoom on hover). Unlike the store-images prop, this one doesn’t accept the open-modal value.                                                                | disabled      |

## Customization

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

| CSS Handles                                    |
| ---------------------------------------------- |
| carouselContainer                              |
| carouselCursorDefault                          |
| carouselGaleryCursor                           |
| carouselGaleryThumbs                           |
| carouselIconCaretLeft                          |
| carouselIconCaretRight                         |
| carouselImagePlaceholder                       |
| carouselInconCaretRight                        |
| carouselThumbBorder                            |
| figure                                         |
| figure--video                                  |
| highQualityContainer                           |
| image                                          |
| imgZoom                                        |
| productImagesContainer (content is deprecated) |
| productImagesContainer--carousel               |
| productImagesContainer--list                   |
| productImagesGallerySlide                      |
| productImagesGallerySwiperContainer            |
| productImagesThumb                             |
| productImagesThumbActive                       |
| productImagesThumbCaret                        |
| productImagesThumbsSwiperContainer             |
| productImageTag--main                          |
| productImageTag--zoon                          |
| productImageTag                                |
| productImageLabel                              |
| productVideo                                   |
| swiper-pagination                              |
| swiperBullet--active                           |
| swiperBullet                                   |
| swiperCaret                                    |
| swiperCaretNext                                |
| swiperCaretPrev                                |
| thumbImg                                       |
| thumbImg--video                                |
| video                                          |
| video                                          |
| videoContainer                                 |

See also

[Vtex.store ComponentsVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductImages/docs/apps/vtex.store-components)[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.store-components@3.178.5/ProductImages/docs/apps/vtex.store-components@3.178.5/ProductImages%23configuration)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductImages/docs/apps/vtex.store-components@3.178.5/ProductImages%23props)[Advanced configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/ProductImages/docs/apps/vtex.store-components@3.178.5/ProductImages%23advanced-configuration)

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