[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 optimizing image rendering 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-optimizing-image-rendering/docs/guides)

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/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-optimizing-image-rendering/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/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-optimizing-image-rendering/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-optimizing-image-rendering/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-optimizing-image-rendering/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/store-framework-managing-performance)

[Deactivating the VTEX IO native service worker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker)

[Debugging performance issues](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-debugging-performance-issues)

[Displaying asynchronous prices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-displaying-asynchronous-prices)

[Enabling the Order Form optimization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-enabling-order-form-optimization)

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

[Enabling performance settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-enabling-performance-settings)

[Tracking changes in Lighthouse performance score](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score)

[Lazy loading components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-using-the-fold-blocks)

[Optimizing image rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-optimizing-image-rendering)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/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-optimizing-image-rendering/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-optimizing-image-rendering/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-optimizing-image-rendering/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/api-reference)

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/troubleshooting)

---

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

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/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-optimizing-image-rendering/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/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-optimizing-image-rendering/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-optimizing-image-rendering/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-optimizing-image-rendering/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/store-framework-managing-performance)

[Deactivating the VTEX IO native service worker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker)

[Debugging performance issues](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-debugging-performance-issues)

[Displaying asynchronous prices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-displaying-asynchronous-prices)

[Enabling the Order Form optimization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-enabling-order-form-optimization)

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

[Enabling performance settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-enabling-performance-settings)

[Tracking changes in Lighthouse performance score](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score)

[Lazy loading components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-using-the-fold-blocks)

[Optimizing image rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-optimizing-image-rendering)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/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-optimizing-image-rendering/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-optimizing-image-rendering/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-optimizing-image-rendering/docs/guides/storefront-best-practices)

---

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

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/store-framework)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/store-framework-managing-performance)

[Optimizing image rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-optimizing-image-rendering)

Optimizing image rendering

Learn how to optimize image rendering for faster load times.

This guide outlines best practices for using images in your [Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) to maintain consistency and performance.

Images are crucial for creating a strong brand identity, but if not managed properly, they may slow down your store. To address this, Store Framework offers several image blocks tailored for different purposes, minimizing performance loss and allowing you to display images effectively. Additionally, there are best practices to follow when uploading images in your Store Theme.

This guide presents the following sections:

* [List of image blocks](#list-of-image-blocks): Presents the VTEX native components available in Store Framework that you can use to optimize image rendering on your store.
* [Best practices for uploading images](#best-practices-for-uploading-images): Describes best practices to maintain performance and visual consistency when updating images.

## List of image blocks

Store Framework offers several image blocks for different use cases. Selecting the right block helps to maintain performance and visual consistency.

* [**Logo**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/logo): Renders your brand logo, typically in the header or footer.
* [**Infocard**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/infocard): Renders images with links and call-to-action (CTA) buttons when you want to guide users with image-based CTAs.
* [**Rich Text**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.rich-text): Renders markdown text when you need to combine text and images in a single block.
* [**Product Summary Image**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary/productsummaryimage): Renders the product image attached to the product summary information, such as the product name and price. It's commonly used within other store components, like the [Shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.shelf), to display products with their key details.
When using the Product Summary block, configure at least one of the following props:
   * `aspectRatio`
   * `width`
   * `height`
   * `maxHeight`
These props define image dimensions, ensuring that product summary images are displayed at a consistent size, even if the images uploaded in the catalog have different dimensions. By declaring these props, your store shelf will replicate image consistency across all products being displayed, differently from the shelf example below:
![{"base64":"  ","img":{"width":2192,"height":1016,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":712774,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-best-practices-for-rendering-images-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-best-practices-for-rendering-images-0.png)
> You don't need to define all four properties in your Product Summary Image block at the same time. Each property has a unique purpose and can be configured based on your needs.
* [**Image**](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components/image): Renders standalone images without additional elements such as links or text, for when you just need to display an image.

## Best practices for uploading images

Follow these guidelines to upload images efficiently and avoid performance issues:

* To upload images, use the [Assets Builder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder) or [Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/store-framework-working-with-site-editor). These tools handle cropping automatically, ensuring a consistent user experience across your store.
* Avoid hardcoding image URLs in the `blocks.json` file, as this can lead to image deformation.
* Don't use images with large dimensions, as they may not crop correctly in Site Editor, leading to display issues.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Perks/best-practices/vtex-io-documentation-optimizing-image-rendering.md)

[Lazy loading components« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering//docs/guides/vtex-io-documentation-using-the-fold-blocks)[Improving store accessibility with semantic HTML migrationNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering//docs/guides/vtex-io-documentation-semantic-html-migration)

Contributors

1

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

ON THIS PAGE

[List of image blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-optimizing-image-rendering%23list-of-image-blocks)

[Best practices for uploading images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-optimizing-image-rendering%23best-practices-for-uploading-images)

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/Perks/best-practices/vtex-io-documentation-optimizing-image-rendering.md)

Copy page

On this page

ON THIS PAGE

[List of image blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-optimizing-image-rendering%23list-of-image-blocks)

[Best practices for uploading images](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-optimizing-image-rendering/docs/guides/vtex-io-documentation-optimizing-image-rendering%23best-practices-for-uploading-images)

On this page

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


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

[User] How do I use the VTEX order configuration app? Provide documentation and configuration details.

[Assistant]
Documentation

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

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

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

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

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

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

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

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

VTEX IO Apps

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

---

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

---

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

---

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

[Order Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-configuration/docs/apps/vtex.order-configuration)

[Quickorder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-configuration/docs/apps/vtex.quickorder)

[SKU List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-configuration/docs/apps/vtex.sku-list)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

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

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

---

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

VTEX IO Apps

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

---

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

---

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

---

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

[Order Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-configuration/docs/apps/vtex.order-configuration)

[Quickorder](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-configuration/docs/apps/vtex.quickorder)

[SKU List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-configuration/docs/apps/vtex.sku-list)

---

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

---

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

---

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

---

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

---

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

---

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

---

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

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

Order Configuration

Official extension

Version: 3.3.1

Latest version: 3.3.1

[![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGPg4+Mz1Nfjl5T7f2c+AAzxA3lptuDWAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square","width":110,"height":20,"type":"svg"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

The **Order Configuration** app, designed for B2B scenarios, displays a form responsible for collecting order data in a modal.

![{"base64":"  ","img":{"width":2859,"height":1502,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":2640505,"url":"https://user-images.githubusercontent.com/52087100/91925199-e5125200-ecaa-11ea-8734-f98921ddb384.gif"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/52087100/91925199-e5125200-ecaa-11ea-8734-f98921ddb384.gif)

Once the form is submitted, the order data collected will be available at Master Data and saved in the current VTEX session.

> This app can be used to enable customization of all kinds of behaviors, such as custom prices, custom products, etc. Keep in mind the Order Configuration app does not offer these functionalities, it only enables other apps to do so.

Follow the steps below to install and set up the **Order Configuration** app in your store.

### Step 1: Install the app

First, you must add the `order-configuration` app to your theme's dependencies in the `manifest.json` file:

`1

dependencies: {

2

 "vtex.order-configuration": "2.x"

3

}

`

This will enable you to use the blocks exported by the `order-configuration` app. Check out the full list below:

| Block name         | Description                                                                                |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| order-config       | Parent block only responsible for rendering its children blocks, that in turn build the Order Configuration component.                                               |
| order-config.title | Renders the component title, that is, the message text displayed for users to present the component. On the image above, the component title is Order Configuration. |
| order-config.modal | Renders the modal responsible for displaying the component content.                                                                                |
| order-config.form  | Renders the component content, that is, a form to be filled out by users.                                                                                |

### Step 2: Declare the required blocks

Add the `order-config` block in the Header component, as shown in the example below.

`1

{

2

 "header-layout.desktop": {

3

 "children": [

4

 "flex-layout.row#1-desktop",

5

 "flex-layout.row#2-desktop",

6

 "flex-layout.row#3-desktop",

7

 "sticky-layout#4-desktop"

8

 ]

9

 },

10

 "flex-layout.row#3-desktop": {

11

 "props": {

12

 "blockClass": "menu-link",

13

 "horizontalAlign": "center",

14

 "preventHorizontalStretch": true,

15

 "preventVerticalStretch": true,

16

 "fullWidth": true

17

 },

18

 "children": [

19

 "vtex.menu@2.x:menu#websites",

20

 "flex-layout.col#spacer",

21

+ "order-config#header",

22

 "vtex.menu@2.x:menu#institutional"

23

 ]

24

 },

`

Then, declare the `order-config#header` block and its children blocks: `order-config.title` and `order-config.modal`. Example:

`1

{

2

 "order-config#header": {

3

 "children": [

4

 "order-config.title#header",

5

 "order-config.modal#header"

6

 ],

7

 "props": {

8

 "blockClass": "header",

9

 "formFields": [

10

 {

11

 "name": "orderType",

12

 "type": "string",

13

 "fieldType": "radio",

14

 "label": "Order Type",

15

 "defaultValue": "resale",

16

 "options": [

17

 {

18

 "label": "Resale",

19

 "value": "resale"

20

 },

21

 {

22

 "label": "Consumption",

23

 "value": "consumption"

24

 }

25

 ]

26

 },

27

 {

28

 "name": "state",

29

 "type": "string",

30

 "fieldType": "select",

31

 "label": "State",

32

 "showInTitle": true,

33

 "options": [

34

 {

35

 "label": "ES",

36

 "value": "ES"

37

 },

38

 {

39

 "label": "SP",

40

 "value": "SP"

41

 }

42

 ]

43

 }

44

 ]

45

 }

46

 },

47

 "order-config.modal#header": {

48

 "children": [

49

 "order-config.form"

50

 ]

51

 },

52

 "order-config.title#header": {

53

 "props": {

54

 "formTitle": "Order Configuration for Header"

55

 }

56

 },

57

}

`

> If the `order-config.form` block does not have any children configured, a default form will be rendered automatically based on the [React Hook Form JSON Schema](https://read.calvincode.net/reader?url=https://github.com/vtex/react-hook-form-jsonschema) library. To declare children blocks according to your business needs, check out the [Advanced configuration](#advanced-configuration) section below.

### Step 3: Create `main` schema in Master Data

You must create a schema named `main` in Master Data, using the `order_configuration` data entity.

You can place a request using the Save schema by name endpoint of the [Master Data API - v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/schemas%23saveschemabyname) to do so.

The schema should contain all the data that you added in the form above, otherwise the data will not be persisted.

#### Request body example

`1

{

2

 "v-cache": false,

3

 "properties": {

4

 "clientId": {

5

 "type": "string"

6

 },

7

 "orderType": {

8

 "type": "string"

9

 },

10

 "state": {

11

 "type": "string"

12

 }

13

 },

14

 "v-default-fields": [

15

 "clientId",

16

 "orderType",

17

 "state"

18

 ],

19

 "v-indexed": [

20

 "clientId",

21

 "orderType",

22

 "state"

23

 ]

24

}

`

Refer to [Master Data API - v2 documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/schemas%23saveschemabyname) for more details.

### Step 4: Update orderForm configuration

It is also necessary to configure a new app in the `orderForm`.

First, place a `GET` [Get orderForm configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/reference/getorderformconfiguration) request to retrieve the current `orderForm` settings before updating them. By doing so you ensure that you will only change the properties you want in the next step.

Then, place a `POST` [Update orderForm configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/reference/updateorderformconfiguration) request, setting the following object inside the `apps` object in the request body:

`1

 {

2

 "fields": [

3

 "values"

4

 ],

5

 "id": "orderconfig",

6

 "major": 1

7

 }

`

#### Request body example

`1

{

2

 "paymentConfiguration": {

3

 "requiresAuthenticationForPreAuthorizedPaymentOption": false,

4

 "allowInstallmentsMerge": null,

5

 "blockPaymentSession": null,

6

 "paymentSystemToCheckFirstInstallment": null,

7

 "defaultPaymentSystemToApplyOnUserOrderForm": null

8

 },

9

 "taxConfiguration": null,

10

 "minimumQuantityAccumulatedForItems": 1,

11

 "decimalDigitsPrecision": 2,

12

 "minimumValueAccumulated": null,

13

 "apps": [

14

 {

15

 "fields": [

16

 "quoteId"

17

 ],

18

 "id": "b2b-quotes-graphql",

19

 "major": 1

20

 },

21

 {

22

 "fields": [

23

 "values"

24

 ],

25

 "id": "orderconfig",

26

 "major": 1

27

 }

28

 ],

29

 "allowMultipleDeliveries": true,

30

 "allowManualPrice": true,

31

 "maxNumberOfWhiteLabelSellers": null,

32

 "maskFirstPurchaseData": null,

33

 "recaptchaValidation": "vtexcriteria",

34

 "maskStateOnAddress": true

35

}

`

You can refer to [Checkout API documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-developer-docs/reference/updateorderformconfiguration) for more information.

### Advanced configuration

If desired, you can declare the `order-config.form` block by adding and configuring the `formFields` prop and an array of form children blocks (whose descriptions you can find below).

`1

{

2

 "order-config#static-page": {

3

 "props": {

4

 "formFields": [

5

 {

6

 "name": "orderType",

7

 "type": "string",

8

 "fieldType": "select",

9

 "label": "Order Type",

10

 "defaultValue": "res",

11

 "showInTitle": true,

12

 "options": [

13

 {

14

 "label": "Resale",

15

 "value": "res"

16

 },

17

 {

18

 "label": "Consumption",

19

 "value": "cons"

20

 }

21

 ]

22

 },

23

 {

24

 "name": "state",

25

 "type": "string",

26

 "fieldType": "select",

27

 "label": "State",

28

 "showInTitle": true,

29

 "required": true,

30

 "options": [

31

 {

32

 "label": "ES",

33

 "value": "ES"

34

 },

35

 {

36

 "label": "SP",

37

 "value": "SP"

38

 }

39

 ]

40

 },

41

 {

42

 "name": "someTextInput",

43

 "label": "Some Text Input",

44

 "fieldType": "input",

45

 "type": "string",

46

 "required": true,

47

 "showInTitle": true

48

 }

49

 ]

50

 },

51

 "children": [

52

 "order-config.title#static-page",

53

 "order-config.form#static-page"

54

 ]

55

 },

56

 "order-config.form#static-page": {

57

 "children": [

58

 "flex-layout.row#state-and-payment-method",

59

 "order-config.text#some-text-input",

60

 "order-config.submit"

61

 ]

62

 },

63

 "flex-layout.row#state-and-payment-method": {

64

 "children": [

65

 "order-config.dropdown#state",

66

 "order-config.radiogroup#payment-method"

67

 ],

68

 "props": {

69

 "blockClass": "stateAndPaymentMethod"

70

 }

71

 },

72

 "order-config.dropdown#state": {

73

 "props": {

74

 "pointer": "#/properties/state"

75

 }

76

 },

77

 "order-config.radiogroup#payment-method": {

78

 "props": {

79

 "pointer": "#/properties/paymentMethod"

80

 }

81

 },

82

 "order-config.text#some-text-input": {

83

 "props": {

84

 "pointer": "#/properties/someTextInput"

85

 }

86

 },

87

 "order-config.title#static-page": {

88

 "props": {

89

 "formTitle": "Order Configuration for Static Page"

90

 }

91

 }

92

}

`

| Block name              | Description                                                      |
| ----------------------- | ---------------------------------------------------------------- |
| order-config.submit     | Renders a Submit button.                                         |
| order-config.dropdown   | Renders the a dropdown field.                                    |
| order-config.radiogroup | Renders a radiogroup field.                                      |
| order-config.text       | Renders a text field.                                            |
| order-config.textarea   | Renders a text field with a wider range of available characters. |
| order-config.checkbox   | Renders a checkbox field.                                        |

#### Props

Check out the description of the available props below.

| Prop name  | Type   | Description                                                                          | Default Value | Block name                                                                                |
| ---------- | ------ | ------------------------------------------------------------------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------- |
| pointer    | string | Path to which the block must point in the formFields prop in order to properly work. | undefined     | order-config.dropdown, order-config.radiogroup, order-config.text, order-config.textarea, and order-config.checkbox |
| formFields | object | Object responsible for defining the form fields.                                     | undefined     | order-config.form                                                                                |

The `formFields` object contains the following props:

| Prop name   | Type    | Description                                                                                | Default Value |
| ----------- | ------- | ---------------------------------------------------------------------------------------------------------- | ------------- |
| name        | string  | Name of the field (only used as an identifier in your code).                                               | undefined     |
| type        | enum    | Value type accepted by the field. Possible values are string and number.                                   | string        |
| fieldType   | enum    | Input type accepted by the field. Possible values are: text, textarea, select, radio, and checkbox.        | text          |
| label       | string  | Field name shown to users.                                                                                | undefined     |
| showInTitle | boolean | Whether to display the value type accepted by the field on its name (true) or not (false).                 | false         |
| options     | object  | Field options to be defined in case select, radio, or checkbox values were declared in the fieldType prop. | undefined     |

The `options` object contains the following props:

| Prop name | Type   | Description                 | Default Value |
| --------- | ------ | --------------------------- | ------------- |
| label     | string | Option name shown to users. | undefined     |
| value     | string | Option value.               | undefined     |

## Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

| CSS Handles            |
| ---------------------- |
| formSubmitButton       |
| formSubmitContainer    |
| formErrorServer        |
| formErrorUserInput     |
| loader                 |
| orderConfigFormWrapper |
| formObject             |
| title                  |
| titleValues            |
| titleWrapper           |
| wrapper                |

[B2B components« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-configuration/docs/guides/b2b-components)[QuickorderNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.order-configuration/docs/apps/vtex.quickorder)

See also

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

ON THIS PAGE

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

Was this helpful?

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


[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 developing custom storefront components 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-developing-custom-storefront-components/docs/guides)

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

App Development

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

---

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

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/docs/guides/app-development-guides)

---

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

---

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

---

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

---

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

---

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

---

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

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/troubleshooting)

---

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

App Development

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

---

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

[Storefront apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/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-developing-custom-storefront-components/docs/guides/app-development-guides)

---

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

---

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

---

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

---

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

---

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

---

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

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

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

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

Developing custom storefront components

During the development process, it is normal to face critical questions regarding performance and internationalization, among other issues that directly affect the shopping experience.

Although **VTEX does not offer any support for custom projects**, we have put together the guidelines adopted by our own product team to help your development journey using Store Framework, VTEX IO, and the React technology.

Below you can find the best practices for tooling, features, flexibility, scalability, performance, accessibility, internationalization, and styling that you can adopt when creating your storefront component.

> Before applying the settings below, it is highly recommended that you understand how VTEX IO, Store Framework, and React work since the guidelines assume previous knowledge. You can dive deeper in [VTEX IO learning course](https://read.calvincode.net/reader?url=https://learn.vtex.com/) and the [React official documentation](https://read.calvincode.net/reader?url=https://reactjs.org/) for help.

## Tooling

When creating a custom component, use tools to facilitate code development by automatically formatting and testing it.

Features such as [ESLint](https://read.calvincode.net/reader?url=https://eslint.org/), [Typescript](https://read.calvincode.net/reader?url=https://www.typescriptlang.org/), and [Prettier](https://read.calvincode.net/reader?url=https://prettier.io/) are not mandatory for project deployment, but they help development, code maintenance, and testing.

The [React App repository](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/react-app-template) is the go-to model template for tooling since it provides formatting features alongside the [VTEX Test Tool](https://read.calvincode.net/reader?url=https://github.com/vtex/test-tools), a native VTEX testing tool that leverages [Jest](https://read.calvincode.net/reader?url=https://jestjs.io/).

Use Typescript types as an ally in your development journey since they provide autocomplete tools that can be used when developing and importing a new component. To have them handy, run the following command in your terminal:

`1

vtex setup --typings

`

> The above command will install all Typescript types from the apps listed in the app `dependencies` list in your project. Whenever you add a new dependency, the command must be run again.

## Feature development

### Store-specific

In an attempt to reuse code, one common mistake is to design a component that tries to perform multiple tasks.

Ensure you maintain a clear focus on the primary objective of the component. It is crucial to be as precise as possible in defining this goal.

Keep it simple. Components with several functionalities tend to mislead users in the interface and translate to a lot of code to manage behind the scenes, especially when handling APIs.

### Native-first

Before developing a custom component from scratch, make sure VTEX does not already offer the same feature natively through the [Store Framework native components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/vtex-io-apps).

Create your component importing and combining native components to achieve a better result. For example:

`1

import React from 'react'

2

import { ProductSummaryList } from 'vtex.product-summary'

3

4

interface Props {

5

 title?: string

6

}

7

8

function Shelf({ title }: Props) {

9

 return (

10

 <div>

11

 <h3>{title}</h3>

12

 <ProductSummaryList />

13

 </div>

14

 )

15

}

16

17

export default Shelf

`

> Notice how the Store Framework solution relies on specific apps for [integrations with third-party solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-accessibe) and [layout structuring](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-condition-layout), besides having template components that play a particular role once rendered to the end users, such as the [Product Identifier app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-identifier). When developing your storefront component, remember that segmentation is key to light code and a successful component.

## Flexibility and scalability

### Rendering

Your component should have the flexibility to handle all possible scenarios once rendered.

Be careful not to get hyperfocused on its appearance when fully rendered. It is important to consider all other possible statuses during the rendering process, such as:

* `Loading` \- When the component is already visible to users but not fully rendered due to data loading.
* `Error` \- When the component cannot be rendered due to an error.
* `Empty` \- When the component cannot fetch data and is rendered with empty content.

> Render Runtime is the VTEX app that renders the storefront. Read the [app documentation](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/render-runtime) and get to know some valuable variables for your project.

Also, be careful when using browser variables, such as `window` and `document`, since they only exist in the browser context and may affect your component display when opting for server-side rendering.

Before implementing your component, check which variables are available on the browser using the [Render Runtime](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/render-runtime%23canusedom) `canUseDom` variable.

### Browser compatibility

The VTEX IO platform automatically provides JavaScript polyfills for implementing features on web browsers that cannot do that.

Although this practice ensures the good performance of your component in several user agents, you may be working with NPM libraries that cannot be implemented in old web browsers.

Check which web browsers are more common among your audience and focus on those when developing your storefront component. For example, some stores are still IE11-oriented, even though it is not as widely used anymore.

### Prop substitution

The simplicity of boolean props, with switch component behaviors `true` and `false`, makes them easy to use in React projects.

However, they do not offer great scalability when taking into account that the component evolution may require a third (or more) behavior to be enabled.

Boolean props, therefore, demand creating brand-new props whenever unprecedented use cases are introduced to your component.

> Once the component is deployed, avoid modifying its props (creating, removing, and/or updating them). Modifying props can be costly because it can directly impact API maintenance and affect other developers working with it.

With that in mind, replace the boolean props with enum props. The latter has a broader range and is more adapted to keep up with the component evolution and the several behaviors it may have to handle.

For example:

| Do not use | Use           |                 |
| ---------- | ------------- | --------------- |
| Prop name  | show          | visibility      |
| Values     | true or false | visible or none |

To ensure long-term compatibility and resilience of the component, it is recommended to use enum props during development.

### Responsive values

One of the critical points of flexibility and scalability is having a component that is ready to be displayed on any possible device.

Instead of creating specific props to handle typical device scenarios, leverage the [VTEX Responsive Values app](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/responsive-values) to enable the component props to accept different values from devices, such as desktop and mobile.

| ✅ Do                                                                                | ❌ Don't                                                                                |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":616,"height":490,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":54548,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-custom-storefront-components-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-custom-storefront-components-1.png) | ![{"base64":"  ","img":{"width":744,"height":390,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":43910,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-custom-storefront-components-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-custom-storefront-components-0.png) |

> Combine enum props with responsive values, as shown below, and enhance code quality with highly optimized props!

![{"base64":"  ","img":{"width":682,"height":494,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":58949,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-custom-storefront-components-2.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-custom-storefront-components-2.png)

### Slots

Slots allow you to render components through props instead of declaring an array of blocks in the Store Theme. Its simplicity removes the need for the `allowed` property in the [interface](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-interface) file and lightens your code, increasing flexibility when developing a new storefront component.

You can learn more about Slots [here](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-slots).

| ✅ Use                                                                                | ❌ Do not use                                                                                |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![{"base64":"  ","img":{"width":900,"height":564,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":83853,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-custom-storefront-components-4.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-custom-storefront-components-4.png) | ![{"base64":"  ","img":{"width":634,"height":504,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":53695,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-custom-storefront-components-3.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-developing-custom-storefront-components-3.png) |

> If you are not using Slots, we recommend using the `children` [composition](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-composition).

## Performance

In the digital world, store website performance plays an essential role in the user experience, directly impacting the sales conversion rate and user session time, among other important metrics.

In addition to the practices listed below, do not forget to read our documentation on [optimizing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-optimizing-performance) to enable advanced configurations and boost the performance of your store.

### NPM libraries

Avoid using heavy npm libraries because they negatively impact page loading time and can affect the user experience.

Choose light libraries to support your code and optimize performance.

> Evaluate the impact of npm libraries on user experience at [bundlephobia.com](https://read.calvincode.net/reader?url=https://bundlephobia.com/).

### Data sharing

Use the React context to share data between components and avoid over-fetching at all costs.

The Dispatcher and State patterns, as well as the useMemo feature, are powerful resources that can be made available by the context and used by your component.

> Read the article on [using the React context effectively](https://read.calvincode.net/reader?url=https://kentcdodds.com/blog/how-to-use-react-context-effectively) for a detailed explanation about how the React context can work in your favor.

### Media upload

Using media in storefront components can be tricky if you do not think about performance critically.

When [uploading the desired media assets to the VTEX File Server](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-the-assets-builder), clearly define height and width parameters to avoid data over-fetching and resizing on the client-side. This way, you can set up your component to request media assets based on the required size per breaking point.

### Rendering

Performance can be optimized during component rendering as well.

When declaring the [interface](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-interface) of a block, set the `Hydration` attribute and pass `on-view` as its value to only load and correctly render your component once users find it on the interface.

The [Footer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-footer) is a good example of a Store Framework native component that uses this attribute.

> The default value for `Hydration` is `always`, meaning that the component will be loaded and rendered as expected, regardless of the user's view.

## Accessibility

Prioritizing accessibility leads to an excellent opportunity to bring more users closer to the store's shopping experience.

Adopt the following practices to promote inclusion:

* Enable user interactivity through the keyboard.
* Bet on color contrast when defining the component style. You can use the [ChromeLens extension](https://read.calvincode.net/reader?url=http://chromelens.xyz/) to help you with that.
* Avoid the usage of HTML div to enhance accessibility for screen readers and improve search engine optimization.

## Internationalization

Your component should be ready to be displayed worldwide if store globalization is a goal.

In terms of content internationalization, be cautious with string text translations. You can leverage the Messages app, a native VTEX IO service for automatic translations, and have manual translations as well.

Remember that internationalization can mean more than string text translations. Consider interpolation, pluralization, price, and percentage formatting, among other differences that may come your way when crossing borders.

Read the [Translating the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-8-translating-the-component) article and the [multi-language store documentation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-multi-language-stores) to understand how you can make these adjustments in your component!

## Styling

Style customization is one of the main steps when building a page template and developing storefront components.

Use Tachyons instead of CSS Modules whenever possible when applying CSS to your project. The Tachyons solution is usually better for different storefront scenarios. CSS Modules, on the other hand, have use restrictions depending on the component behavior.

Get acquainted with the particularities of both tools to make the best decision for the component style without wasting development efforts.

Also, do not forget to make CSS handles available to your component users if distribution at the VTEX App Store is a goal. Through CSS handles, future developers can style your storefront component based on their specific needs.

Read the documentation on [Defining styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-5-defining-styles) to learn about Tachyons, CSS Modules, and CSS handles, as well as their use cases.

Another good styling tip is to be careful with the breakpoints on the screen for different devices. Remember to set the component style for every possible scenario on the interface!

> The [VTEX Styleguide](https://read.calvincode.net/reader?url=https://styleguide.vtex.com/) is a go-to document during style customization. Our team constantly updates the guide and provides valuable design guidelines.

## Engagement

Finally, the best practice you can adopt is keeping up with the VTEX IO platform! Engage with us:

* Follow the [Developer Portal's release notes feed](https://read.calvincode.net/reader?url=https://developers.vtex.com/updates/release-notes).
* Subscribe to the [VTEX Developer Newsletter](https://read.calvincode.net/reader?url=https://forms.gle/DHo3SS7ZaGCvAMow8).
* Follow our [YouTube channel](https://read.calvincode.net/reader?url=https://www.youtube.com/@VTEXDevelopers) for developers.
* Join the [Community](https://read.calvincode.net/reader?url=https://community.vtex.com/).

Contributors

1

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

[9\. Making your app publicly available« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components//docs/guides/vtex-io-documentation-10-making-your-app-publicly-available)[Pixel appsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components//docs/guides/vtex-io-documentation-1-developnativeintegrationswithpixelapps)

Contributors

1

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

ON THIS PAGE

[Tooling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23tooling)

[Feature development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23feature-development)

[Store-specific](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23store-specific)[Native-first](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23native-first)

[Flexibility and scalability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23flexibility-and-scalability)

[Rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23rendering)[Browser compatibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23browser-compatibility)[Prop substitution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23prop-substitution)[Responsive values](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23responsive-values)[Slots](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23slots)

[Performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23performance)

[NPM libraries](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23npm-libraries)[Data sharing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23data-sharing)[Media upload](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23media-upload)[Rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23rendering)

[Accessibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23accessibility)

[Internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23internationalization)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23styling)

[Engagement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23engagement)

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/Perks/best-practices/vtex-io-documentation-developing-custom-storefront-components.md)

Copy page

On this page

ON THIS PAGE

[Tooling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23tooling)

[Feature development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23feature-development)

[Store-specific](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23store-specific)[Native-first](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23native-first)

[Flexibility and scalability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23flexibility-and-scalability)

[Rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23rendering)[Browser compatibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23browser-compatibility)[Prop substitution](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23prop-substitution)[Responsive values](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23responsive-values)[Slots](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23slots)

[Performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23performance)

[NPM libraries](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23npm-libraries)[Data sharing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23data-sharing)[Media upload](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23media-upload)[Rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23rendering)

[Accessibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23accessibility)

[Internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23internationalization)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23styling)

[Engagement](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-custom-storefront-components/docs/guides/vtex-io-documentation-developing-custom-storefront-components%23engagement)

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