[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 pixel apps 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/pixel-apps/docs/guides)

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

[Alexa Certify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.alexa-certify-code)

[Audara](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.audara)

[Bluecore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.bluecore)

[Blueknow app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.blueknow)

[BTG360](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.btg360)

[Cookiebot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.cookiebot)

[Cookie Script](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.cookie-script)

[CyberSource Fingerprint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.cybersource-fingerprint)

[Elfsight](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.elfsight)

[Facebook pixel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.facebook-pixel)

[Facebook Domain Verification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.facebook-domain-verification)

[Google Adwords](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.google-adwords)

[Google Customer Reviews](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.google-customer-reviews)

[Hotjar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.hotjar)

[Idea CRM](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.ideacrm)

[Iubenda](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.iubenda)

[JivoChat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.jivochat)

[Kelkoo app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.kelkoo)

[LogRocket](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.logrocket)

[Lucky Orange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.lucky-orange)

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

[Shareasale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.shareasale)

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

[Suiteshare](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.suite-share)

[Tawk.to](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.tawk-to)

[Trustpilot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.trustpilot)

[Zendesk Chat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.zendesk-chat)

[Zopim](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.zopim)

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

[Alexa Certify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.alexa-certify-code)

[Audara](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.audara)

[Bluecore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.bluecore)

[Blueknow app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.blueknow)

[BTG360](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.btg360)

[Cookiebot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.cookiebot)

[Cookie Script](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.cookie-script)

[CyberSource Fingerprint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.cybersource-fingerprint)

[Elfsight](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.elfsight)

[Facebook pixel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.facebook-pixel)

[Facebook Domain Verification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.facebook-domain-verification)

[Google Adwords](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.google-adwords)

[Google Customer Reviews](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.google-customer-reviews)

[Hotjar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.hotjar)

[Idea CRM](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.ideacrm)

[Iubenda](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.iubenda)

[JivoChat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.jivochat)

[Kelkoo app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.kelkoo)

[LogRocket](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.logrocket)

[Lucky Orange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.lucky-orange)

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

[Shareasale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.shareasale)

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

[Suiteshare](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.suite-share)

[Tawk.to](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.tawk-to)

[Trustpilot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.trustpilot)

[Zendesk Chat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.zendesk-chat)

[Zopim](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/docs/apps/vtex.zopim)

---

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

---

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

---

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

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

Pixel Apps

[accessiBeConnect to your accessiBe account to provide users with a custom accessibility experience.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.accessibe)[BazaarvoiceUse the Bazaarvoice app to collect engage with customers and collect reviews.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.bazaarvoice)[CookiebotMake your use of cookies and online tracking compliant with the Cookiebot app.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.cookiebot)[Cookie ScriptUse the Cookie Script app to make your website cookies comply with GDPR and CCPA.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.cookie-script)[Curbside PickupConnect to your Curbside account to enable shoppers to coordinate pickup orders through email notifications.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.curbside-pickup)[ElfsightUse the Elfsight app to add widgets to your store and engage visitors.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.elfsight)[Facebook Business ExtensionConnect your store to Facebook services through the FBE platform.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-fbe)[Facebook pixelConnect your store to the Facebook ads services and manage campaigns in real time.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel)[Google Customer ReviewsUse this free service to collect valuable feedback from shoppers.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.google-customer-reviews)[IubendaConfigure the Iubenda app to manage consent preferences for the ePrivacy, GDPR, and CCPA.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iubenda)[ListrakConnect to Listrak and collect metrics, such as cart abandonment rates.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.listrak-pixel)[PowerReviewsBring your PowerReviews content into your storeSee more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.powerreviews)[Speech to Text SearchUse Google Chrome language processing to perform recognition on speech audio data.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtexarg.speech-to-text)[SuiteshareCreate solutions to attract and capture more customers with the Suiteshare app.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.suite-share)[Tawk.toMonitor and chat with the visitors of your website from a free customizable page.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to)[TikTok for BusinessConnect your store to TikTok to sync your catalog products with TikTok and more.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtexbr.tiktok-tbp)[TrustpilotConnect to Trustpilot, an online review community that connects businesses and consumers through genuine feedback.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.trustpilot)[Wordpress IntegrationBring in blog data from the Wordpress API and create a blog on your store.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration)[Yotpo Reviews IntegrationUse this integration to present Yotpo reviews and ratings on product pages.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.yotpo)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps/_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/Store-Framework-Apps/pixel-apps.md)

