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

[User] Provide a guide on guides vtex io documentation creating a development workspace in VTEX.

[Assistant]
Documentation

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

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-workspace)

[Creating a Development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-development-workspace)

[Creating a Development workspace for a Legacy CMS store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-development-workspace-for-cms-legacy)

[Creating a Production workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-production-workspace)

[Workspace behavior with app installations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-workspace-behavior-with-app-installations)

[Best practices on workspaces management](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-workspaces-best-practices)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-getting-started)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-workspace)

[Creating a Development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-development-workspace)

[Creating a Development workspace for a Legacy CMS store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-development-workspace-for-cms-legacy)

[Creating a Production workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-production-workspace)

[Workspace behavior with app installations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-workspace-behavior-with-app-installations)

[Best practices on workspaces management](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-workspaces-best-practices)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/app-development)

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-workspace)

[Creating a Development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-development-workspace)

Creating a Development workspace

Learn how to create and use a Development workspace.

Development [workspaces](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-workspace/) allow you to [link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app/), [publish](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-publishing-an-app/), and [install](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-an-app/) apps. These workspaces provide greater freedom in code development without affecting user traffic and the live store.

Since Development workspaces operate in isolation from user traffic, they are ideal for making code changes. Note: Development workspaces cannot be [promoted to Master](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-promoting-a-workspace-to-master/) or used for [A/B testing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing/); these capabilities are reserved for [Production workspaces](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-production-workspace/).

## Instructions

1. [Log in to](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference) the desired VTEX account.
2. Create a development workspace by running the following command:
`1
vtex use {workspaceName}
`
> Replace `{workspaceName}` according to your scenario.

## Next steps

Embark on your development journey by creating a new app using our [template apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/code-samples) or [build from scratch](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-getting-started). [Link your app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app/) and initiate the development process. Once satisfied with the changes in your Development workspace, change to the next phase by creating a [Production workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-production-workspace). This step ensures comprehensive testing of your modifications under real user traffic conditions.

## Deleting a workspace

You can manually delete workspaces that are no longer in use by running the following command:

`1

vtex workspace delete {workspaceName}

`

> Deleting a workspace is irreversible, and its content cannot be restored.

## Development workspace behavior

In Development workspaces, certain actions are permitted while others are restricted to maintain stability and reliability. Here is a summary of allowed and restricted actions:

| Action                                                                                | Allowed |
| ------------------------------------------------------------------------------------------------------------------- | ------- |
| [Install apps.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-an-app)                    | ✅       |
| [Run A/B tests.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing)           | ❌       |
| Handle traffic.                                                                                | ❌       |
| [Promote to master.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-promoting-a-workspace-to-master) | ❌       |
| App development.                                                                                | ✅       |
| [Link an app.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app)                        | ✅       |
| [Publish an app.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-publishing-an-app)                  | ✅       |

## Key considerations

* **Workspace inheritance:** Production workspaces are initiated independently and do not inherit code changes from a [Development workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace). Therefore, any modifications made in a Development workspace must be manually replicated to the new Production workspace.
* **Data persistency:** Workspace settings persist unless conflicts arise with the Master workspace. In such cases, Master settings take precedence over settings in other workspaces, including the Development ones.
* **Expiration:** Once created, Production workspaces have no expiration date.
* **Deletion:** Unused workspaces are not automatically deleted. Manually deleting unused workspaces is recommended to optimize platform resources and maintain an efficient operational state.
* **Organization:** Maintain a concise list of workspaces for organizational and resource efficiency reasons.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/App-Guides/configuring-workspaces/vtex-io-documentation-creating-a-development-workspace.md)

[Workspace« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace//docs/guides/vtex-io-documentation-workspace)[Creating a Development workspace for a Legacy CMS storeNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace//docs/guides/vtex-io-documentation-creating-development-workspace-for-cms-legacy)

Contributors

1

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

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-development-workspace%23instructions)

[Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-development-workspace%23next-steps)

[Deleting a workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-development-workspace%23deleting-a-workspace)

[Development workspace behavior](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-development-workspace%23development-workspace-behavior)

