Storefront Development

Storefront Development
Store Framework

Store Framework is a front-end development framework designed to enhance and simplify the creation of ecommerce websites within VTEX. Built on the VTEX IO development platform and React technology, the framework offers native storefront components in JSON format.

Store Framework relies on the following pillars:

ComposabilityAssemble pre-built and custom components to create a storefront tailored to specific business needs.
Flexibility and customizationAdapt storefronts to unique design requirements and functional preferences.
WorkspacesCreate multiple store versions and test them to guarantee reliability and deploy changes safely.
A/B testsExperiment with different versions of a storefront to enhance user experience and performance.
VTEX IO cloud infrastructureDevelop in a fully managed auto-scalable infrastructure.

Store Framework architecture

The diagram shows a typical Store Framework architectural flow, which includes the following components:

  • Codebase: The source code for Store Framework and VTEX IO apps is cloud-native.
  • Build process: The process of converting the source code into a deployable application, based on VTEX IO Builders.
  • Deployment: The process of deploying the application to a production environment.
  • Business user touchpoint: where administrative users interact with storefront settings, on CMS and Site Editor.
  • Customer touchpoint: where customers interact with the storefront, usually on a webstore or PWA.

Developer Tools

Developers using Store Framework can count on a set of tools:

  • VTEX IO CLI: Interact with the VTEX platform using our command-line tool.
  • A/B tests: Compare traffic between two workspaces.
  • Edition App: Streamline your setup by installing a preset bundle of settings, policies, backend and frontend apps.
  • Development workspaces: Test and preview your code in workspaces dedicated to development, without affecting the live store.
  • Production workspaces: Run tests and quality assurance in a workspace that is ready to handle live traffic.
  • Builders: Connect your apps to our services quickly using VTEX IO Builders.


To work with this framework, you should be familiar with the following technologies:


This quickstart guide is a brief introduction to the VTEX Store Framework. For more detailed step-by-step documentation, check Store Framework - Getting started.

1. Initial settings

  1. Install VTEX IO CLI. You will need it to run commands in the following steps.

  2. Log in to your VTEX account:

    vtex login {accountName}

  3. Open a support ticket to set up your account’s Edition app to vtex.edition-store@3.x or higher. Refer to the Edition App article to identify the most suitable version for your scenario.

  4. Install Intelligent Search (if the account’s Edition app is vtex.edition-store@4.x or lower) and integrate it with your store’s catalog according to this guide.

2. Setting up the project

  1. Navigate to a local file directory where you want our boilerplate store theme to be saved:

    cd {folderName}

  2. Start a new project:

    vtex init

  3. Select store by navigating with your arrow keys and pressing Enter. When prompted to confirm, type y to clone the minimum-boilerplate-theme to your folder.

  4. Create a workspace:

    vtex use {workspaceName}

  5. Navigate to the minimum-boilerplate-theme directory:

    cd minimum-boilerplate-theme

  6. Link your local repository with the workspace:

    vtex link

  7. Access your workspace:

    vtex browse

Now you can make changes to the local repository and test them live in the workspace without altering the store's final public version.

Next steps

Customizing your theme

Building your own store theme
Learn how to create your store theme from scratch.
Building pages
Create custom pages for your ecommerce.
Using components
Leverage from premade components to build your store theme.
Customize your store's style.

Deploying your changes

Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Suggest edits (Github)
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page