[Tab Layout« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps//docs/apps/vtex.tab-layout)[Alexa CertifyNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pixel-apps//docs/apps/vtex.alexa-certify-code)

Contributors

1

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

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/Store-Framework-Apps/pixel-apps.md)

Copy page

On this page

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 1 developing storefront apps using react and vtex io 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-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-getting-started)

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)

[2\. Creating the new app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-3-creating-the-new-app)

[3\. Declaring a theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-4-declaring-a-theme-block)

[4\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-5-defining-styles)

[5\. Structuring documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-6-structuring-documentation)

[6\. Consuming data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-7-consuming-data)

[7\. Translating the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-8-translating-the-component)

[8\. Improving performance with caching](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-9-improving-performance-with-caching)

[9\. Making your app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-10-making-your-app-publicly-available)

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-developing-custom-storefront-components)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[Master Data CRUD](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/create-master-data-crud-app)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-getting-started)

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

[1\. Setting up your development environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)

[2\. Creating the new app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-3-creating-the-new-app)

[3\. Declaring a theme block](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-4-declaring-a-theme-block)

[4\. Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-5-defining-styles)

[5\. Structuring documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-6-structuring-documentation)

[6\. Consuming data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-7-consuming-data)

[7\. Translating the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-8-translating-the-component)

[8\. Improving performance with caching](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-9-improving-performance-with-caching)

[9\. Making your app publicly available](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-10-making-your-app-publicly-available)

[Best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-developing-custom-storefront-components)

[Pixel apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

[Master Data CRUD](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/create-master-data-crud-app)

---

Project structure

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/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-1-developing-storefront-apps-using-react-and-vtex-io/docs/app-development)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-getting-started)

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io)

Storefront apps

Learn how to create your own storefront components with React and VTEX IO.

