[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 webops dashboard 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/webops-dashboard/docs/guides)

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

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

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

Storefront Development

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

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/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/webops-dashboard/docs/guides/faststore/getting-started-overview)

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

[Configuring production and preview branches in WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-configuring-production-and-preview-branches)

[Managing Secrets](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-managing-secrets)

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

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

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

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

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/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/webops-dashboard/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/webops-dashboard/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/webops-dashboard/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/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/webops-dashboard/docs/guides/faststore/getting-started-overview)

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

[Configuring production and preview branches in WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-configuring-production-and-preview-branches)

[Managing Secrets](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-managing-secrets)

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

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

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

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

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/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/webops-dashboard/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/webops-dashboard/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/webops-dashboard/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

FastStore WebOps - Dashboard

Once you [create your FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/1-onboarding-starting-the-project%23step-2-deploying-the-project) or if you're already working on customizing it, you can use the WebOps dashboard to see an overview of website deployments and performance.

The WebOps dashboard provides a comprehensive overview of website builds and deploy previews and offers suggestions on how to improve storefront performance based on [Lighthouse scores](https://read.calvincode.net/reader?url=https://developer.chrome.com/docs/lighthouse/performance/performance-scoring).

![{"base64":"  ","img":{"width":1303,"height":836,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":193459,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/dashboard-overview.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/dashboard-overview.png)

To access the WebOps dashboard, go to **Storefront > FastStore WebOps** in the VTEX Admin. The dashboard has four tabs: [Overview](#overview), [Deploys](#deploys), [Integrations](#integrations), and [Settings](#settings).

---

## Overview

The **Overview** tab provides a quick snapshot of key website details, including the live store URL, CMS information, and latest deployment.

### Production overview

The **Production overview** section provides the following information about the latest live store deployment:

| Field            | Description                                                                                |
| ---------------- | ------------------------------------------------------------------------------------------------ |
| **Live store**   | URL of your production environment accessible to shoppers.                                       |
| **Repository**   | GitHub repository associated with the project.                                                   |
| **Source**       | Commit for the current deployment, including date, time, and author.                             |
| **CMS provider** | Link to [Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-overview). |
| **CMS project**  | Link to the FastStore project in Headless CMS.                                                   |

#### Live deployment statuses

This section also displays the status of the live deployment:

* **Success:** The commit was deployed to the production environment and is live.
* **Queued:** The commit is waiting to be deployed.
* **In progress:** The commit is currently being deployed.
* **Failed:** The deployment failed. You can find more details by clicking the link below the `Deploy` button.

### Lighthouse scores

When your store goes live (in production), ensuring optimal performance and a good user experience is crucial. The Lighthouse scores section offers insights into four key areas, which help you understand their impact on store performance.

* **Performance:** Indicates how fast your pages load.
* **Accessibility:** Reflects how usable your pages are for people with disabilities.
* **Best practices:** Indicates how well your pages adhere to coding best practices.
* **SEO:** Reflects how well your pages are optimized for search engines.

These scores are based on the pages defined for testing in the [Integrations](#integrations) tab.

### Production deploys

This section lists recent deployments to your production store. Each item on the list is composed of the following:

![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIklEQVR4nGPw8vYSFhZesWJFQkICQ0xMjJKS0omTJ+rq6wBrvgl/wzpdeQAAAABJRU5ErkJggg==","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/dashboard-production-deploys___840fcb7b30bc2c7a1e4e5d1d255a58f9.png","width":644,"height":247,"type":"png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/dashboard-production-deploys___840fcb7b30bc2c7a1e4e5d1d255a58f9.png)

For a complete list of store deployments and their details, check the [Deploys](#deploys) tab.

### Preview deploys

This section lists all the deploy previews created for GitHub branches in your project repository. These previews are automatically available for each pull request opened in its corresponding branch. You can [configure which branches generate preview deployments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches%23configuring-preview-branch-filters) in the Integrations tab.

## Deploys

The **Deploys** tab provides insights into store deployments, including their status (success, failed, etc.). The table below summarizes the key features of the Deploys tab.

![{"base64":"  ","img":{"width":1401,"height":745,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":253908,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/deploys-webops.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/deploys-webops.png)

| **Feature**          | Description                                                                                |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 1 - Search bar       | Allows you to search by deploy ID, commit, message, or author.                                                                                |
| 2 - Pagination       | Allows you to navigate through pages of deployment data.                                                                                |
| 3 - Environment      | Filters deployments by environment: Production: The live store customers can interact with. Preview: Test environment for new features, design changes, and code modifications before releasing them to production.                                                                                |
| 4 - Branch           | Filters deployments by GitHub branches.                                                                                |
| 5 - Status           | Filters deployments by status: Queued: The deployment is waiting to be executed.In progress: The deployment is being executed.Success: The deployment was completed successfully.Failed: The deployment encountered an error and didn't complete as expected.                                                                                |
| 6 - Sort by          | Filters deployments by **Latest first** or **Oldest first**.                                                                                |
| 7 - Deployment table | Lists all store deployments with the following information: Score: Lighthouse score for the deployment.Source: Commit ID and branch.Author: Deployment author and the date and time of the deployment.Environment: The environment that was changed, Production or Preview.Deploy ID: The ID of the specific deployment.Status: The deployment status. |

### Deployment details

For more information, click any entry in the deployment table.

![{"base64":"  ","img":{"width":1401,"height":745,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1206808,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/deployment-details___011bb7391157ad21eb965d8bcfc75b03.gif"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/deployment-details___011bb7391157ad21eb965d8bcfc75b03.gif)

In the **Deploy Steps** section, select a step (example: **Build - Discovery**) to view logs. The logs show on the right and help diagnose failed deployments.

## Integrations

The **Integrations** tab allows you to configure branch settings and store pages for Lighthouse tests. The tab contains the following sections:

1. **[Production branch](#production-branch):** Configures which Git branch generates production builds for your account.
2. **[Preview branches](#preview-branches):** Controls which branches generate preview deployments.
3. **[Lighthouse scores](#lighthouse-scores):** Configures store pages for Lighthouse testing.

![{"base64":"  ","img":{"width":1444,"height":667,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":3470176,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/customizing-branches-integrations___ae60f6b2b7c97b7200d8b8295fe7c755.gif"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/customizing-branches-integrations___ae60f6b2b7c97b7200d8b8295fe7c755.gif)

### Production branch

The **Production branch** section allows you to configure which Git branch generates production builds for your account.

### Preview branches

The **Preview branches** section allows you to control which branches generate preview deployments by including or excluding patterns.

#### Rules

In the **Rules** subsection, you can manage your rules, by editing or removing them.

> For detailed instructions on branch configuration, see the guide [Configuring production and preview branches in WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-configuring-production-and-preview-branches).

### Lighthouse scores

The **Lighthouse scores** section allows you to configure store pages for Lighthouse testing. You can specify the URLs for a product listing page (PLP) and a product details page (PDP) to undergo automatic Lighthouse score testing during deployments, ensuring a consistent testing experience.

To set the pages you want to test with Lighthouse, follow these steps:

1. In the **Path for a PLP** field, enter the [category](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/what-is-a-category--6HV4Q3E2FauUoOQoiCCgCg) slug defined in the Catalog.
2. In the **Path for a PDP** field, enter the slug for the specific PDP you want to test.
3. Click `Save`.

Once you've set the pages for testing and after a new deployment, go to the **Overview** tab and access the **Lighthouse scores** section to check the scores for those pages.

## Settings

The **Settings** tab is where you manage the following configurations:

* [**Production domain**](#production-domain): Sets the primary URL customers use to access the live store.
* [**Secrets**](#secrets): Stores and allows secure management of sensitive information, such as API keys and passwords, required during FastStore deployment.

![{"base64":"  ","img":{"width":775,"height":1144,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":66840,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/secrets-webops___2869e469b5a613f389f19cc555f4c3c5.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/secrets-webops___2869e469b5a613f389f19cc555f4c3c5.png)

### Production domain

As part of the [go-live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-overview) process, you must define the production domain of the store, the main URL customers will use to access your store.

> Before adding the domain, make sure the [external DNS settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-1-configuring-external-dns) are correctly configured in your VTEX account settings.

In the **Production domain** section, select the store domain from the dropdown list in the **Host** field and click `Add` to set up the primary domain of your store.

#### Current domains

The **Current domains** section displays the default and primary domains configured for your store. This section is a reference point to ensure your domains are correctly set up in WebOps. By checking this list, you can confirm whether your domains have been successfully added and are ready for use in the FastStore environment.

> If your domain isn't listed, there might be an issue with the configuration or DNS settings that you need to address before proceeding with the go-live. If you follow the [external DNS settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/go-live-1-configuring-external-dns) guide correctly, and the problem persists, open a ticket with [VTEX Support](https://read.calvincode.net/reader?url=https://help.vtex.com/en/support).

### Secrets

Secrets are encrypted credentials, like API keys and passwords, that require secure management during FastStore deployment. Standardizing secret management via WebOps enhances security and consistency across deployment providers.

In the **Secrets** section, define the **Key** and **Value** in their respective fields and click `Add` to set up the secret.

> Learn more about Secrets in [Managing secrets](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/security-managing-secrets).

#### Current keys

The **Current keys** section lists all secrets configured for your store. This list shows each secret’s key (the identifier), while the value is hidden by default for security reasons. You can toggle the visibility of a secret’s value if needed.

In this section, you can update or delete an existing secret by clicking `⋮` and selecting the corresponding option, `Edit` or `Delete`.

## Deleting the project

To delete your FastStore project, click the **More actions menu** (`⋮`). Then, click **Delete project**.

A modal to confirm your action will open.

> Proceed with caution. Deleting the project can't be undone, and all deployments and associated domains will be permanently removed.

Contributors

2

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

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/docs/getting-started/webops/dashboard.mdx)

[Glossary« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/getting-started-glossary)[Configuring production and preview branches in WebOpsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-configuring-production-and-preview-branches)

Contributors

2

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

ON THIS PAGE

[Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23overview)

[Production overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23production-overview)[Lighthouse scores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23lighthouse-scores)[Production deploys](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23production-deploys)[Preview deploys](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23preview-deploys)

[Deploys](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23deploys)

[Deployment details](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23deployment-details)

[Integrations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23integrations)

[Production branch](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23production-branch)[Preview branches](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23preview-branches)[Lighthouse scores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23lighthouse-scores)

[Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23settings)

[Production domain](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23production-domain)[Secrets](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23secrets)

[Deleting the project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23deleting-the-project)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/getting-started/webops/dashboard.mdx)

Copy page

On this page

ON THIS PAGE

[Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23overview)

[Production overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23production-overview)[Lighthouse scores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23lighthouse-scores)[Production deploys](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23production-deploys)[Preview deploys](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23preview-deploys)

[Deploys](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23deploys)

[Deployment details](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23deployment-details)

[Integrations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23integrations)

[Production branch](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23production-branch)[Preview branches](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23preview-branches)[Lighthouse scores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23lighthouse-scores)

[Settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23settings)

[Production domain](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23production-domain)[Secrets](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23secrets)

[Deleting the project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/webops-dashboard/docs/guides/faststore/webops-dashboard%23deleting-the-project)

On this page

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


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

[User] Provide a guide on guides activity flow 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/activity-flow/docs/guides)

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

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

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

[Installing Activity Flow in Headless stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/activity-flow/docs/guides/installing-activity-flow-in-headless-stores)

[Installing Activity Flow in mobile apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/activity-flow/docs/guides/installing-activity-flow-in-mobile-apps)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

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

[Installing Activity Flow in Headless stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/activity-flow/docs/guides/installing-activity-flow-in-headless-stores)

[Installing Activity Flow in mobile apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/activity-flow/docs/guides/installing-activity-flow-in-mobile-apps)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/activity-flow/docs/guides/activity-flow)

VTEX Activity Flow

Get started with Activity Flow, VTEX's Real User Monitoring (RUM) solution.

Activity Flow is the VTEX solution for Real User Monitoring (RUM) that captures and analyzes shopper navigation actions to generate metrics and insights that help improve user experience.

The tool tracks page views and sessions, offering a real-time view of the shopper journey. It captures clicks, views, and impressions to evaluate engagement in the products. Additionally, it assesses Web Vitals performance metrics and analyzes HTTP requests to identify failures that may impact the user experience. When integrated with [VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-ads), Activity Flow also captures ad events, such as impressions and clicks.

This guide provides an overview of the Activity Flow architecture and how to get started with its tracking capabilities.

> Manual configuration of Activity Flow is only required for headless stores or mobile apps. For setup instructions, see [Next steps](#next-steps)
>
> If your store uses VTEX’s native storefront solutions (FastStore, Store Framework, or the Legacy CMS Portal), no additional configuration is needed.

## Activity Flow architecture

The Activity Flow architecture is designed to have minimal impact on performance thanks to efficient data handling and task scheduling. It consists of the following stages:

![{"base64":"  ","img":{"width":567,"height":364,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":32168,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/af_architecture___c8a37d3ebe11d9bfaf290c0b4d1d9b1b.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/af_architecture___c8a37d3ebe11d9bfaf290c0b4d1d9b1b.png)

1. **Collect events:** Collects client signals at a backend endpoint, validates them, and routes valid items to durable queues while logging or rejecting malformed submissions.
2. **Buffer events:** Buffers incoming events to smooth traffic spikes and keep processing steady, grouping or streaming items to allow consumers to read them in order without overload.
3. **Process and store events:** Processes buffered data by cleaning, enriching, and deduplicating it, then stores the results in persistent systems to produce query-ready datasets for analysis.

## Next steps

Activity Flow is natively installed in all VTEX accounts. To install it in your headless store or in your mobile app, follow the corresponding guide below.

[Installing Activity Flow in Headless storesLearn how to install Activity Flow in your Headless store.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/activity-flow/docs/guides/installing-activity-flow-in-headless-stores)[Installing Activity Flow in mobile appsLearn how to install Activity Flow in mobile apps.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/activity-flow/docs/guides/installing-activity-flow-in-mobile-apps)

Contributors

1

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

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/Activity-Flow/activity-flow.md)

[Storefront Permissions Overview« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/activity-flow//docs/guides/storefront-permissions)[Installing Activity Flow in Headless storesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/activity-flow//docs/guides/installing-activity-flow-in-headless-stores)

Contributors

1

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

ON THIS PAGE

[Activity Flow architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/activity-flow/docs/guides/activity-flow%23activity-flow-architecture)

[Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/activity-flow/docs/guides/activity-flow%23next-steps)

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/Activity-Flow/activity-flow.md)

Copy page

On this page

ON THIS PAGE

[Activity Flow architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/activity-flow/docs/guides/activity-flow%23activity-flow-architecture)

[Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/activity-flow/docs/guides/activity-flow%23next-steps)

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 product summary productsummaryimage app? Provide documentation and configuration details.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/ProductSummaryImage/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/ProductSummaryImage/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/ProductSummaryImage/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/ProductSummaryImage/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/ProductSummaryImage/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/ProductSummaryImage/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/ProductSummaryImage/updates/release-notes)

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

Product Summary Image

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

Version: 2.91.0

Latest version: 2.91.0

`product-summary-image` is a block exported by the [Product Summary app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary) that renders the product image.

![{"base64":"  ","img":{"width":2878,"height":1504,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":674472,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummaryimage-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummaryimage-0.png)

## Configuration

1. Import the `vtex.product-summary` app to your theme dependencies in the `manifest.json`:

`1

 "dependencies": {

2

 "vtex.product-summary": "2.x"

3

 }

`

1. Add the `product-summary-image` block as a child of the `product-summary.shelf` block:

`1

{

2

 "shelf#home": {

3

 "blocks": ["product-summary.shelf"]

4

 },

5

 "product-summary.shelf": {

6

 "children": [

7

 "product-summary-name",

8

 "product-summary-description",

9

 "product-summary-image",

10

 "product-summary-price",

11

 "product-summary-sku-selector",

12

 "product-summary-buy-button"

13

 ]

14

 },

`

1. Then, declare the `product-summary-image` and configure its behavior using the props stated below.

`1

 "product-summary-image": {

2

 "props": {

3

 "showBadge": true,

4

 "height": 220

5

 }

6

 }

7

}

`

| Prop name       | Type    | Description                                                                                | Default value |
| --------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| showBadge       | boolean | Determines whether a discount badge is displayed on the product image. Setting it to true displays the badge if applicable, while false hides it.                                                                                | true          |
| badgeText       | string  | Specify the text to be displayed on the discount badge (if the badge is configured to be shown in the product image).                                                                                | undefined     |
| showCollections | boolean | ![{"base64":"  ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Deprecated-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Deprecated-red) Determines whether collection badges, if available, will be displayed (true) or not (false). This prop is deprecated. Use the \[Product Highlights\] component instead.                                                                                | false         |
| displayMode     | enum    | Defines the Product Summary Image display mode. Possible values are: normal and inline.                                                                                | normal        |
| placeholder     | string  | Defines the Product Summary Image placeholder image.                                                                                | undefined     |
| mainImageLabel  | string  | Matches the value defined in the imageLabel field from the Admin Catalog. When matched, it determines which product image will be used as the main image displayed in the Product Summary component.                                                                                | undefined     |
| hoverImageLabel | string  | ![{"base64":"  ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Deprecated-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Deprecated-red) Text value that matches the value defined in the imageLabel field from the Admin Catalog. When matched, it determines which product image will be displayed when the user hovers over the product. If you set a label and no match is found, no image will be displayed during hover. This prop is deprecated. Use the hoverImage prop instead. | undefined     |
| hoverImage      | object  | Defines the criteria that should determine the hover image based on the product images in the Admin Catalog.                                                                                | undefined     |
| width           | object  | Defines the Product Summary Image width.                                                                                | undefined     |
| height          | object  | Defines the Product Summary Image height.                                                                                | undefined     |
| aspectRatio     | object  | Defines the aspect ratio of the Product Summary Image, determining whether the image should be displayed in a square, portrait, landscape, or another format. The prop value should follow the [standard aspect ratio notation](https://read.calvincode.net/reader?url=https://en.wikipedia.org/wiki/Aspect%5Fratio%5F%28image%29), which consists of two numbers separated by a colon. For example, you can use 1:1 for a square format or 3:4 for an upright portrait. This prop will not work if the width or height props are configured.                                                               | undefined     |
| maxHeight       | object  | Sets the maximum height for the Product Summary Image. This prop will only work if the width or height props are configured.                                                                                | undefined     |
| fetchpriority   | string  | Sets the fetch priority hint to ('high', 'low', 'auto', or 'byPosition'). Choose 'byPosition' to adjust the image fetch priority based on its rendering position within search results or lists. This prioritization optimizes performance by ensuring images are fetched based on their relevance in the context.                                                                                | 'byPosition'  |

* `mainImageLabel` object:

| Prop name          | Type   | Description                                                                                | Default value |
| ------------------ | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| label              | string | Matches the text value with the value defined in the imageLabel field from the Admin Catalog. When matched, it determines which product image will be displayed as the main image in the Product Summary component. If you set a label and no match is found, the main image of the product will be shown instead.                                                                                | undefined     |
| labelMatchCriteria | enum   | Specifies the criteria for searching the image label value. It determines whether the image label should match exactly as provided or if it just needs to contain the substring anywhere in the image label. Possible values are: exact (finds the image that matches exactly the string entered in the label field) and contains (finds the first image that includes the substring entered in the label field). | exact         |

* `hoverImage` object:

| Prop name          | Type   | Description                                                                                | Default value |
| ------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| criteria           | enum   | Defines the criteria that should determine the hover image based on the product images from the Admin Catalog. Possible values are: label (the hover image will be the one that matches the label value) and index (the hover image will be the one with the same index value).                                                                                | label         |
| label              | string | Determines the text string to match the desired image's label value. No image will be displayed during the hover if no match is found. _Caution_: This prop should only be used when the criteria prop is set to label.                                                                                | undefined     |
| labelMatchCriteria | enum   | Defines the criteria for searching the image label value, determining whether the image label should match exactly as provided or just need to contain the substring anywhere in the image label. Possible values are: exact (finds the image that matches exactly the string entered the label field) and contains (finds the first image that includes the substring entered the label field). _This prop should only be used when the criteria prop is set to label_. | exact         |
| index              | number | Index number to match with the desired images. No image will be displayed during hover if no match is found. _This prop should only be used when the criteria prop is set to index_.                                                                                | undefined     |

* `width` object:

| Prop name | Type   | Description                    | Default value |
| --------- | ------ | ------------------------------ | ------------- |
| desktop   | number | Image width for desktop users. | undefined     |
| mobile    | number | Image width for mobile users.  | undefined     |

* `height` object:

| Prop name | Type   | Description                     | Default value |
| --------- | ------ | ------------------------------- | ------------- |
| desktop   | number | Image height for desktop users. | undefined     |
| mobile    | number | Image height for mobile users.  | undefined     |

* `aspectRatio` object:

| Prop name | Type   | Description                           | Default value |
| --------- | ------ | ------------------------------------- | ------------- |
| desktop   | string | Image aspect ratio for desktop users. | undefined     |
| mobile    | string | Image aspect ratio for mobile users.  | undefined     |

* `maxHeight` object:

| Prop name | Type   | Description                             | Default value |
| --------- | ------ | --------------------------------------- | ------------- |
| desktop   | string | Image maximum height for desktop users. | undefined     |
| mobile    | string | Image maximum height for mobile users.  | undefined     |

The `width`, `height`, `aspectRatio`, and `maxHeight` props use the [responsive values logic](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/responsive-values%23vtexresponsive-values).

## Customization

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

| CSS handles         |
| ------------------- |
| hoverImage          |
| hoverEffect         |
| imageContainer      |
| imageInline         |
| imageNormal         |
| imageStackContainer |
| mainImageHovered    |

See also

[Vtex.product SummaryVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/ProductSummaryImage/docs/apps/vtex.product-summary)[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

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

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

Was this helpful?

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