The frontend of an online store, also known as the storefront, is the store's visual and interactive interface. This is where customers interact with products and perform actions such as navigating categories, searching, and adding products to their cart.

This article helps you choose the right technology for building your storefront and the settings required for it, considering the following aspects:

• VTEX storefront development technologies.
• Main features of each technology.
• Development stages.

The frontend implementation is a stage focused on defining the technologies to implement based on the business needs related to the storefront.

The frontend can be implemented by the company's internal development team or our implementation partners .Users with access to the VTEX Admin can view our partner list through the Partner Portal.

Before implementing the frontend, you should configure the following steps in your store:

Step	Description
Defining the store's architecture and sales strategy	The team defines your VTEX store's architecture based on your business model's strategies and needs. Learn more in the Accounts and architecture article.
Configuring roles	The team configures the roles needed for each user to use the VTEX platform. Learn more in the Roles article.
Configuring catalog	The team configures the product catalog, category tree, and related information, such as descriptions, images, and prices, to populate and test the store, including features such as product listing pages (PLP), search features, product details pages (PDP), and checkout. Not having a catalog can result in incomplete testing and data integration problems, which delays implementation. Learn more in the VTEX modules I article.
Defining the apps needed to operate the store	The team defines the native and third-party apps needed to operate the store. For stores that will be built using Store Framework, there is a list of native and third-party apps. Learn more in the VTEX IO apps article.

The development stage can run in parallel with other backend integrations and module configuration steps, such as setting up payment methods and logistics. This will depend on the type of architecture and planning chosen for the VTEX store, and the implementing agency or VTEX Support should monitor these processes.

VTEX has three different technologies for storefront development: FastStore, Store Framework and CMS Portal Legado. Legacy CMS Portal was VTEX's first technology for building storefronts, based on HTML, CSS, and JavaScript, and all development and code editing for this technology is done via the VTEX Admin.

Although some stores still use it, the CMS Portal Legado is a legacy technology and is no longer available to new stores starting with VTEX.

The following sections are about the main characteristics and features of FastStore and Store Framework.

FastStore is a fresh innovative storefront technology for development teams to create stores focused on performance and stability. It's also an easy-to-maintain technology when editing your store's pages.

This technology is an open-source toolkit based on React and the Jamstack architecture. For more information, see the FastStore documentation portal.

The following table lists some of FastStore's main features:

Feature	Description
Starter	Functional template designed for fast store development, which seamlessly integrates the FastStore UI components. It includes pages such as Home, product list pages (PLPs), product detail pages (PDPs), and minicart features.
FastStore UI	Component library for ecommerce that provides basic features and design, enabling faster implementation and storefront customization.
Headless technology	Customization process that separates the store code developed by the development team from the base code provided by VTEX. This simplifies updates to the store's frontend, allowing updates without impacting the customized code.
GitHub integration	Development teams can manage all storefront code using GitHub.
Headless CMS	Content management system (CMS) that allows editing and creating new pages and previewing content changes.
Automated checks	Functional tests and the store's performance and code quality assessment run continuously and automatically to identify slowdowns and bugs throughout the storefront development stage.
Intelligent Search integration	Autocomplete feature in the search bar, which also offers search suggestions and products based on configurable preferences.
Checkout, My Account, and Login integrations	Integration with other stages of the customer buying journey. VTEX stores previously developed using Store Framework can keep settings related to Checkout, My Account, and Login when migrated to FastStore, as they benefit from the same infrastructure.

Store Framework is a well-established solution providing a technology framework for low-code storefront implementation with a focus on the composable commerce model. In other words, the framework allows the combination of different VTEX IO apps to build a storefront.

In this technology, the store's implementation and launch are based on pre-built components, also known as blocks, and customization of these components tailored to specific business needs. This framework is based on:

• React
• TypeScript
• Node.js
• GraphQL

For more information, read the What is VTEX Store Framework article.

When talking about frontend implementation, remember that VTEX IO is not a storefront building technology, but rather a development platform. The Store Framework is a technology for building storefronts that runs on VTEX IO, a cloud-based environment and development solution for customized apps and storefronts.

This means that with VTEX IO, you develop your code locally. However, when it comes to deploying and running the store, VTEX IO manages the infrastructure, CI/CD, and security and takes care of the deployment process. The image below shows how these concepts relate to each other:

The following table shows some of Store Framework's main features:

Feature	Description
Starter	Functional template designed for fast store development, which seamlessly integrates pre-built components.
Pre-built components	React-based native components.
Modular architecture	Customization and code reuse of interface elements to quickly launch and replicate stores.
Workspaces and test environments	It allows you to create different store versions and test them beforehand to make changes safely.
Site Editor	Content management system (CMS) for editing templates and building new pages on the store's website.
Native A/B testing	It allows you to test and validate the store version with the highest conversion rates.
Intelligent Search integration	Autocomplete feature in the search bar, which also offers search suggestions and products based on configurable preferences.
Progressive Web App (PWA)
Enables native app-like experiences on any device with PWA-ready technology.
Cross-border	It allows a VTEX multistore to operate in different countries with a specific approach for each one.
Checkout, My Account, and Login integrations	Integration with other stages of the customer buying journey.

When choosing between Store Framework and FastStore, the team must evaluate the project's specific needs and consider the team's experience with both technologies.

