[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 faststore components index 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/faststore/components-index/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-overview)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/troubleshooting)

---

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-overview)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore)

FastStore UI

FastStore UI is designed and built following the [Atomic Design](https://read.calvincode.net/reader?url=https://bradfrost.com/blog/post/atomic-web-design/) pattern. Atomic Design breaks user interfaces hierarchically into smaller and simpler components, and the FastStore components are classified as **atoms**, **molecules**, **organisms**, and **features**.

## [Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-overview)

* [SuccessBadgeBadges are status descriptors used to emphasize an item's state.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-badge)
* [PrimaryButtonButtons indicate actions that users can take, like adding an item to the cart.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-button)
* [CheckboxCheckboxes allow users to toggle an option on or off.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-checkbox)
* [IconIcons are simplified graphics used to represent concepts and help users navigate the UI.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-icon)
* [InputFields used to get user inputs.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-input)
* [LabelLabelDescribes the meaning of input fields.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-label)
* Default
Link
Performs the same behavior of a regular anchor tag (`a`), but can be used as any HTML tag and component.
* [Great Unordered ListOk Unordered ListBad Unordered ListListLists group related content. They can be ordered or unordered.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-list)
* [LoaderLoaders provide a visual cue that an action is being processed.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-loader)
* [A content outside meOverlayOverlays provide contextual information on top of the current layer of the interface.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-overlay)
* [62.5PriceUsed to display the price of a given product, discount and total values.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-price)
* [RadioAllow users to select one option from a set.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-radio)
* [GreatOkBadSelectSelect components allow users to pick an option from a predefined list.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-select)
* [SkeletonImproves the store's experience and perceived performance through loading placeholders.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-skeleton)
* [0500SliderAllows users to select a single value from a range.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-slider)
* [visually hidden textSROnlyHides an element visually. Improve accessibility by providing text to screen readers when applied.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-sr-only)

---

## [Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-overview)

* [ClothingShortsSweatshirtTank topsBagsBackpacksNecessaireSaleSmartphonesTVsAccordionDisplays an expandable/collapsible list of items.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-accordion)
* [Alert message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-alert)[Link](#)
Alert
Displays short messages related to the behavior of a system, feature or page.
* [](https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-breadcrumb)[Echo Dot Smart Speaker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/echo-dot-smart-speaker-99988214/p)
* Oculus VR Headset

   1. [Technology](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/technology/)
   2. [Echo Dot Smart Speaker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/echo-dot-smart-speaker-99988214/p)
   3. Oculus VR Headset

Breadcrumb

Indicates the user's location in a website hierarchy.

* [Buy NowBuyButtonIntends to send the user to the checkout/cart step directly.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-buy-button)
* [Card with Icon Message CardA card with a header and body, ideal for displaying products, messages, or store information.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-card)
* [![appleblack](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190932/mouse-black.jpg?v=1767729450)](https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-carousel)Apple Magic Mouse
Original price:$999Price:$950.04
* ![Monitor27](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190903/unsplash-monitor.jpg?v=1767729451)
### 4k Philips Monitor 27”
Original price:$490Price:$420
* ![echodotwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190904/unsplash-smart-speaker.jpg?v=1767978734)
### Echo Dot Smart Speaker
Original price:$310Price:$280
* ![aedleheadphone](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190901/unsplash-headphone.jpg?v=1766352858)
### Aedle VK-1 L Headphone
Original price:$150Price:$130
* ![oculus](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190900/unsplash-vr-glasses.jpg?v=1765997962)
### Oculus VR Headset
Original price:$344Price:$315
* ![hic](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/173596/est.jpg?v=1757659088)
### Apple AirPods Pro
Original price:$249Price:$229
* ![quidem](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/179130/sint.jpg?v=1757911413)
### Anker SoundCore Liberty Air
Original price:$643.71Price:$486.34
* ![dolore](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/171611/eius.jpg?v=1757657196)
### Fujifilm X-T1 Camera
Original price:$495.97Price:$366.11
* ![culpa](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/159818/debitis.jpg?v=1757639123)
### SANDMARC Fisheye Lens
Original price:$946.73Price:$636.05
* ![odio](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/181988/nulla.jpg?v=1757915578)
### Apple AirTag
Original price:$679.29Price:$426.14

Carousel

Slides through multiple elements using custom controls.

* [![appleblack](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190932/mouse-black.jpg?v=1759260622)Apple Magic MouseColor: BlackSize: MediumOriginal price:$999Price:$950.04CartItemUsed to present the summarized information of a product inside the Cart.](https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-cart-item)
* [DefaultCheckboxFieldWraps a Checkbox input and its corresponding Label. It allows users to select one option from a set.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-checkbox-field)
* [50% offDiscountBadgeA custom Badge that display product's discounts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-discount-badge)
* [DropdownDropdownDisplays a set of actions/items to the user, usually used to show a menu of options.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-dropdown)
* [![Magicwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000)Get a Apple Magic MouseOriginal price:$999FreeGiftDisplays an additional item to purchase as a gift.](https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-gift)
* [IconButtonicons that trigger some sort of action, such as adding an item to the cart.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-icon-button)
* [Input w/ ActionApplyInputFieldWraps an Input and its corresponding Label.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-input-field)
* [Link Button](#)
LinkButton
Visuallly replicates a `Button`, however acts as a link to navigate users between pages.
* [Open ModalModalAre dialog windows that sit on top of an application's main view.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-modal)
* [Set location](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-navbar-links)[Office](#)
* [Home Appliances](#)
* [Computer and Software](#)
* [Technology](#)

NavbarLinks

Used to display a set of navigation links that self adapts on mobile or desktop screens.

* [Subtotal (3 products)$1,200Discount\-$100Total$1,100OrderSummaryProvides a summary of the items in the cart, including the total price, related shipping tax, and discounts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-order-summary)
* [Popover TriggerPopoverProvides contextual information related to a trigger element when a user interacts with it to open the container.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-popover)
* [![combo](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)](https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-product-card)Mouse
Original price:$999Price:$950.04
ProductCard
Displays summarized information about a product.
* [Original price:$999Price:$950.04ProductPriceDisplays the product's listing and spot price.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/components/molecules/product-price)
* [Apple Mouse10% offRef.: 99995945ProductTitleUsed on Product Details Page, wraps the product name, a product label and the rating.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-product-title)
* [Quantity SelectorAllows customers to select the quantity of a given product to purchase.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-quantity-selector)
* [CheckedRadio FieldWraps a Radio input and its corresponding Label. It allows users to select one option from a set.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-radio-field)
* [FirstSecondThirdRadio GroupAllows users to select a single option from a list of two or more mutually exclusive options.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-radio-group)
* [RatingDisplays the average rating of a product based on other shoppers' feedback and reviews.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-rating)
* [Set your locationRegion BarTrigger the RegionModal and is part of Regionalization feature.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-region-bar)
* [](https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-search-auto-complete)[appl**e airpods**](#)
* [appl**e tv**](#)

Search Auto Complete

Lists auto completing suggestions based on searched term. This component is part of the `Search` feature.

* [](https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-search-dropdown)[appl**e**](#)
* [appl**e magic mouse**](#)

Suggested Products

1. [![combo](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)Apple Magic MouseOriginal price:$999Price:$950.04](#)
2. [![combo](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)Apple Magic MouseOriginal price:$999Price:$950.04](#)

Search Dropdown

Combines all `Search` components to show all options in `SearchInput`. This component is part of the `Search` feature.

* [HistoryClear History](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-search-history)[Headphone](#)
* [Audio & Video](#)
* [mh-7000](#)

Search History

Responsible for showing the latest terms searched by a user. This component is part of the `Search` feature.

* [Search Input FieldAn InputField with a search button. This component is part of the Search feature.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-search-input-field)
* [Suggested Products](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-search-products)[![combo](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)Apple Magic MouseOriginal price:$999Price:$950.04](#)
* [![combo](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)Apple Magic MouseOriginal price:$999Price:$950.04](#)

Search Products

Shows details of the suggested products. This component is part of the `Search` feature.

* [Top Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-search-top)[1Notebooks](#)
* [2Laser Printer](#)
* [3Bluetooth Keyboard](#)

Search Top

Displays the most searched terms by customers. This component is part of the `Search` feature.

* [Select a Status:GreatOkBadSelect FieldWraps a Select input and its corresponding Label. It allows users to select one option from a set.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-select-field)
* [Color: **Blue**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-sku-selector)[Color: Blue](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/tech-keyboard-99988216/p)
* [Color: Yellow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/tech-keyboard-99988212/p)
* [Color: Gray](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/tech-keyboard-99988210/p)

SKU Selector

Used in Product Details Pages (PDPs) to display all the available variants for a given product.

* [BorderedTotal1x$2002x$2003x$204TableDisplays information in a friendly way, allowing users to scan for details quickly.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-table)
* [TagTagAre an interactive Badge. By default, its have a close button.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-tag)
* [Simple ToastToastUsed to display notifications.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-toast)
* [ToggleA customized checkbox input styled to look like a switch button.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-toggle)
* [LabelToggle FieldToggle Field wraps a Toggle input and its corresponding Label.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/molecules-toggle-field)

---

## [Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview)

* [Explore more about our amazing products](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-banner-text)[See more](/)
Banner Text
Used for advertising brands, products, and/or collections.
* [Open CartCart SidebarDisplays the summary of items added to the cart along with detailed information, and checkout option.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-cart-sidebar)
* [Your Cart is emptyStart ShoppingEmpty StateUsed to represent an empty state.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-empty-state)
* [FiltersPriceCategoryBrandOpen FiltersFilterFilters products inside the Product Listing Page (PLP) and Search Page.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-filter)
* [Open FiltersFilter SliderThe mobile Filter view that is rendered inside a SlideOver component.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-filter-slider)
* [![Controller on a table](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg)Explore our productsAll the amazing products from the brands we partner with.](https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-hero)[See more](/)
Hero
Full-width banner presented on the above-the-fold section of a web page.
* [![Magicwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000)![Magicwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000)![magicbox](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190923/lena-de-fanti-nQ_j5d-klVU-unsplash.jpg?v=637867501523500000)![magicblackwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)![magiccombo](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190925/maheshkumar-painam-GZdfLeL-MDk-unsplash.jpg?v=637867502064000000)![magicback](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190926/math-0U9fBLGP3EY-unsplash.jpg?v=637867502325830000)![magictable](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190927/marek-levak-YPeqMN_wfw0-unsplash.jpg?v=637867502641430000)![magichand](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190928/mouse8.jpg?v=637867504048970000)![magicstyle](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190929/harpal-singh-KuvEVL7lXYQ-unsplash.jpg?v=637867509459130000)![magicscale](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190930/chris-hardy-182PzOtcmWc-unsplash.jpg?v=637867509778300000)Image GalleryUsed when you want to display a series of photos in a gallery on a post or page.](https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-image-gallery)
* [Storefront](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-navbar)[Login](#)
Set location
   * [Office](#)
   * [Home Appliances](#)
   * [Computer and Software](#)
   * [Technology](#)
Navbar
Represents the page header and groups features like Search and Regionalization.
* [Open MenuNavbar SliderAs part of the Navbar, this component is its **mobile version** used to list the navigation links through the NavbarLinks.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-navbar-slider)
* [Get News and Special Offers!Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.NameEmailBy subscribing to our newsletter you agree to to our Privacy Policy.SubscribeNewsletterThe Newsletter component is a section that features a text input field and an action button, allowing users to subscribe to updates and newsletters.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-newsletter)
* [Out of StockNotify me when availableEmailNotify MeOut of StockUsed to announce to users that the product is out of stock.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-out-of-stock)
* [Payment MethodsAmexVisaDiners ClubMastercardElo CardPayPalPixStripeGooglePayApplePayPayment MethodsDisplays the logos of the available payment options in a store.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-payment-methods)
* [$0$500$100$250MinMaxPrice RangeSlider that allows users to select a maximum and minimum price from a range.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-price-range)
* [![appleblack](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190932/mouse-black.jpg?v=1767729450)](https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-product-grid)Apple Magic Mouse
Original price:$999Price:$950.04
* ![Monitor27](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190903/unsplash-monitor.jpg?v=1767729451)
### 4k Philips Monitor 27”
Original price:$490Price:$420
* ![echodotwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190904/unsplash-smart-speaker.jpg?v=1767978734)
### Echo Dot Smart Speaker
Original price:$310Price:$280
* ![aedleheadphone](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190901/unsplash-headphone.jpg?v=1766352858)
### Aedle VK-1 L Headphone
Original price:$150Price:$130
* ![oculus](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190900/unsplash-vr-glasses.jpg?v=1765997962)
### Oculus VR Headset
Original price:$344Price:$315
* ![hic](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/173596/est.jpg?v=1757659088)
### Apple AirPods Pro
Original price:$249Price:$229
* ![quidem](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/179130/sint.jpg?v=1757911413)
### Anker SoundCore Liberty Air
Original price:$643.71Price:$486.34
* ![dolore](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/171611/eius.jpg?v=1757657196)
### Fujifilm X-T1 Camera
Original price:$495.97Price:$366.11
* ![culpa](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/159818/debitis.jpg?v=1757639123)
### SANDMARC Fisheye Lens
Original price:$946.73Price:$636.05
* ![odio](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/181988/nulla.jpg?v=1757915578)
### Apple AirTag
Original price:$679.29Price:$426.14

Product Grid

A section generally used on PLP pages to list the products available in the store.

* [![appleblack](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190932/mouse-black.jpg?v=1767729450)](https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-product-shelf)Apple Magic Mouse
Original price:$999Price:$950.04
* ![Monitor27](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190903/unsplash-monitor.jpg?v=1767729451)
### 4k Philips Monitor 27”
Original price:$490Price:$420
* ![echodotwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190904/unsplash-smart-speaker.jpg?v=1767978734)
### Echo Dot Smart Speaker
Original price:$310Price:$280
* ![aedleheadphone](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190901/unsplash-headphone.jpg?v=1766352858)
### Aedle VK-1 L Headphone
Original price:$150Price:$130
* ![oculus](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190900/unsplash-vr-glasses.jpg?v=1765997962)
### Oculus VR Headset
Original price:$344Price:$315
* ![hic](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/173596/est.jpg?v=1757659088)
### Apple AirPods Pro
Original price:$249Price:$229

Product Shelf

Displays a list of products to be used as a section on the store.

* [Open Region ModalRegion ModalA Modal with some region configurations. The component is part of Regionalization feature](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-region-modal)
* [Search InputResponsible to receive, search and display suggestions. This component is part of the Search feature.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-search-input)
* [ShippingPostal Code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-shipping-simulation)[I don't know my Postal Code](/)
Shipping Simulation
Lets customers set the `PostalCode` and see the shipping options in the `PDP`.
* [RightSlide OverRepresents an aditional session that complements the screen's information.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/organisms-slide-over)

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/_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/faststore/components-index/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/index.mdx)

[Importing FastStore UI component styles« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/using-themes-importing-ui-components-styles)[AtomsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/atoms-overview)

On this page

ON THIS PAGE

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/components-index%23atoms)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/components-index%23molecules)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index/docs/guides/faststore/components-index%23organisms)

On this page

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


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

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

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

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

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

VTEX IO Apps

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

---

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Kit Look

Community extension

Version: 5.6.4

Latest version: 5.6.4

## ⚠ Maintenance ⚠

_Starting June 1st 2023, this application will no longer be maintained by VTEX._

---

The Kit Look app displays relevant products to the shopper at the time of purchase, increasing the store's product selling.

The customer can choose the items from the kit they want to buy or add the complete kit to the cart if they are interested in the combinations highlighted automatically by the store.

![{"base64":"  ","img":{"width":640,"height":1150,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","orientation":1,"length":91483,"url":"https://user-images.githubusercontent.com/1207017/64264890-6902f400-cf08-11e9-8916-2f281e7c2f51.jpg"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/1207017/64264890-6902f400-cf08-11e9-8916-2f281e7c2f51.jpg)

In the following sections, learn how to add the app to your store and configure it.

## Before you start

Set up the Kit with all the products that will be displayed. To do so, refer to the tutorial [Kit registration](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/kit-registration--tutorials%5F215).

## Step-by-step

### Step 1 - Installing the app

1. Go to the [VTEX App Store](https://read.calvincode.net/reader?url=https://apps.vtex.com/vtexbr-kitlook/p) and after logging into your account, click on `GET APP`.
2. You will be redirected to the checkout and choose a payment method since **the Kit Look is a paid app.**

> As the Kit look is a paid app, you will be charged a US$0.01 fee to validate your credit card information. This will be refunded as soon as the payment is approved.

Once you have paid for the app, it is installed in your account.

1. To finish this step, import it in your store's `peerDependencies` in `manifest.json`.

`1

{

2

 "peerDependencies": {

3

 "vtexbr.kitlook": "5.x"

4

 }

5

}

`

### Step 2 - Configuration

The Kit Look order by default is sorted by the productId in ascending order, but it is possible to configure it to respect the Kit order registration through the settings in the Kit Look app inside my applications.

Furthermore it is possible to select which components the kitlook block should render. The default configuration is shown in the image:

![{"base64":"  ","img":{"width":1270,"height":1314,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":167243,"url":"https://user-images.githubusercontent.com/67066494/205094714-ff95412e-c6ed-42bd-a011-b99c624a731b.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/67066494/205094714-ff95412e-c6ed-42bd-a011-b99c624a731b.png)

The `kitlook-layout` interface works by alternating the blocks if it detects that the product is a kit.

Therefore, you have to add its interface in your app store theme code. There are two ways to achieve this: Adding the `kitlook-layout` interface in the `interfaces.json` or `product.jsonc`.

Check out the following sections to add the `kitlook-layout` interface.

### Adding `kitlook-layout` in the `interfaces.json`

1. Allow the Kit look interfaces by adding the Kit Look in the `store.product` in `interfaces.json` of your app theme.

`1

// interfaces.json

2

{

3

 "store.product.kitlook": {

4

 "allowed": ["kitlook-layout", "kitlook"]

5

 }

6

}

`

1. Then, add the `kit look-layout` interface to the page you want to display a different block when the product is a kit.

`1

// product.json

2

{

3

 "store.product.kitlook": {

4

 "children": [

5

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

6

 "kitlook-layout", // <--- Here's our new block

7

 "flex-layout.row#description",

8

 "shelf.relatedProducts"

9

 ]

10

 },

11

 "kitlook-layout": {

12

 "children": [

13

 "flex-layout.row#product-main", // <--- The first child is for regular product

14

 "flex-layout.row#kitlook" // <--- The second one will show when a product is a kit

15

 ]

16

 }

17

}

`

> Keep in mind that the first block specified will always be for regular products, and the second one is for your custom product page that you want to display if the product is a kit.

1. In your second block, you can use the `kitlook` block to display the kit items. For example:

`1

// product.json

2

{

3

 "flex-layout.row#kitlook": {

4

 "props": {

5

 "colGap": 7,

6

 "rowGap": 7,

7

 "marginTop": 4,

8

 "marginBottom": 7,

9

 "paddingTop": 7,

10

 "paddingBottom": 7

11

 },

12

 "children": ["flex-layout.col#kitlook", "flex-layout.col#stack"]

13

 },

14

 "flex-layout.col#kitlook": {

15

 "props": {

16

 "colGap": 7,

17

 "rowGap": 7,

18

 "marginTop": 4,

19

 "marginBottom": 7,

20

 "paddingTop": 7,

21

 "paddingBottom": 7

22

 },

23

 "children": ["kitlook"]

24

 }

25

}

`

In the example above, we are reusing the `flex-layout.col#stack` block shared with your regular product blocks.

### Adding `kitlook-layout` in the `product.jsonc`

1. Add `product-details.kitlook` as a child in your `store.product` in `store/blocks/product.jsonc`.

`1

{

2

 "store.product": {

3

 "children": [

4

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

5

 "product-details.kitlook",

6

 "shelf.relatedProducts",

7

 "product-reviews",

8

 "product-questions-and-answers"

9

 ]

10

 },

11

 ...

12

}

`

1. In your `product-details.kitlook` add `kitlook` as a block.

`1

{

2

 "product-details.kitlook": {

3

 "blocks": [

4

 "kitlook",

5

 "product-images",

6

 "product-description",

7

 "product-specifications",

8

 "buy-button",

9

 "sku-selector",

10

 "shipping-simulator",

11

 "product-highlights",

12

 "availability-subscriber",

13

 "product-price",

14

 "product-name",

15

 "share#default"

16

 ],

17

 "props": {

18

 "displayVertically": true

19

 }

20

 }

21

}

`

## Customization

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

| CSS Handles        |
| ------------------ |
| kitlookContainer   |
| kitlookBox         |
| kitlookImage       |
| kitlookDetails     |
| kitlookName        |
| kitlookDescription |
| kitlookPrice       |
| kitlookButton      |
| kitlookCheckbox    |

### Product Summary

If you have any shelves which may display kits you need to replace the `product-summary` or `product-summary.shelf` interface with `product-summary.kitlook-layout` in those shelves in `store/blocks/home/home.jsonc`

`1

{

2

 "shelf#home": {

3

 "blocks": ["product-summary.kitlook-layout"],

4

 "props": {

5

 "orderBy": "OrderByTopSaleDESC",

6

 "paginationDotsVisibility": "desktopOnly",

7

 "skusFilter": "FIRST_AVAILABLE",

8

 "productList": {

9

 "maxItems": 10,

10

 "itemsPerPage": 5,

11

 "minItemsPerPage": 1.5,

12

 "scroll": "BY_PAGE",

13

 "arrows": true,

14

 "titleText": "Top sellers"

15

 }

16

 }

17

 }

18

}

`

> We recommend you do the same for your `gallery` block, so the new layout is used in search results and categories pages.

`1

{

2

 "gallery": {

3

 "blocks": ["product-summary.kitlook-layout"]

4

 }

5

}

`

Now that you're using `product-summary.kitlook-layout`, you may want to specify a custom block for your regular products and another for kitlook, so let's do that.

To do that, somewhere in your `blocks.json` add the block `product-summary.kitlook-layout`.

You can specify two children's blocks. The first will be displayed for regular products and the second for kitlooks.

`1

{

2

 "product-summary.kitlook-layout": {

3

 "children": ["product-summary.shelf", "product-summary.kitlook"]

4

 }

5

}

`

### Advanced

By default `product-summary.kitlook` displays a list with the name and price of the items in the kit.

However, it is possible to achieve a wide range of customizations using `product-summary-kitlook` ( different from the `product-summary.kitlook`)

You can specify any interface that a regular `product-summary` accepts, e.g., `product-summary-image`, `product-summary-buy-button`, to name a few.

You can also use `flex-layout` and `stack-layout` to achieve the maximum level of control.

Take a look at how to do that.

1. Create a new custom `product-summary.kitlook` so you can modify `product-summary-kitlook` and `product-summary-buy-button#kitlook` later on. For example:

`1

{

2

 "product-summary.kitlook#custom": {

3

 "children": [

4

 "product-summary-image",

5

 "product-summary-name",

6

 "product-summary-space",

7

 "product-summary-kitlook",

8

 "product-summary-buy-button#kitlook"

9

 ]

10

 }

11

}

`

1. Then, create a `flex-layout.row` and `flex-layout.col` columns to go inside it. In one column put the product image using `product-summary-image` and in the other `product-summary-name` and `product-summary-price`.

`1

{

2

 "product-summary-kitlook": {

3

 "children": ["flex-layout.row#product-summary-kitlook"]

4

 },

5

 "flex-layout.row#product-summary-kitlook": {

6

 "children": [

7

 "flex-layout.col#kit-item-image",

8

 "flex-layout.col#mini-summary"

9

 ],

10

 "props": {

11

 "colGap": 3,

12

 "border": ["top"],

13

 "borderWidth": 1,

14

 "borderColor": "silver",

15

 "paddingTop": 5

16

 }

17

 },

18

 "flex-layout.col#kit-item-image": {

19

 "children": ["product-summary-image"],

20

 "props": {

21

 "width": "33%"

22

 }

23

 },

24

 "flex-layout.col#mini-summary": {

25

 "children": ["product-summary-name", "product-summary-price#mini"],

26

 "props": {

27

 "horizontalAlign": "left"

28

 }

29

 },

30

 "product-summary-price#mini": {

31

 "props": {

32

 "showLabels": false,

33

 "showInstallments": false,

34

 "showListPrice": false

35

 }

36

 }

37

}

`

Everything put together:

`1

{

2

 "product-summary.kitlook-layout": {

3

 "children": ["product-summary.shelf", "product-summary.kitlook#custom"]

4

 },

5

 "product-summary.kitlook#custom": {

6

 "children": [

7

 "product-summary-image",

8

 "product-summary-name",

9

 "product-summary-space",

10

 "product-summary-kitlook",

11

 "product-summary-buy-button#kitlook"

12

 ]

13

 },

14

 "product-summary-kitlook": {

15

 "children": ["flex-layout.row#product-summary-kitlook"]

16

 },

17

 "flex-layout.row#product-summary-kitlook": {

18

 "children": [

19

 "flex-layout.col#kit-item-image",

20

 "flex-layout.col#mini-summary"

21

 ],

22

 "props": {

23

 "colGap": 3,

24

 "border": ["top"],

25

 "borderWidth": 1,

26

 "borderColor": "silver",

27

 "paddingTop": 5

28

 }

29

 },

30

 "flex-layout.col#kit-item-image": {

31

 "children": ["product-summary-image"],

32

 "props": {

33

 "width": "33%"

34

 }

35

 },

36

 "flex-layout.col#mini-summary": {

37

 "children": ["product-summary-name", "product-summary-price#mini"],

38

 "props": {

39

 "horizontalAlign": "left"

40

 }

41

 },

42

 "product-summary-price#mini": {

43

 "props": {

44

 "showLabels": false,

45

 "showInstallments": false,

46

 "showListPrice": false

47

 }

48

 },

49

 "product-summary-buy-button#kitlook": {

50

 "props": {

51

 "buyButtonBehavior": "alwaysGoToProduct"

52

 }

53

 }

54

}

`

After that, do not forget to change the default product page interface on **CMS > Pages** to use the `store.product.kitlook interface`.

You can expect to have a similar result as the following:

![{"base64":"  ","img":{"width":269,"height":541,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":89777,"url":"https://i.imgur.com/BopgrCF.png"}}](https://read.calvincode.net/reader?url=https://i.imgur.com/BopgrCF.png)

[Category Menu« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtexbr.kitlook/docs/apps/vtex.category-menu)[Icon Pack listNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtexbr.kitlook/docs/apps/vtex.store-icons/iconpack)

See also

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

ON THIS PAGE

[⚠ Maintenance ⚠](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtexbr.kitlook/docs/apps/vtexbr.kitlook%23-maintenance-)

[Before you start](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtexbr.kitlook/docs/apps/vtexbr.kitlook%23before-you-start)

[Step-by-step](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtexbr.kitlook/docs/apps/vtexbr.kitlook%23step-by-step)

[Step 1 - Installing the app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtexbr.kitlook/docs/apps/vtexbr.kitlook%23step-1-installing-the-app)[Step 2 - Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtexbr.kitlook/docs/apps/vtexbr.kitlook%23step-2-configuration)[Adding kitlook-layout in the interfaces.json](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtexbr.kitlook/docs/apps/vtexbr.kitlook%23adding-kitlook-layout-in-the-interfacesjson)[Adding kitlook-layout in the product.jsonc](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtexbr.kitlook/docs/apps/vtexbr.kitlook%23adding-kitlook-layout-in-the-productjsonc)

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

[Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtexbr.kitlook/docs/apps/vtexbr.kitlook%23product-summary)[Advanced](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtexbr.kitlook/docs/apps/vtexbr.kitlook%23advanced)

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 customize checkout confirmation pages 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/customize-checkout-confirmation-pages/docs/guides)

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

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

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/catalog-integration)

---

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

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/customization)

[Checkout customization guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/checkout-customization-guide)

[Customize checkout confirmation pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/customize-checkout-confirmation-pages)

[Change payment method names in Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/change-payment-method-names-in-checkout)

[Enable an Observation field on the Checkout page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/enable-an-observation-field-on-the-checkout-page)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/checkout-security)

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

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

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

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

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

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/checkout-error-codes)

---

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

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/api-reference)

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

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/storefront-development)

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/catalog-integration)

---

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

[Custom Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/custom-data-1)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/customization)

[Checkout customization guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/checkout-customization-guide)

[Customize checkout confirmation pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/customize-checkout-confirmation-pages)

[Change payment method names in Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/change-payment-method-names-in-checkout)

[Enable an Observation field on the Checkout page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/enable-an-observation-field-on-the-checkout-page)

[Discounts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/discounts)

[Features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/features)

[Order Placement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/orders-2)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/checkout-security)

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

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

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

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

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

[Checkout error codes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/checkout-error-codes)

---

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

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides)

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

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/customization)

[Customize checkout confirmation pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/customize-checkout-confirmation-pages)

Customize checkout confirmation pages

All order confirmation information at checkout is available on the Placed Orders and Order Confirmation pages. If the merchant wants to change some features on these UIs, VTEX also offers the option of customizing them.

Order Placed page example:

![{"base64":"  ","img":{"width":3239,"height":2174,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":531772,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/customize-checkout-confirmation-pages-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/customize-checkout-confirmation-pages-0.png)

In the Checkout section, located in the Admin VTEX side menu, you can access one or more websites (stores) registered in your account and perform checkout settings, including UI customization.

By clicking on the `blue gear` button of the chosen website, and selecting the **Code** tab, you will have access to a list of files and templates, where you can edit or import the HTML information.

> The same files shown in the Code tab are publicly available in the route `https://{accountName}.myvtex.com/files/`.

## Edit Information

To edit Checkout confirmation UI information, access the following templates:

* **checkout-confirmation-bottom**
* **checkout-confirmation-footer**
* **checkout-confirmation-header**
* **checkout-confirmation-top**

Code tab view:

![{"base64":"  ","img":{"width":1287,"height":839,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":46982,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/customize-checkout-confirmation-pages-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/customize-checkout-confirmation-pages-1.png)

> It is important to note that any customization performed on the templates will be applied to both pages at the same time (Order Placed and Order Confirmation).

Template areas on the page:

![{"base64":"  ","img":{"width":3239,"height":3245,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":650995,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/customize-checkout-confirmation-pages-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/customize-checkout-confirmation-pages-2.png)

## Customizing styles

You can also edit the Checkout Confirmation interface via CSS classes. Your styles should be added in a `<stile>` tag in one of the HTML templates loaded on the page.

CSS class areas on the page:

![{"base64":"  ","img":{"width":3239,"height":2174,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":564428,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/customize-checkout-confirmation-pages-3.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/customize-checkout-confirmation-pages-3.png)

To customize the Checkout Confirmation styles, use the following classes:

`1

.cconf-alert // Confirmation alert

2

.cconf-client-email // Element that carries customer's email

3

.cconf-address // Card with order address

4

.cconf-payment // Card with payment method

5

.cconf-summary // Card with order summary

6

.cconf-product-table // Table with product's orders

7

.cconf-product // Table's line with order

8

.cconf-continue-button // Button leading back to the store

`

## JS customization

The page may also be changed through Javascript using the files **checkout-confirmation-custom.js** or **checkout-confirmation-custom4.js** (depending on the version of Checkout confirmation you are using, v3 or v4), which can be accessed by selecting the **Code** tab at the Admin.

Contributors

2

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/_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/customization/customize-checkout-confirmation-pages.md)

[Checkout customization guide« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages//docs/guides/checkout-customization-guide)[Change payment method names in CheckoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages//docs/guides/change-payment-method-names-in-checkout)

Contributors

2

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

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

ON THIS PAGE

[Edit Information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/customize-checkout-confirmation-pages%23edit-information)

[Customizing styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/customize-checkout-confirmation-pages%23customizing-styles)

[JS customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/customize-checkout-confirmation-pages%23js-customization)

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/customization/customize-checkout-confirmation-pages.md)

Copy page

On this page

ON THIS PAGE

[Edit Information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/customize-checkout-confirmation-pages%23edit-information)

[Customizing styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/customize-checkout-confirmation-pages%23customizing-styles)

[JS customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/customize-checkout-confirmation-pages/docs/guides/customize-checkout-confirmation-pages%23js-customization)

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