Documentation
Feedback
Guides

Creating a Quickview using Modal Layout

Learn how to create a Quickview feature using the Modal Layout app.

In this guide, you'll learn how to configure a Quickview feature in your store using the Modal Layout app. The Quickview allows users to view product details directly from the homepage or category pages without navigating to the product detail page.

{"base64":"  ","img":{"width":2880,"height":1586,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1310565,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-modal-layout-0.png"}}

This guide is based on the Store Theme template, a boilerplate with pre-set configurations for creating a store using Store Framework. Learn more in Available templates.

Instructions

Step 1 - Adding the Modal Layout app to the theme's dependencies

  1. In a development workspace, open your Store Theme app using the code editor of your choice.

  2. Open the manifest.json file and add the Modal Layout app to your theme dependencies.

manifest.json

_10
"dependencies": {
_10
"vtex.modal-layout": "0.x",
_10
}

Step 2 - Configuring the quickview trigger

To enable the Quickview feature, define the trigger for the modal. The modal-trigger#quickview block activates the modal when the user interacts with the associated element (for example, a button). This block links the modal trigger to the modal-layout#quickview, which contains the modal layout.

  1. Open the quickview.jsonc file located in the store/blocks/product-summary folder.
  2. Add the modal-trigger#quickview block to trigger the Quickview modal. In this example, we're using icon-expand to represent the trigger.
store/blocks/product-summary/quickview.json

_10
"modal-trigger#quickview": {
_10
"children": [
_10
"icon-expand",
_10
"modal-layout#quickview"
_10
],
_10
"props": {
_10
"blockClass": "quickview"
_10
}
_10
},

  1. Add the modal-layout#quickview as a child of the modal-trigger#quickview block. This defines the modal layout.
store/blocks/product-summary/quickview.json

_10
"modal-trigger#quickview": {
_10
"children": [
_10
"icon-expand",
_10
"modal-layout#quickview"
_10
],
_10
"props": {
_10
"blockClass": "quickview"
_10
}
_10
},

Note that the children property specifies the elements inside the trigger block. In this case, it includes icon-expand, which represents the visual element that users interact with to open the modal, and modal-layout#quickview, which defines the modal layout displayed when the trigger is activated. The props section includes blockClass, a custom CSS class (Quickview) that allows you to style both the modal trigger and the modal itself.

Step 3 - Customizing the Quickview modal

To customize the Quickview, you can combine Modal Layout's native blocks, such as modal-header, modal-content, and modal-actions, with other native components to structure and display the modal content. The inner content may include elements such as product images, name, price, SKU selector, and actions like adding the product to the cart or viewing more details.

For example, you can use Flex Layout to define the rows and columns within your modal and leverage Product Summary blocks to render product information. Learn more in the guides available under Using components.

Check the quickview.json for a complete example and consult the Modal Layout documentation for further information on configuring and customizing your modal.

Step 4 - Making your changes publicly available

After testing your component, deploy the new version of your Store Theme app to make it publicly available. Follow the instructions in the guide Deploying a new app version.

Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page