The Store Framework is a more mature option that offers a flexible structure suitable for complex use cases and support for stores operating internationally and in multiple languages. For B2B stores, Store Framework is a good choice, as it provides the B2B Suite, an app that allows the management of organizations, storefront permissions, and checkout settings for B2B commerce relationships.

FastStore is an evolving alternative focused on store performance. This solution offers a fast loading experience, crucial for keeping store visitors engaged and reducing cart abandonment rates. For simpler use cases with a focus on performance, FastStore cab be the recommended technology.

The VTEX support team can help you choose between one of the available storefront technologies.

The table below compares the two technologies based on their main features:

Feature	Store Framework	FastStore
Starter (initial template)	The Store Theme is the initial template the team can use as a basis to launch the store project or start from scratch.	The FastStore Starter is already available after completing the FastStore Onboarding. This allows the team to kick off the project with a base template focused on performance.
Performance	SSR (Server Side Rendering) features generate the complete HTML of a page on the server as a response to a page request, while SPA (Single Page Application) loads elements such as the header only once the page is loaded.	Maximum performance possible, as it uses Jamstack architecture to create the store's website pages in advance, making site delivery faster and more resource-efficient.
Tech Stack	TypeScript React GraphQL Node.js	TypeScript React Next.js GraphQL Node.js
Component customizations	Flexible and easy to customize.	It allows native component customization and guarantees store performance following best practices.
Code management	It uses workspaces and the VTEX IO architecture for versioning, updating, and rolling back components and apps.	It uses GitHub and the branch concept for collaboration. Authorized users in the storefront repository on GitHub can view and work on the code.
Community and Support	Official documentation VTEX community	Official documentation
Performance Monitoring and Analytics	Possibility of configuring VTEX Google Tag Manager to analyze store navigation data. Possibility of increasing store performance using optimization tools.	Possibility of configuring the native Analytics module. Possibility of improving store performance using technology tools.
Content Management Systems (CMS)	Compatible with Site Editor.	Compatible with Headless CMS.

Before launching the store into production and going live, list the essential settings and features to add to the storefront. These definitions help you define the Minimum Viable Product (MVP) for the storefront. The following topics outline:

• FastStore MVP requirements
• Store Framework MVP requirements

The following recommendations are for basic storefront setup. Other settings may be required depending on the architecture chosen for your store's operation.

The development team must start a new project with FastStore through the Onboarding process. The team will have a basic, functional store based on FastStore Starter at the end of this process. After this, the following basic requirements for the page will have been implemented:

• Home
• Product Listing Page (PLP)
• Product Details Page (PDP)
• Minicart

FastStore MVP requirements

Below are the requirements for each topic:

• Catalog
  • Adding products and SKUs
  • Creating a category tree (departments, categories and subcategories)
  • Defining filters and types of specifications per category
  • Adding SKU images
  • Adding SKU prices
  • Inventory management
• VTEX Intelligent Search
  • Integrating the Intelligent Search app with the account
• Headless CMS integration
  • Configuring Headless CMS in the account
  • Defining content types and sections that will be available
  • Creating and editing pages using Headless CMS in the VTEX Admin
• Homepage
  • Editing the components and layouts already listed in Starter
• Login page
  • VTEX Login integration
  • Editing the components and layouts already listed in Starter
• Product Listing Page (PLP)
  • Editing the components and layouts already listed in Starter
• Product Details Page (PDP)
  • Editing the components and layouts already listed in Starter
• Minicart configuration
  • Editing the components and layouts already listed in Starter
• Checkout
  • VTEX Checkout integration
  • VTEX Order Placed e My Account integration
• Logistics
  • Adding loading docks
  • Adding shipping strategies
  • Associating a shipping strategy and warehouse with a loading dock
• Payments
  • Configuring the Notes Payable provider
  • Adding gateway providers
• Performance and SEO
  • Improving the store performance using the right technology tools
• Metrics
  • Configuring the Analytics module

The development team must start a new project with Store Framework by cloning and linking the store theme to a development workspace. The store theme is a basic functional template to kick off the store with essential components and pages, such as:

• Homepage
• Product Listing Page (PLP)
• Product Details Page (PDP)

Store Framework MVP requirements

Below are the requirements for each topic:

• Catalog
  • Adding products and SKUs
  • Creating a category tree (departments, categories and subcategories)
  • Defining filters and types of specifications per category
  • Adding SKU images
  • Adding SKU prices
  • Inventory management
• VTEX Intelligent Search
  • Integrating the Intelligent Search app with the account
• Homepage
  • Editing the components and layouts already listed in Starter
• Login page
  • Integrating with VTEX Login
  • Editing the components and layouts already listed in Starter
• Product Listing Page (PLP)
  • Editing the components and layouts already listed in Starter
• Product Details Page (PDP)
  • Editing the components and layouts already listed in Starter
• Minicart configuration
  • Editing the components and layouts already listed in Starter
• Logistics
  • Adding loading docks
  • Adding shipping strategies
  • Associating a shipping strategy and warehouse with a loading dock
• Payments
  • Configuring the Notes Payable provider
  • Adding gateway providers
• Performance
  • Improving the store performance using performance optimization tools
• Metrics
  • Configuring Google Tag Manager