[Key considerations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-development-workspace%23key-considerations)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/App-Guides/configuring-workspaces/vtex-io-documentation-creating-a-development-workspace.md)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-development-workspace%23instructions)

[Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-development-workspace%23next-steps)

[Deleting a workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-development-workspace%23deleting-a-workspace)

[Development workspace behavior](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-development-workspace%23development-workspace-behavior)

[Key considerations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace/docs/guides/vtex-io-documentation-creating-a-development-workspace%23key-considerations)

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 vtex io documentation getting started with lighthouse in VTEX.

[Assistant]
Documentation

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

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/updates/release-notes)

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-best-practices)

[Accessibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-accessibility)

[Analytics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-analytics)

[Performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-performance)

[Getting started with Lighthouse](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-seo)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/updates/release-notes)

Storefront Development

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-best-practices)

[Accessibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-accessibility)

[Analytics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-analytics)

[Performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-performance)

[Getting started with Lighthouse](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-seo)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/storefront-development)

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-best-practices)

[Performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-performance)

[Getting started with Lighthouse](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse)

Getting started with Lighthouse

Explore how to leverage Google Lighthouse to improve your store's overall performance.

![](https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/images/vtex-io-documentation-getting-started-with-lighthouse-3.png)

How users experience your website directly impacts relevant ecommerce metrics, such as user session time and sales conversion rate. Adopting the right tools and strategies to understand how shoppers perceive and interact with your website is important to improving your store performance. One of the most cutting-edge tools available for assessing your website performance from the user's point of view is [Google Lighthouse](https://read.calvincode.net/reader?url=https://developer.chrome.com/docs/lighthouse/overview).

