{"section":"tracks","requestedLocale":"en","requestedSlug":"frontend-implementation","locale":"en","slug":"frontend-implementation","path":"docs/en/tracks/onboarding-guide/vtex-store-overview/frontend-implementation.md","branch":"main","content":"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.\n\nThis article helps you choose the right technology for building your storefront and the settings required for it, considering the following aspects:\n\n- VTEX storefront development technologies.\n- Main features of each technology.\n- Development stages.\n\nFrontend implementation is the stage where you define which technologies to use based on the business needs for the storefront.\n\n> ℹ️ The frontend can be implemented by the company's internal development team or by our [implementation partners](https://help.vtex.com/docs/tracks/accounts-and-architecture#implementation-partners). [Users](https://help.vtex.com/docs/tutorials/managing-admin-users) with access to the VTEX Admin can view our partner list on the [Partner Portal](https://www.vtex.com/en-us/partners/).\n\n## Before you begin\n\nBefore implementing the frontend, you should configure the following steps in your store:\n\n| Step | Description |\n| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Defining the store architecture and sales strategy | The team defines your VTEX store architecture based on your business model's strategies and needs.

Learn more in the [Accounts and architecture](/en/docs/tracks/accounts-and-architecture) article. |\n| Configuring roles | The team configures the roles needed for each [user](/en/docs/tutorials/managing-admin-users) to use the VTEX platform.

Learn more in the [Roles](/docs/tutorials/roles) article. |\n| Configuring catalog | The team configures the product [catalog](/en/tracks/vtex-store-overview--eSDNk26pdvemF3XKM0nK9/75MX4aorniD0BYAB8Nwbo7#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 delay implementation.

Learn more in the [VTEX modules I](/docs/tracks/vtex-modules-i) article. |\n| 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](#store-framework), a list of native and third-party apps is available.

Learn more in the [VTEX IO apps](https://developers.vtex.com/docs/vtex-io-apps) article. |\n\n> ℹ️ The [development stage](#development-stages) can run in parallel with other [backend integrations](/docs/tracks/backend-integrations) and [module configuration](/docs/tracks/vtex-modules-i) steps, such as configuring payment methods and logistics. This will depend on the type of [architecture and planning](/en/docs/tracks/accounts-and-architecture) chosen for the VTEX store. The [implementing agency](/en/tracks/vtex-store-overview--eSDNk26pdvemF3XKM0nK9/4yPqZQyj0t675QpcG7H6yl#implementation-partners) or [VTEX Support](/en/docs/tracks/vtex-support) should monitor these processes.\n\n## Frontend development technologies on VTEX\n\nVTEX has three different technologies for storefront development: [FastStore](#faststore), [Store Framework](#store-framework), and [CMS Portal (Legacy)](/en/docs/tracks/legacy-cms-portal). CMS Portal (Legacy) 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.\n\n> ⚠️ Although some stores still use it, [CMS Portal (Legacy)](/en/docs/tracks/legacy-cms-portal) is a legacy technology and is no longer available for new VTEX stores.\n\nThe following sections cover the main characteristics and features of FastStore and the Store Framework.\n\n## Implementation workflow\n\nAlthough the tools vary by technology, storefront implementations generally follow this workflow:\n\n1. **Plan:** Define the storefront scope, information architecture, design, integrations, and acceptance criteria.\n2. **Prepare:** Configure access, development environments, commerce data, and required apps or services.\n3. **Develop:** Implement pages, components, styling, and storefront behavior using the selected technology.\n4. **Integrate:** Connect content management, search, checkout, login, My Account, analytics, and any required external services.\n5. **Test:** Validate functionality, content, responsive behavior, accessibility, SEO, analytics, and performance.\n6. **Go live:** Complete production checks, deploy the storefront, point the store domain to it, and monitor the launch.\n\n## FastStore\n\nFastStore 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.\n\nThis technology is an open-source toolkit based on [React](https://react.dev/) and the [Jamstack](https://jamstack.org/) architecture. For more information, see the [FastStore](https://developers.vtex.com/docs/guides/faststore) documentation portal.\n\n### FastStore main features\n\nThe following table lists some of the main features of FastStore:\n\n| Feature | Description |\n|---|---|\n| [Starter](https://starter.vtex.app/) | Functional template designed for fast store development, which seamlessly integrates the [FastStore UI](https://developers.vtex.com/docs/guides/faststore/components-index) components. It includes pages such as Home, product list pages (PLPs), product detail pages (PDPs), and minicart features. |\n| [FastStore UI](https://developers.vtex.com/docs/guides/faststore/components-index) | Component library for ecommerce that provides basic features and design, enabling faster implementation and storefront customization. |\n| 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. |\n| [GitHub](https://github.com/) integration | Development teams can manage all storefront code using [GitHub](https://github.com/). |\n| [CMS](https://help.vtex.com/docs/tutorials/cms-overview) | Content management system (CMS) that allows editing and creating new pages and previewing content changes. |\n| Automated checks | Functional tests, store performance, and code quality assessments run continuously and automatically to identify slowdowns and bugs throughout the storefront development stage. |\n| [Intelligent Search](https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment#step-4-enabling-the-vtex-intelligent-search-app) integration | Autocomplete feature in the search bar, which also offers search suggestions and products based on configurable preferences. |\n| [Checkout](https://developers.vtex.com/docs/guides/faststore/go-live-3-integrating-the-vtex-checkout), [My Account and Login](https://developers.vtex.com/docs/guides/faststore/go-live-4-integrating-the-vtex-order-placed-and-my-account) 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. |\n\n## Store Framework\n\nStore Framework is a well-established, low-code solution for storefront implementation, with a focus on the composable commerce model. This means the framework allows you to combine different [VTEX IO](https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io) apps to build a storefront.\n\nIn this technology, store implementation and launch are based on pre-built components, also known as blocks, which are then customized to meet specific business needs. This framework is based on:\n\n- React\n- TypeScript\n- Node.js\n- GraphQL\n\nFor more information, see the [What is VTEX Store Framework](https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-store-framework) article.\n\n### Development environment\n\nWhen discussing frontend implementation, remember that [VTEX IO](https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-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.\n\nThis 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, security, and the deployment process. The image below shows how these concepts relate to each other:\n\n![Frontend development architecture](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tracks/onboarding-guide/vtex-store-overview/frontend-implementation_1.png)\n\n### Store Framework main features\n\nThe following table shows some of the main features of Store Framework:\n\n| Feature | Description |\n| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [Starter](https://github.com/vtex-apps/store-theme) | Functional template designed for fast store development, which seamlessly integrates pre-built components. |\n| [Pre-built components](https://developers.vtex.com/docs/vtex-io-apps) | React-based native components. |\n| Modular architecture | Customization and code reuse of interface elements to quickly launch and replicate stores. |\n| [Workspaces and test environments](https://developers.vtex.com/docs/guides/vtex-io-documentation-workspace) | Creation of different store versions for safe testing before launch. |\n| [Site Editor](/en/docs/tutorials/site-editor-overview) | Content management system (CMS) for editing templates and building new pages on the store's website. |\n| [Native A/B testing](https://developers.vtex.com/docs/guides/ab-tests) | Testing and validation of store versions to identify the highest-converting one. |\n| [Intelligent Search](/en/docs/tracks/overview-intelligent-search) integration | Autocomplete feature in the search bar that also offers search and product suggestions based on configurable preferences. |\n| [Progressive Web App (PWA)](/en/docs/tutorials/enabling-pwa-push-notifications-in-your-store) | Enables native app-like experiences on any device with PWA-ready technology. |\n| [Cross-border](/en/docs/tracks/cross-border-stores) | Support for a VTEX [multistore](/en/tracks/vtex-store-overview--eSDNk26pdvemF3XKM0nK9/4yPqZQyj0t675QpcG7H6yl#multistore) to operate in different countries, each with its own approach. |\n| Checkout, [My Account](/en/docs/tutorials/how-my-account-works), and Login integrations | Integration with other stages of the customer buying journey. |\n\n## Choosing the frontend technology\n\nWhen choosing between Store Framework and FastStore, the team must evaluate the project's specific needs and consider the team's experience with both technologies.\n\nStore 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.\nFor B2B stores, Store Framework is a good choice, as it provides the [B2B Suite](https://developers.vtex.com/docs/apps/vtex.b2b-suite), an app that allows the management of organizations, storefront permissions, and checkout settings for B2B commerce relationships.\n\nFastStore is an evolving alternative focused on store performance. This solution offers a fast-loading experience, which is crucial for keeping store visitors engaged and reducing cart abandonment rates. For simpler use cases focused on performance, FastStore can be the recommended technology.\n\n> ℹ️ The [VTEX support](/en/docs/tracks/vtex-support) team can help you choose between one of the available storefront technologies.\n\nThe table below compares the two technologies based on their main features:\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
**Feature****Store Framework****FastStore**
Starter (initial template)The [Store Theme](https://github.com/vtex-apps/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](https://starter.vtex.app/) is already available after completing the [FastStore Onboarding](https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project). This allows the team to kick off the project with a base template focused on performance.
PerformanceUses SSR (Server Side Rendering) features to generate the complete HTML of a page on the server as a response to a page request, and SPA (Single Page Application) to load elements such as the header only once the page is loaded.Enables maximum performance by using the [Jamstack](https://jamstack.org/) architecture to pre-generate the store's pages, making delivery faster and more resource-efficient.
Tech Stack\n
    \n
  • TypeScript
    • \n
  • React
    • \n
  • GraphQL
    • \n
  • Node.js
    • \n
\n 		\n
    \n
  • TypeScript
    • \n
  • React
    • \n
  • Next.js
    • \n
  • GraphQL
    • \n
  • Node.js
    • \n
\n
Component customizationsFlexible and easy to customize.Allows native component customization and guarantees store performance following best practices.
Code managementUses [workspaces](https://developers.vtex.com/docs/guides/vtex-io-documentation-workspace) and the VTEX IO architecture for versioning, updating, and rolling back components and apps.Uses GitHub and the [branch](https://docs.github.com/pt/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches) concept for collaboration. Authorized users in the storefront repository on GitHub can view and work on the code.
*Community and Support*\n
    \n
  • [Official documentation](https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-store-framework)
    • \n
  • [VTEX Community](https://community.vtex.com/c/store-development/store-framework/17)
    • \n
\n 		\n
    \n
  • [Official documentation](https://developers.vtex.com/docs/guides/faststore)
    • \n
\n
*Performance Monitoring and Analytics*\n
    \n
  • Possibility of configuring [VTEX Google Tag Manager](https://developers.vtex.com/docs/guides/google-tag-manager) to analyze store navigation data.
    • \n
  • Possibility of increasing store performance using [optimization tools](https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-optimizing-performance).
    • \n
\n 		\n
    \n
  • Possibility of configuring the native Analytics module.
    • \n
  • Possibility of improving store performance using technology tools.
    • \n
\n
Content Management Systems (CMS)Compatible with [Site Editor](/en/docs/tutorials/site-editor-overview).Compatible with [CMS](https://help.vtex.com/docs/tutorials/cms-overview).
\n\n## Development stages\n\nBefore launching the store into production and [going live](/en/docs/tracks/planning-the-go-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:\n\n- [FastStore MVP requirements](#faststore-mvp-requirements)\n- [Store Framework MVP requirements](#store-framework-mvp-requirements)\n\n> ℹ️ The following recommendations are for basic storefront setup. Other settings may be required depending on the [architecture chosen](/en/docs/tracks/accounts-and-architecture) for your store's operation.\n\n### Development using FastStore\n\nThe development team must start a new project with FastStore through the [Onboarding](https://developers.vtex.com/docs/guides/faststore/getting-started-2-starting-the-project) process. The team will have a basic, functional store based on [FastStore Starter](https://starter.vtex.app/) at the end of this process. After this, the following basic requirements for the page will have been implemented:\n\n- Homepage\n- Product Listing Page (PLP)\n- Product Details Page (PDP)\n- Minicart\n\n![FastStore template](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tracks/onboarding-guide/vtex-store-overview/frontend-implementation_2.png)\n\n#### FastStore MVP requirements\n\nBelow are the requirements for each topic:\n\n- Catalog\n - [Adding products and SKUs](/en/docs/tutorials/adding-or-editing-products)\n - [Creating a category tree](/en/docs/tutorials/registering-a-category) ([departments](/en/docs/tutorials/what-is-a-department), [categories](/en/docs/tutorials/what-is-a-category) and [subcategories](/en/docs/tutorials/what-is-a-subcategory))\n - [Defining filters and types of specifications per category](/en/docs/tutorials/creating-a-specification-group-in-a-category)\n - [Adding SKU images](/en/docs/tutorials/adding-or-editing-skus#images)\n - [Adding SKU prices](/en/docs/tracks/cadastrar-preco-base)\n - [Inventory management](/en/docs/tutorials/managing-stock-items)\n- VTEX Intelligent Search\n - [Integrating the Intelligent Search app with the account](https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment#step-4-enabling-the-vtex-intelligent-search-app)\n- CMS integration\n - [Getting started with CMS](https://developers.vtex.com/docs/guides/getting-started-with-cms)\n- Homepage\n - Editing the components and layouts already listed in [Starter](https://starter.vtex.app/)\n- Login page\n - [VTEX Login integration](https://developers.vtex.com/docs/guides/faststore/go-live-2-integrating-the-vtex-login)\n - Editing the components and layouts already listed in [Starter](https://starter.vtex.app/)\n- Product Listing Page (PLP)\n - Editing the components and layouts already listed in [Starter](https://starter.vtex.app/headphones)\n- Product Details Page (PDP)\n - Editing the components and layouts already listed in [Starter](https://starter.vtex.app/headphone-white-10000006/p)\n- Minicart configuration\n - Editing the components and layouts already listed in [Starter](https://starter.vtex.app/)\n- Checkout\n - [VTEX Checkout](https://developers.vtex.com/docs/guides/faststore/go-live-3-integrating-the-vtex-checkout) integration\n - [VTEX Order Placed e My Account](https://developers.vtex.com/docs/guides/faststore/go-live-4-integrating-the-vtex-order-placed-and-my-account) integration\n- Logistics\n - [Add a loading dock](/en/docs/tutorials/managing-loading-docks)\n - [Adding shipping strategies](/en/docs/tutorials/shipping-strategy)\n - [Associating a shipping strategy and warehouse with a loading dock](/en/docs/tutorials/managing-loading-docks)\n- Payments\n - [Configuring the Notes Payable provider](/en/docs/tutorials/setting-up-the-notes-payable-conector)\n - [Adding gateway providers](/en/docs/tutorials/registering-gateway-affiliations/)\n- Improving the store performance using the right[technology](https://developers.vtex.com/docs/guides/faststore/managing-performance-overview) tools.\n- [SEO](https://developers.vtex.com/docs/guides/faststore/seo-overview)\n\n### Development using Store Framework\n\nThe development team must start a new project with Store Framework by cloning and [linking](https://developers.vtex.com/docs/guides/vtex-io-documentation-linking-an-app) the [store theme](https://github.com/vtex-apps/store-theme) to a [development workspace](https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-development-workspace). The store theme is a basic functional template to kick off the store with essential components and pages, such as:\n\n- Homepage\n- Product Listing Page (PLP)\n- Product Details Page (PDP)\n\n![Store Framework template](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tracks/onboarding-guide/vtex-store-overview/frontend-implementation_3.png)\n\n#### Store Framework MVP requirements\n\nBelow are the requirements for each topic:\n\n- Catalog\n - [Adding products and SKUs](/en/docs/tutorials/adding-or-editing-products)\n - [Creating a category tree](/en/docs/tutorials/registering-a-category) ([departments](/en/docs/tutorials/what-is-a-department), [categories](/en/docs/tutorials/what-is-a-category) and [subcategories](/en/docs/tutorials/what-is-a-subcategory))\n - [Defining filters and types of specifications per category](/en/docs/tutorials/creating-a-specification-group-in-a-category)\n - [Adding SKU images](/en/docs/tutorials/adding-or-editing-skus#images)\n - [Adding SKU prices](/en/docs/tracks/cadastrar-preco-base)\n - [Inventory management](/en/docs/tutorials/managing-stock-items)\n- VTEX Intelligent Search\n - [Integrating the Intelligent Search app with the account](https://developers.vtex.com/docs/guides/faststore/getting-started-1-setting-up-your-environment#step-4-enabling-the-vtex-intelligent-search-app)\n- Homepage\n - Editing the components and layouts already listed in [Starter](https://storetheme.vtex.com/)\n- Login page\n - Integrating with VTEX Login\n - Editing the components and layouts already listed in [Starter](https://storetheme.vtex.com/)\n- Product Listing Page (PLP)\n - Editing the components and layouts already listed in [Starter](https://storetheme.vtex.com/clothing?_q=clothing&map=ft)\n- Product Details Page (PDP)\n - Editing the components and layouts already listed in [Starter](https://storetheme.vtex.com/ten-top-shirts/p)\n- Minicart configuration\n - Editing the components and layouts already listed in [Starter](https://storetheme.vtex.com/)\n- Logistics\n - [Add a loading dock](/en/docs/tutorials/gerenciar-doca)\n - [Adding shipping strategies](/en/docs/tutorials/shipping-strategy)\n - [Associating a shipping strategy and warehouse with a loading dock](/en/docs/tutorials/managing-loading-docks)\n- Payments\n - [Configuring the Notes Payable provider](/en/docs/tutorials/setting-up-the-notes-payable-conector)\n - [Adding gateway providers](/en/docs/tutorials/registering-gateway-affiliations/)\n- Performance\n - Improving the store performance using performance [optimization tools](https://developers.vtex.com/docs/guides/vtex-io-documentation-best-practices-for-optimizing-performance)\n- Metrics\n - Configuring [Google Tag Manager](https://developers.vtex.com/docs/guides/google-tag-manager)"}