---
updatedAt: 2025-05-14T08:16:09.000Z
agentTools:
projectIndex: https://learn.vtex.com/llms.txt
---
# Quick View
{`
`}
# Quick View
## Introdução
Seguiremos os conceitos aprendidos no passo anterior e vamos aprofundar um pouco mais para aprender como construir o comportamento de *Quick View* em uma prateleira de produtos.
## Atividade
1. Adicione uma prateleira na sua página inicial:
```diff
{
"store.home": {
"blocks": [
...
+ "list-context.product-list"
]
},
+ "list-context.product-list": {
+ "blocks": ["product-summary.shelf"],
+ "children": ["slider-layout"]
+ },
+ "product-summary.shelf": {
+ "children": [
+ "product-summary-name",
+ "product-selling-price"
+ ]
+ }
}
```
2. No `product-summary` adicione um *trigger* para o modal:
```diff
{
...
"product-summary.shelf": {
"children": [
+ "modal-trigger#quickview",
"product-summary-name",
"product-selling-price"
]
}
}
```
3. Vamos, então, fazer com que o *trigger* para o modal seja a imagem do produto e definir que usaremos um *layout*:
```diff
{
...
"product-summary.shelf": {
"children": [
"modal-trigger#quickview",
"product-summary-name",
"product-selling-price"
]
},
+ "modal-trigger#quickview": {
+ "children": ["product-summary-image", "modal-layout#quickview"]
+ }
}
```
4. Para fechar vamos definir um simples modal com algumas opções de produto:
```diff
{
...
+ "modal-layout#quickview": {
+ "children": [
+ "product-summary-name",
+ "product-images",
+ "product-summary-sku-selector",
+ "product-summary-quantity",
+ "add-to-cart-button"
+ ]
+ }
}
```
O resultado, então, deve ser:
### Está com dúvidas?
Veja o [gabarito para esta etapa](https://learn.vtex.com/docs/course-layout-blocks-step07quick-view-answersheet-lang-pt) ou acompanhe nosso [office hours](https://www.youtube.com/c/VTEXDevelopers)
Ajude-nos a fazer este conteúdo melhor!
Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!