While the VTEX IO platform and Store Framework provide high-quality and customizable React storefront blocks, there may be cases where you require specific frontend solutions not covered by our native components. In such cases, the VTEX IO platform empowers you to create your own storefront apps with [React](https://read.calvincode.net/reader?url=https://reactjs.org/).

In this tutorial, you will learn how to build React storefront components using the VTEX IO platform. This tutorial comprises nine parts covering all aspects of the development process, from setting up your development environment to making your app publicly available.

Here's an overview of the parts:

[Part 1\. Setting up your development environmentLearn how to set up your development environment to build storefront components with VTEX IO.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)[Part 2\. Creating the new appLearn how to create a new app on the VTEX IO platform, which will serve as the foundation of your storefront component.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-3-creating-the-new-app)[Part 3\. Declaring a theme blockLearn how to declare a theme block, which is a reusable piece of code that defines the structure of your storefront component.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-4-declaring-a-theme-block)[Part 4\. Defining styles Learn how to define styles for your storefront components, including how to export CSS handles for further customization.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles)[Part 5\. Structuring documentationLearn how to structure documentation for your storefront component, making it easier for other developers to use and understand.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-6-structuring-documentation)[Part 6\. Consuming dataLearn how to consume data from different sources and integrate it into your storefront components,See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-7-consuming-data)[Part 7\. Translating the componentLearn how to translate your storefront components into different languages, making them accessible to a broader audience.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component)[Part 8\. Improving performance with cachingLearn how to use caching to improve the performance of your storefront components, ensuring that they load quickly and provide a seamless shopping experience.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-9-improving-performance-with-caching)[Part 9\. Making your app publicly availableLearn how to make your app available to other users, either by publishing it for scoped usage or by submitting it to the VTEX App Store.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-10-making-your-app-publicly-available)

The storefronts apps you develop can be used in your store's theme or be made available to other stores interested in the same solution through [VTEX App Store](https://read.calvincode.net/reader?url=https://apps.vtex.com/). During the development process, make sure to follow our [best practices on developing custom storefront components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components) and [App Store Guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store) to ensure the best results.

> Please note that custom apps are the liability of the [app's vendor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest%23vendor), and VTEX shall bear no responsibility for these apps nor provide support for their users.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/_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/Getting-Started/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io.md)

[Getting Started« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io//docs/guides/vtex-io-getting-started)[1\. Setting up your development environmentNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io//docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)

See also

[1\. Setting up your development environmentApp Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io/docs/guides/vtex-io-documentation-2-basic-development-setup-in-vtex-io)

Contributors

1

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

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/Getting-Started/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io.md)

Copy page

On this page

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 preparing your app distribution 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-preparing-your-app-distribution/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/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-preparing-your-app-distribution/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-preparing-your-app-distribution/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-preparing-your-app-distribution/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-preparing-your-app-distribution/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-preparing-your-app-distribution/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/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-preparing-your-app-distribution/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-preparing-your-app-distribution/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-preparing-your-app-distribution/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/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-preparing-your-app-distribution/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-preparing-your-app-distribution/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

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

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/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-preparing-your-app-distribution/docs/guides/vtex-app-store)

[Becoming a registered VTEX App Store developer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-becoming-a-registered-vtex-app-store-developer)

[Developing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-developing-an-app)

[Setting your app's billing model](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-setting-your-apps-billing-model)

[Preparing your app for distribution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-preparing-your-app-distribution)

[Submitting your app to the VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store)

[Using the Docs builder to publish app documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/using-the-docs-builder-to-publish-app-documentation)

[App Store Guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/api-reference)

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

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/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-preparing-your-app-distribution/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-preparing-your-app-distribution/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-preparing-your-app-distribution/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/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-preparing-your-app-distribution/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-preparing-your-app-distribution/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

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

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/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-preparing-your-app-distribution/docs/guides/vtex-app-store)

[Becoming a registered VTEX App Store developer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-becoming-a-registered-vtex-app-store-developer)

[Developing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-developing-an-app)

[Setting your app's billing model](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-setting-your-apps-billing-model)

[Preparing your app for distribution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-preparing-your-app-distribution)

[Submitting your app to the VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store)

[Using the Docs builder to publish app documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/using-the-docs-builder-to-publish-app-documentation)

[App Store Guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/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-preparing-your-app-distribution/docs/app-development)

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

[Preparing your app for distribution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-preparing-your-app-distribution)

Preparing your app for distribution

Learn how to prepare your app for distribution in the VTEX App Store.

This guide will teach you how to prepare your app for distribution in the VTEX App Store and enable merchants to benefit from your solution.

Note that every app goes through a homologation process before being available in the VTEX App Store. During this process, our team can reject apps that do not follow the quality, viability, and usability standards presented in the [App Store Guidelines](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-homologation-requirements-for-vtex-app-store). Therefore, be sure to review these guidelines as you develop and prepare your app for distribution.

## Before you begin

Before proceeding, ensure you have:

1. Developed your app. Refer to the [Developing an app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app) guide for more information.
2. Registered as a [VTEX App Store developer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-becoming-a-registered-vtex-app-store-developer).

## Instructions

### Step 1 - Preparing your app billing options

After developing your app, you must establish whether it will be charged and if it will be public or private on the VTEX IO platform. To set up these options, refer to the [Setting your app's billing model](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-setting-your-apps-billing-model) guide. Also, check the [App Monetization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-app-monetization) guidelines for more information on this topic.

### Step 2 - Setting the `public` folder

After establishing your app's billing model, you must set up the marketing assets (e.g., icons, images, and descriptions) that will compose your app's page on the VTEX App Store. During this step, refer to our [Marketing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-business-guidelines-marketing-assets) guidelines.

![{"base64":"  ","img":{"width":1098,"height":931,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":123916,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-page-example.png?raw=true"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Perks/vtex-io-documentation-homologation-requirements-for-vtex-app-store/app-store-page-example.png?raw=true)

1. Create a new folder named `public` in the root directory of your project.
2. Inside the `public` folder, create the `metadata` folder. Also, create the `images`, `licenses`, and `messages` folders within `metadata`.
3. Create the following folders and files as shown:
`1
┗ 📂 public
2
 ┣ 📂 metadata
3
 ┣ 📂 images
4
 ┣ 📄 icon.png
5
 ┗ 📂 screenshots
6
 ┣ 📂 desktop
7
 ┗ 📂 mobile
8
 ┣ 📂 licenses
9
 ┣ 📄 en-US.md
10
 ┣ 📄 es-AR.md
11
 ┗ 📄 pt-BR.md
12
 ┗ 📂 messages
13
 ┣ 📄 en-US.json
14
 ┣ 📄 es-AR.json
15
 ┗ 📄 pt-BR.json
`
4. Create the files and folders needed to compose your App Page as follows:

#### `images` folder

The `images` folder stores the images for your app's page. They may include the app's icon and screenshots showing how the application behaves in the Admin or the storefront. This folder must contain:

`1

┗ 📂 images

2

 ┣ 📄 icon.png

3

 ┗ 📂 screenshots

4

 ┣ 📂 desktop

5

 ┣ 📄 {add-a-file}.png

6

 ┗ 📄 {add-a-file}.png

7

 ┗ 📂 mobile

8

 ┣ 📄 {add-a-file}.png

9

 ┗ 📄 {add-a-file}.png

`

* `icon.png` \- The app icon file.
* `screenshots` \- A folder containing the images that will be presented in the App Page's carousel.

Note that you can use the `desktop` and `mobile` subfolders to store device-specific images. For example: `public/metadata/images/screenshots/mobile` and `public/metadata/images/screenshots/desktop`.

#### `licenses` folder

The `licenses` folder contains the terms and conditions of your app. Licenses establish the direct business relationship between the vendor and the retailer that installs the app.

Inside the `licenses` folder, create the files named using locale codes to provide your app's terms and conditions in different languages (e.g., `public/metadata/licenses/en-US.md`, `public/metadata/licenses/es-AR.md`, `public/metadata/licenses/pt-BR.md`).

#### `messages` folder

The `messages` folder contains textual information regarding your app, such as its name and list of features, in different languages. See the base template for structuring this file below:

`1

{

2

 "name": "Order Tracker",

3

 "headline": "Headline Order Tracker.",

4

 "overview": "Tracks all orders\\nSecond line\\n\\nThird line\\n\\n\\n\\n\\nFourth line",

5

 "features": [

6

 "First feature",

7

 "Second feature",

8

 "Third feature",

9

 "Fourth feature"

10

 ],

11

 "additionalinformation": "Additional information\\nYou can also write new lines here\\n\\n\\nIt should work just like the overview",

12

 "video": "https://www.youtube.com/embed/645ASYhJS-Q",

13

 "websiteURL": "https://www.website.com/en",

14

 "support": {

15

 "email": "a@bcd.io",

16

 "url": "www....",

17

 "phone": "+1...."

18

 },

19

 "metricDescription": {

20

 "track": "English description for metric track",

21

 "notify": "English description for metric notify en-US"

22

 }

23

}

`

* **`name`:** App name, limited to 26 characters.
* **`headline`:** Short description of the main functionality of your application. The field has a 120-character limit.
* **`overview`:** Detailed description of your app’s main purposes and benefits. There is no character limit.
* **`features`:** List of your app’s main features and highlights.
* **`websiteURL`:** Link to the app's landing page or your corporate website.
* **`support`:** Link to the support channel. This can be an email address, a ticket portal, or a phone number.
* **`additionalinformation`:** Additional details and disclaimers related to your app.
* **`video`:** URL of a video featuring the app's behavior.
* **`metricDescription`:** Billing options' metrics (declared in the app's `manifest.json` file). **This field is required only for apps whose pricing is based on one or more metrics. Do not fill in this field if this is not applicable.**

The files in this folder must be available in English, Spanish, and Portuguese, in the following paths: `public/metadata/messages/en-US.json`, `public/metadata/messages/es-AR.json` and `public/metadata/messages/pt-BR.json`, respectively.

### Step 3 - Publishing and deploying your app on the VTEX IO development platform

If you are satisfied with your new app and marketing content, follow the [Deploying a new app version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available) guide to deploy your changes.

After deploying your app's latest version, follow the [Submitting your app to the VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store) guide.

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7026595%3Fv%3D4%26w=64%26q=75)](https://github.com/henriquessb)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/_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/vtex-app-store/vtex-io-documentation-preparing-your-app-distribution.md)

[Setting your app's billing model« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution//docs/guides/vtex-io-documentation-setting-your-apps-billing-model)[Submitting your app to the VTEX App StoreNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution//docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7026595%3Fv%3D4%26w=64%26q=75)](https://github.com/henriquessb)

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-preparing-your-app-distribution%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-preparing-your-app-distribution%23instructions)

[Step 1 - Preparing your app billing options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-preparing-your-app-distribution%23step-1-preparing-your-app-billing-options)[Step 2 - Setting the public folder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-preparing-your-app-distribution%23step-2-setting-the-public-folder)[Step 3 - Publishing and deploying your app on the VTEX IO development platform](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-preparing-your-app-distribution%23step-3-publishing-and-deploying-your-app-on-the-vtex-io-development-platform)

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/vtex-app-store/vtex-io-documentation-preparing-your-app-distribution.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-preparing-your-app-distribution%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-preparing-your-app-distribution%23instructions)

[Step 1 - Preparing your app billing options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-preparing-your-app-distribution%23step-1-preparing-your-app-billing-options)[Step 2 - Setting the public folder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-preparing-your-app-distribution%23step-2-setting-the-public-folder)[Step 3 - Publishing and deploying your app on the VTEX IO development platform](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-preparing-your-app-distribution/docs/guides/vtex-io-documentation-preparing-your-app-distribution%23step-3-publishing-and-deploying-your-app-on-the-vtex-io-development-platform)

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 contributing with new css handles 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-contributing-with-new-css-handles/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/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-contributing-with-new-css-handles/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-contributing-with-new-css-handles/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-contributing-with-new-css-handles/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-contributing-with-new-css-handles/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-contributing-with-new-css-handles/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-contributing-with-new-css-handles/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/faststore)

---

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

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-styling)

