Storefront apps

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

While the VTEX IO platform and Store Framework provide high-quality and customizable React storefront blocks, there may be cases where you require specific frontend solutions not covered by our native components. In such cases, the VTEX IO platform empowers you to create your own storefront apps with React.

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

Here's an overview of the parts:

Part 1. Setting up your development environment

Learn how to set up your development environment to build storefront components with VTEX IO.

Part 2. Creating the new app

Learn how to create a new app on the VTEX IO platform, which will serve as the foundation of your storefront component.

Part 3. Declaring a theme block

Learn how to declare a theme block, which is a reusable piece of code that defines the structure of your storefront component.

Part 4. Defining styles

Learn how to define styles for your storefront components, including how to export CSS handles for further customization.

Part 5. Structuring documentation

Learn how to structure documentation for your storefront component, making it easier for other developers to use and understand.

Part 6. Consuming data

Learn how to consume data from different sources and integrate it into your storefront components,

Part 7. Translating the component

Learn how to translate your storefront components into different languages, making them accessible to a broader audience.

Part 8. Improving performance with caching

Learn how to use caching to improve the performance of your storefront components, ensuring that they load quickly and provide a seamless shopping experience.

Part 9. Making your app publicly available

Learn how to make your app available to other users, either by publishing it for scoped usage or by submitting it to the VTEX App Store.

The storefronts apps you develop can be used in your store's theme or be made available to other stores interested in the same solution through VTEX App Store. During the development process, make sure to follow our best practices on developing custom storefront components and App Store Guidelines to ensure the best results.

Please note that custom apps are the liability of the app's vendor, and VTEX shall bear no responsibility for these apps nor provide support for their users.