In this guide, learn how [Google Lighthouse](https://read.calvincode.net/reader?url=https://developer.chrome.com/docs/lighthouse/overview) can help you to optimize your website.

## Lighthouse overview

[Lighthouse](https://read.calvincode.net/reader?url=https://developer.chrome.com/docs/lighthouse/overview) is a free, open-source tool developed by Google that identifies common issues and provides insights into a website performance, usability, and overall quality.

By auditing a web app URL, Lighthouse generates detailed reports detailing how the page performs based on web standards and developers' best practices. These insights help enhance the website quality and user experience.

Lighthouse audits are grouped into five categories:

* [**Performance**](https://read.calvincode.net/reader?url=https://web.dev/lighthouse-performance): Evaluates how users perceive and experience a web page by testing key web metrics.
* [**Accessibility**](https://read.calvincode.net/reader?url=https://web.dev/lighthouse-accessibility/): Assesses the page usability for people with disabilities or impairments.
* [**SEO**](https://read.calvincode.net/reader?url=https://web.dev/lighthouse-seo/): Checks if the page is optimized for search engine results ranking.
* [**Best practices**](https://read.calvincode.net/reader?url=https://web.dev/lighthouse-best-practices/): Assesses the overall code health of a webpage. Lighthouse also runs checks for best practices in modern web development, focusing on security aspects.

## Running Lighthouse audits

You can conduct a Lighthouse audit in different ways: using [PageSpeed Insights](https://read.calvincode.net/reader?url=https://pagespeed.web.dev/), [Chrome DevTools](https://read.calvincode.net/reader?url=https://developer.chrome.com/docs/lighthouse/overview/%23devtools), the [command line](https://read.calvincode.net/reader?url=https://developer.chrome.com/docs/lighthouse/overview/%23cli), or a [Chrome extension](https://read.calvincode.net/reader?url=https://developer.chrome.com/docs/lighthouse/overview/%23extension).

> Although Lighthouse is a powerful tool for inspecting web page quality, it operates only at the URL level. To ensure comprehensive coverage of the web page quality, we strongly recommend testing at least the Home page, a Product Details Page (PDP), and a Collection page of your store.

### FastStore WebOps - Lighthouse scores

For stores using [FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore), you can run Lighthouse audit using the methods presented in the previous section. You can also streamline your web audits by using the [Lighthouse scores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/1-onboarding-dashboard%23lighthouse-scores) tool for the [FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project) app.

![{"base64":"  ","img":{"width":1079,"height":333,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":21135,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/lighthouse-scores-webops___f9a501c9132684e7398456db26da2547.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/lighthouse-scores-webops___f9a501c9132684e7398456db26da2547.png)

Checking these reports helps you keep track of how each PR affects your store performance, SEO, and accessibility.

Lighthouse reports is a native WebOps tool. For more information about using this tool, see the [Lighthouse scores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/1-onboarding-dashboard%23lighthouse-scores) documentation.

## Performance audit

When you submit a URL to Lighthouse to audit your web page performance, it creates a report with the following information:

* [**Performance score and metrics**](#performance-score-and-metrics): A weighted average of _Metrics scores_ and results of independent metrics that aim to represent the user's perception of performance.
* [**Opportunities**](#opportunities): Suggestions and documentation on how to improve page load speed, with estimated potential savings.
* [**Diagnostics**](#diagnostics): Additional guidance that developers can explore to further enhance page performance.
* [**Passed audits**](#passed-audits): Suggestions from _Opportunities_ and _Diagnostics_ that have already been implemented on the page.
* [**Additional information**](#additional-information): Details about the sampled data, including the data collection period, devices used for emulation, Chrome version, etc.

In general, only **Metrics** — not the outcomes of **Opportunities** and **Diagnostics** — directly affect the overall **Performance score**. However, there is an indirect relationship because implementing the suggestions from Opportunities and Diagnostics will likely improve the Metric scores as well.

### Performance score and metrics

The Lighthouse **Performance score** provides an estimated representation of user perception of performance. While a computer may define performance by the time it takes for the entire page to load, this specific metric doesn't always reflect what the user values. From the user's point of view, performance is a perception of how they experience the page loading and how responsive it feels during use.

To ensure Lighthouse metrics are relevant to users, they are structured around a few key questions:

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

1. **Is it happening?** When the first visual activities occur and the user notices that the page is loading. If the server doesn't respond quickly, the user may feel there is a problem and leave the page.
2. **Is it useful?** When enough valuable content is rendered. This moment can keep the user engaged.
3. **Is it usable?** When the UI seems ready for interaction. This moment can be frustrating if users try to interact with visible content but the page is still processing.
4. **Is it delightful?** The moment after loading that guarantees smooth and lag-free interactions.

Given these four moments during the page load journey, a series of individual metrics were created to reflect what could be relevant for users in each moment. These metrics include the time it takes for the first contentful paint to be displayed and for the page to become interactive. A weighted average of these metrics determines the final Lighthouse **Performance score**:

| Audit                                                               | Weight |
| ------------------------------------------------------------------- | ------ |
| [Total Blocking Time (TBT)](#total-blocking-time-tbt--30)           | 30%    |
| [Largest Contentful Paint (LCP)](#largest-contentful-paint-lcp--25) | 25%    |
| [Cumulative Layout Shift (CLS)](#cumulative-layout-shift-cls--25)   | 25%    |
| [First Contentful Paint (FCP)](#first-contentful-paint-fcp--10)     | 10%    |
| [Speed Index (SI)](#speed-index-si--10)                             | 10%    |

The following sections briefly explain each of these metrics. Notice that the **Total Blocking Time**, **Largest Contentful Paint**, and **Cumulative Layout Shift** have higher weights and, consequently, a greater impact on the overall **performance score**. Therefore, paying close attention to these two metrics is essential.

> Due to frequent adjustments to Google's ranking formula, the overall **performance score** may vary over time. To stay up to date with Lighthouse's latest updates, we recommend visiting the [Lighthouse performance scoring](https://read.calvincode.net/reader?url=https://developer.chrome.com/docs/lighthouse/performance/performance-scoring) article.

When running Lighthouse, you will notice that the metric results follow a color code based on the following ranges:

| Code | Meaning           | Range  |
| ---- | ----------------- | ------ |
| ▲    | Poor              | 0–49   |
| ■    | Needs improvement | 50–89  |
| ●    | Good              | 90–100 |

#### Total Blocking Time (TBT) | 30%

The [**Total Blocking Time (TBT)**](https://read.calvincode.net/reader?url=https://web.dev/lighthouse-total-blocking-time/) is the amount of time between the [**First Contentful Paint (FCP)**](https://read.calvincode.net/reader?url=https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint) and [**Time to Interactive (TTI)**](https://read.calvincode.net/reader?url=https://developer.chrome.com/docs/lighthouse/performance/interactive) during which user inputs, such as mouse clicks, screen taps, or keyboard presses, are blocked. When a page has a long TBT, the user may notice the delay and perceive the page as sluggish.

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

User interaction is blocked when a long task blocks the main thread and prevents the browser from responding to other requests. Blocking time starts to count after 50ms. For example, if a function takes 150ms to execute, the blocking time would be 100ms. Therefore, the **Total Blocking Time** of a page is the sum of the blocking time for each long task that occurs during page load.

See below how Lighthouse classifies TBT times:

| TBT time (milliseconds) | Color-coding        |
| ----------------------- | ------------------- |
| Over 600                | ▲ Poor              |
| 200 – 600               | ■ Needs improvement |
| 0 – 200                 | ● Good              |

TBT is mainly affected by the parsing and execution of JavaScript and third-party scripts. Besides removing or reducing JavaScript code, you can improve TBT by splitting long tasks into smaller ones, improving code efficiency, and implementing lazy loading.

> For more information about improving TBT, see [Google's guidelines](https://read.calvincode.net/reader?url=https://web.dev/lighthouse-total-blocking-time/%23how-to-improve-your-tbt-score).

#### Largest Contentful Paint (LCP) | 25%

[**Largest Contentful Paint (LCP)**](https://read.calvincode.net/reader?url=https://web.dev/lcp/) measures the time it takes to render the largest visible element on the page within the viewport. Fast LCPs help reassure the user that the page is useful.

| LCP time (seconds) | Color-coding        |
| ------------------ | ------------------- |
| Over 4             | ▲ Poor              |
| 2.5–4              | ■ Needs improvement |
| 0–2.5              | ● Good              |

The metric only considers the loading time of elements significantly relevant to the user experience, such as:

* `<img />` elements,
* `<image>` elements inside an `<svg>` element.
* `<video>` elements.
* Elements with a background image loaded via the `url()` function.
* Block-level elements, such as `<h1>`, `<h2>`, `<div>`, `<ul>`, `<table>`, etc.

LCP is primarily affected by the following factors:

* Long server response times.
* Render-blocking resources, such as CSS stylesheets, font files, and JavaScript scripts.
* Resource size and load time.
* Client-side rendering.

> For more information about how to improve LCP, see [Google's guidelines](https://read.calvincode.net/reader?url=https://web.dev/fcp/%23how-to-improve-fcp).

#### Cumulative Layout Shift (CLS) | 25%

The [**Cumulative Layout Shift (CLS)**](https://read.calvincode.net/reader?url=https://web.dev/cls/) metric measures the impact of undesired content shifts that occur during the entire lifespan of a page.

A layout shift occurs when a visible element changes its initial position from one rendered frame to the next. A website with a low CLS has a steady page display without any elements shifting around. A high CLS may annoy users and affect how they interact with the page, causing them to click an unwanted button or link.

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

| CLS        | Color-coding        |
| ---------- | ------------------- |
| Over 0.25  | ▲ Poor              |
| 0.1 – 0.25 | ■ Needs improvement |
| 0 – 0.1    | ● Good              |

This metric is mostly affected by images, ads, embeds, iframes without predefined dimensions, and by content dynamically inserted by JavaScript on the client side (e.g., a bar that suddenly appears in the header).

> For more information about improving CLS, see [Google's guidelines](https://read.calvincode.net/reader?url=https://web.dev/cls/%23how-to-improve-cls).

#### First Contentful Paint (FCP) | 10%

[**First Contentful Paint (FCP)**](https://read.calvincode.net/reader?url=https://web.dev/fcp/) measures the time it takes for the browser to render the first piece of content from the Document Object Model (DOM). Short FCP times mean fast visual activity from the browser. They reassure the user that something is happening during the page load and, therefore, increase the chance of keeping users engaged.

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

See below how Lighthouse classifies FCP times:

| FCP time (seconds) | Color-coding        |
| ------------------ | ------------------- |
| Over 3             | ▲ Poor              |
| 1.8–3              | ■ Needs improvement |
| 0–1.8              | ● Good              |

The FCP affects most of the other metrics and serves as a huge red flag if it is taking too long. This metric can be affected by:

* Long server response times.
* Render-blocking resources, such as CSS stylesheets, font files, and JavaScript scripts.
* Script-based elements above the fold.
* Large DOM trees.
* Multiple 301 redirects.

> For more information about improving FCP, see [Google's guidelines](https://read.calvincode.net/reader?url=https://web.dev/fcp/%23how-to-improve-fcp).

#### Speed Index (SI) | 10%

The [**Speed Index (SI)**](https://read.calvincode.net/reader?url=https://web.dev/speed-index/) indicates how quickly a page's elements become visible in the viewport. The Speed Index is a synthetic value that calculates the visual differences between frames captured during the page load. Until all content is visible, each frame is scored considering its visual completeness. These individual scores are then summed to determine the page's Speed Index.

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

See below how Lighthouse classifies SI times:

| SI time (seconds) | Color-coding        |
| ----------------- | ------------------- |
| 0ver 5.8          | ▲ Poor              |
| 3.4–5.8           | ■ Needs improvement |
| 0–3.4             | ● Good              |

The Speed Index is a unified metric that considers many other metrics and audits, which can help you figure out whether your page speed optimizations are working. Generally, most improvements to your page's [First Contentful Paint](#first-contentful-paint-fcp--10) and [Largest Contentful Paint](#largest-contentful-paint-lcp--25) are also likely to improve the _Speed Index_.

> For more information about improving SI, see [Google's guidelines](https://read.calvincode.net/reader?url=https://web.dev/speed-index/%23how-to-improve-your-speed-index-score).

### Opportunities

The **Opportunities** section provides insights that could potentially help your page load faster. The priority level of each opportunity is indicated by the same color coding used for the metrics. High priorities are indicated by red triangles, medium priorities by orange squares, and low priorities by gray circles.

Use the **Opportunities** section to determine which improvements will benefit your page the most. The more significant the opportunity, the more likely it is to affect your **performance score**.

Click each opportunity to get detailed information and documentation about fixing the related issues. Also, notice that unless you have a specific reason for focusing on a particular metric, it's usually better to focus on improving your overall **performance score**.

### Diagnostics

The **Diagnostics** section provides more information about the performance of your application. It indicates the largest contentful paint element on your page, lists the longest tasks on the main thread, and displays the cache lifetime, among other useful details.

Once again, the details presented in this section do not directly affect the **performance score** but are likely to improve the metric values if considered.

### Passed audits

The **Passed audits** section lists all the audits that the page passed. Once you implement the suggestions from Opportunities and Diagnostics, you can retest your page to see if they now appear in the Passed Audits section.

### Additional information

The **Additional information** section shares the following details about the sampled data:

* Data collection period
* Visit durations
* Devices
* Network connections
* Sample size
* Chrome version

![{"base64":"  ","img":{"width":851,"height":129,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":31157,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/additional-info___b0ba8b0e27f40a84f634c70976a16e16.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/additional-info___b0ba8b0e27f40a84f634c70976a16e16.png)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/_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/vtex-io-documentation-getting-started-with-lighthouse/_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/vtex-io/Storefront-Guides/storefront-best-practices/storefront-getting-started-with-lighthouse.md)

[Performance« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse//docs/guides/storefront-performance)[SEONext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse//docs/guides/storefront-seo)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/_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/vtex-io-documentation-getting-started-with-lighthouse/_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

[Lighthouse overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23lighthouse-overview)

[Running Lighthouse audits](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23running-lighthouse-audits)

[FastStore WebOps - Lighthouse scores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23faststore-webops-lighthouse-scores)

[Performance audit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23performance-audit)

[Performance score and metrics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23performance-score-and-metrics)[Opportunities](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23opportunities)[Diagnostics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23diagnostics)[Passed audits](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23passed-audits)[Additional information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23additional-information)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/storefront-best-practices/storefront-getting-started-with-lighthouse.md)

Copy page

On this page

ON THIS PAGE

[Lighthouse overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23lighthouse-overview)

[Running Lighthouse audits](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23running-lighthouse-audits)

[FastStore WebOps - Lighthouse scores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23faststore-webops-lighthouse-scores)

[Performance audit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23performance-audit)

[Performance score and metrics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23performance-score-and-metrics)[Opportunities](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23opportunities)[Diagnostics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23diagnostics)[Passed audits](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23passed-audits)[Additional information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-getting-started-with-lighthouse/docs/guides/storefront-getting-started-with-lighthouse%23additional-information)

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 vtex product customizer in VTEX.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

VTEX IO Apps

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Product Customizer

Official extension

Version: 2.12.4

Latest version: 2.12.4

[![{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

The Product Customizer component can be used on the Product Details Page (PDP) to display [attachments](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/o-que-e-um-anexo--aGICk0RVbqKg6GYmQcWUm) and/or a [subscription form](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-subscriptions-work--frequentlyAskedQuestions%5F4453).

An attachment is the optional and cost-free customization of a product.

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

_Example of a PDP with the Product Customizer component displaying product attachments._

Product subscriptions facilitate recurring sales by automatically scheduling the purchase of a specific product at the frequency requested by the customer.

![{"base64":"  ","img":{"width":2860,"height":1438,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":526825,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-customizer-1.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-customizer-1.gif)

_Example of a PDP with the Product Customizer component displaying the product subscription._

## Before you start

* If you plan to use the Product Customizer component to display **attachments**, make sure to [set up Assembly Options.](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/assembly-options--5x5FhNr4f5RUGDEGWzV1nH)
* If you plan to use the Product Customizer component to display a **subscription form**, make sure to [set up Subscriptions.](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/setting-up-subscription-v2--1FA9dfE7vJqxBna9Nft5Sj) The Product Customizer integration with the Subscription module is native and will be automatically enabled when subscription settings are detected.

## Configuring Product Customizer

1. Add the `product-customizer` app to your theme dependencies in the `manifest.json`. For example:

`1

 dependencies: {

2

+ "vtex.product-customizer": "2.x"

3

 }

`

1. Add the `product-assembly-options` block as a child of the `store.product` template (PDP template). This is enough to enable the subscription form.

`1

 "store.product": {

2

 "children": [

3

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

4

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

5

 "flex-layout.row#description",

6

 "shelf.relatedProducts",

7

 "product-reviews",

8

 "product-questions-and-answers",

9

+ "product-assembly-options"

10

 ]

11

 },

`

1. Declare the [product-assembly-options props](#product-assembly-options-props) for your scenario.

### Displaying attachments (optional)

1. To display attachments of a product on the Product Detail Page (PDP), declare the `product-assembly-options` block and add the `assembly-option-input-values` block as its child.

`1

 "product-assembly-options": {

2

 "children": [

3

 "assembly-option-input-values"

4

 ]

5

 },

`

1. Use the blocks exported by the `product-customizer` app to create a solution that best suits your specific scenario.

| Block name                                | Description                                                                                |
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| assembly-option-item-image                | Displays the attachment image.                                                                                |
| assembly-option-item-quantity-selector    | Displays a quantity selector.                                                                                |
| assembly-option-item-name                 | Displays the attachment name.                                                                                |
| assembly-option-item-price                | Displays the attachment price.                                                                                |
| assembly-option-item-customize            | Displays the Customize button. When clicked, it opens a modal that allows customers to customize the attachment. |
| assembly-option-item-children-description | Displays a summary with all selected attachments.                                                                |

1. Declare the [props](#props) for the chosen blocks according to your scenario. For example:

`1

"product-assembly-options": {

2

 "props":{

3

 "initiallyOpened": "always"

4

 },

5

 "children": [

6

 "flex-layout.row#product-assembly-options",

7

 "assembly-option-input-values"

8

 ]

9

},

`

While building your solution, note that you can receive inputs from three types of [attachments](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/adding-an-attachment?locale=en):

* **Predefined options**: Predefined attachment options set in the `Permitted Values` field. Set up the `optionsDisplay` prop from the `assembly-option-input-values` block to define how these options are displayed.
* **Free text**: Text input. Depending on the value set in the **Maximum Number of Characters** field in the attachment settings, shoppers may or may not have a character limit for this attachment.
* **Boolean**: Boolean attachment options set in the `Permitted Values` field. Customers can select the attachment by clicking the checkbox.

Check the following example where the three attachment types are implemented:

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

Check out below how the product attachment displayed above was added to the Catalog:

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

When an attachment is set as **required**, all attachment options are automatically made available to consumers. On the other hand, if an attachment is **not required**, the `Add customization` button is rendered, as shown in the example above. This gives shoppers the option to add or not an attachment to their product.

Also, keep in mind that the **Checkout** does not natively display the customized product option selected by the customer. To display the product in the Checkout with the selected attachments, it is necessary to customize the Checkout page, allowing it to read and render product information.

## Props

### `product-assembly-options` props

| Prop name       | Type | Description                                                                                | Default value |
| --------------- | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| initiallyOpened | enum | Defines whether the customization box will be opened even if an attachment is not required (always) or if the customization box will be opened only if the attachment is required (required). | required      |

### `assembly-option-input-values` props

| Prop name      | Type | Description                                                                                | Default value |
| -------------- | ---- | ----------------------------------------------------------------------------------------------------------------------- | ------------- |
| optionsDisplay | enum | Defines whether a checkbox (box) or a dropdown list (select) will be used to select the attachment pre-defined options. | select        |

### `assembly-option-item-customize`props

| Prop name   | Type   | Description                                                                                | Default value |
| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| buttonProps | object | Defines the behavior of the Customize button. In addition to the collapse prop, the buttonProps object can include child blocks to build the content of the modal triggered when the button is clicked. | undefined     |

* **`buttonProps` object:**

| Prop name | Type | Description                                                       | Default value |
| --------- | ---- | ----------------------------------------------------------------- | ------------- |
| collapse  | enum | Customize button positioning. Possible values are: left or right. | left          |

## 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                                 |
| ------------------------------------------- |
| booleanInputValue                           |
| inputValueOptionBox                         |
| itemContainer                               |
| modalViewDoneButton                         |
| modalViewProductContainer                   |
| modalViewProductImage                       |
| modalViewProductInfos                       |
| modalViewProductName                        |
| multipleItemQuantitySelector                |
| optionsInputValue                           |
| optionsInputValueDropdown                   |
| optionsInputValueLabel                      |
| optionsInputValueLabelContainer             |
| optionsInputValueOptionBoxContainer         |
| productAssemblyGroupName                    |
| productAssemblyGroupNameRow                 |
| productAssemblyGroupRequiredTag             |
| productAssemblyOptionItemCustomize          |
| productAssemblyOptionItemCustomize\_\_label |
| productAssemblyOptionItemImage              |
| productAssemblyOptionItemName               |
| textInputValue                              |

[Order Placed« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-customizer/docs/apps/vtex.order-placed)[Product HighlightsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-customizer/docs/apps/vtex.product-highlights)

See also

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

ON THIS PAGE

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

[Configuring Product Customizer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-customizer/docs/apps/vtex.product-customizer%23configuring-product-customizer)

[Displaying attachments (optional)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-customizer/docs/apps/vtex.product-customizer%23displaying-attachments-optional)

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

[product-assembly-options props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-customizer/docs/apps/vtex.product-customizer%23product-assembly-options-props)[assembly-option-input-values props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-customizer/docs/apps/vtex.product-customizer%23assembly-option-input-values-props)[assembly-option-item-customizeprops](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-customizer/docs/apps/vtex.product-customizer%23assembly-option-item-customizeprops)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-customizer/docs/apps/vtex.product-customizer%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=)