[Using CSS Handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization)

[Contributing with new CSS Handles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles)

[Customizing your store's icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-customizing-your-stores-icons)

[Customizing your store’s typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-customizing-your-stores-typography)

[Interactively inspecting storefront blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/how-to-interactively-inspect-blocks-on-a-store-framework-store)

[Using the Markers prop to customize a block's message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-using-the-markers-prop-to-customize-a-blocks-message)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

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

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/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-contributing-with-new-css-handles/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/faststore)

---

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

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-styling)

[Using CSS Handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization)

[Contributing with new CSS Handles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles)

[Customizing your store's icons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-customizing-your-stores-icons)

[Customizing your store’s typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-customizing-your-stores-typography)

[Interactively inspecting storefront blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/how-to-interactively-inspect-blocks-on-a-store-framework-store)

[Using the Markers prop to customize a block's message](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-using-the-markers-prop-to-customize-a-blocks-message)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

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

---

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

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

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/store-framework-styling)

[Contributing with new CSS Handles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles)

Contributing with new CSS Handles

CSS Handles are CSS classes mapped to HTML elements, allowing for flexible customization of store components. The more CSS Handles available, the greater the potential for design customization.

This guide walks you through adding a new CSS Handle, using the customization of a filter on the Search Results page as an example.

## Before you begin

Before you begin, we recommend installing the [React Chrome extension](https://read.calvincode.net/reader?url=https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) to inspect the React component tree of any store page.

## Instructions

### Step 1 - Identifying the React component

1. Open the store page you are working on.
2. Right-click on the HTML element you want to customize, then select Inspect. You should see the HTML structure like the following example:
`1

Hats

`
3. In Chrome Dev Tools, go to the `Components` tab and find the React component that wraps this element. For example, `CategoryItem`.
![{"base64":"  ","img":{"width":199,"height":84,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":5992,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-contributing-with-new-css-handles-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-contributing-with-new-css-handles-0.png)

### Step 2 - Forking the app's repository

1. [Fork the repository](https://read.calvincode.net/reader?url=https://help.github.com/en/github/getting-started-with-github/fork-a-repo) of the app that contains the block wrapping the HTML element you are targeting.
2. Clone the forked repository to your local files.
`1
git clone {repoUrl}
`
3. Open the project in your preferred code editor and locate the React component identified earlier (e.g., `CategoryItem.jsx`).

### Step 3 - Adding a new CSS Handle

Now, depending on how the component imports its CSS, there are two ways to add a CSS Handle:

* Using the `import {useCssHandles} from 'vtex.css-handles'` function.
* Using the `import styles from './styles.css'` function.

#### Using the `import {useCssHandles} from 'vtex.css-handles'` function

1. Locate the variable passed to the `useCssHandles` hook (e.g., `CSS_HANDLES`).
CategoryItem.jsx
`1
const CSS_HANDLES = ['container', 'element']
2
// ...
3
const handles = useCssHandles(CSS_HANDLES)
`
2. Add the new CSS Handle to the array:
`1
 const CSS_HANDLES = [
2
 'container',
3
 'element',
4
+ 'headline',
5
 ]
`
> Note that the `useCssHandles` hook will create an object where each key corresponds to the CSS Handle you defined, and the value is a unique, automatically generated CSS class name. So, `handles.container`, `handles.element`, and `handles.headline` will contain these generated class names. For a component called `foobar`, the generated class names might look like this: `vtex-foobar-1-x-container`, `vtex-foobar-1-x-element`, `vtex-foobar-1-x-headline`.
3. Apply the new CSS Handle to the desired HTML element using the `handles` variable:
CategoryItem.jsx
`` 1
-

2
+ <div className={`$\{handles.headline\} ph0 mr2`}>
 ``
4. Save your changes.

#### Using the `import styles from './styles.css'` function

1. Identify and open the CSS file imported in the component (e.g., `searchResult.css`):
CategoryItem.jsx
`1
import styles from '../searchResult.css'
`
2. Add a new class to the CSS file with the name of the new CSS Handle:
searchResult.css
`1
.headline {}
`
3. Go back to the React component file and add the new CSS Handle to the desired HTML element. Remember to use the name of the function variable (in our example, `styles`) when adding it:
CategoryItem.jsx
`` 1
-

2
+ <div className={`$\{styles.headline\} ph0 mr2`}>
 ``
4. Save your changes.

### Step 4 - Checking your changes

1. Using the terminal and the [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference), log in to a VTEX account and use a Development workspace to [link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app) the app you are working on.
2. Access the account's website through the development workspace (`{workspaceName}--{accountName}.myvtex.com`) and inspect the modified HTML element to verify if the new CSS class is being applied correctly.

Following our example, we would have something like:

`1

`

### (Optional) Step 5 - Adding modifiers

To customize elements based on user interactions, you can apply modifiers to CSS Handles.

Handle modifiers work as identifiers. They are responsible for overriding the HTML element style according to the behavior assumed by them on the interface, according to user interaction.

Let's suppose you have a handle called `handles.slide` for each slide of a slider and want to customize the currently visible slide via CSS. For this purpose, you should add a modifier to `handles.slide`, allowing customization according to the user's navigation.

1. Import the `applyModifiers` method:
`import {useCssHandles, applyModifiers} from 'vtex.css-handles'`
2. Instead of directly passing the handle, apply the `applyModifiers` method:
`` 1
-<div class={{`$\{handles.slide\}`}}">...

2
+<div class={{`$\{applyModifiers(handles.slide, isCurrentSlide ? 'active' : undefined\}`}}">...

 ``
This results in:
`1

...

2

...

3

...

`

### Step 6 - Committing your changes

After verifying that the new CSS class is correctly rendered, follow these steps to commit and submit your updates:

1. Use Git and GitHub to create a new branch for your changes.
2. Open the `CHANGELOG.md` file and add a new entry under the `[Unreleased]` section to briefly describe your changes. For example:
`` 1
## [Unreleased]
2
### Added
3
- New CSS Handle `headline`.
 ``
3. In the `docs` folder, update the documentation to include the new CSS Handle. Modify the **Customization** section and the **CSS Handles** table as in the example below:
`` 1
 | CSS Handles |
2
 | ----------- |
3
 | `container` |
4
 | `element` |
5
+| `headline` |
 ``
4. Commit your updates with a clear, descriptive message.
5. Push your branch to your forked repository.
6. [Open a Pull Request for the team](https://read.calvincode.net/reader?url=https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork). In the Pull Request description, include a link to the development workspace where your changes can be tested. For example: `https://john--storecomponents.myvtex.com`.

After your Pull Request is reviewed and approved, your changes will be merged, making the new CSS Handle available to other users and contributing to the app's improvement.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/_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/Storefront-Guides/styling-your-store/vtex-io-documentation-contributing-with-new-css-handles.md)

[Using CSS Handles for store customization« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles//docs/guides/vtex-io-documentation-using-css-handles-for-store-customization)[Customizing your store's iconsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles//docs/guides/vtex-io-documentation-customizing-your-stores-icons)

See also

[Using CSS handles for store customizationsGuides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization)

Contributors

1

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

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23instructions)

[Step 1 - Identifying the React component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23step-1-identifying-the-react-component)[Step 2 - Forking the app's repository](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23step-2-forking-the-apps-repository)[Step 3 - Adding a new CSS Handle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23step-3-adding-a-new-css-handle)[Step 4 - Checking your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23step-4-checking-your-changes)[(Optional) Step 5 - Adding modifiers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23optional-step-5-adding-modifiers)[Step 6 - Committing your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23step-6-committing-your-changes)

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/styling-your-store/vtex-io-documentation-contributing-with-new-css-handles.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23instructions)

[Step 1 - Identifying the React component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23step-1-identifying-the-react-component)[Step 2 - Forking the app's repository](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23step-2-forking-the-apps-repository)[Step 3 - Adding a new CSS Handle](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23step-3-adding-a-new-css-handle)[Step 4 - Checking your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23step-4-checking-your-changes)[(Optional) Step 5 - Adding modifiers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23optional-step-5-adding-modifiers)[Step 6 - Committing your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-contributing-with-new-css-handles/docs/guides/vtex-io-documentation-contributing-with-new-css-handles%23step-6-committing-your-changes)

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