Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStore

The ultimate toolkit for building blazing-fast storefronts.

FastStore is a toolkit based on Jamstack that helps developers build high-performance stores.

It supports integration with Headless CMS, offers analytics functionalities to inform storefront decision-making, and gives developers the flexibility to customize the store based on the brand’s vision, creating a unique shopping experience for users.

AspectDescription
PerformanceEnsures fast-loading stores and provides a good user experience, focusing on achieving high scores in tests like Lighthouse and Web Vitals.
StabilityBuilt to be stable and avoid crashes, so your store doesn't lose sales due to provider issues.
Analytics/SEOWorks with analytics tools to understand store customers and with SEO tools to improve store visibility in search results.

FastStore architecture

The diagram above shows a FastStore architectural flow, which includes the following components:

  • Codebase: Source code of the FastStore project hosted on GitHub.
  • Build process: Process of converting the source code into a deployable project through FastStore WebOps.
  • Deployment: Process of deploying the project to a production environment through FastStore WebOps and quality assurance bots.
  • Business user touchpoint: Environment where admin users interact with storefront settings on VTEX Headless CMS.
  • Customer touchpoint: Environment where customers interact with the storefront, in this case, the store website.

Developer tools

These are the tools that developers use to build and deploy FastStore projects. They include:

  • FastStore CLI: Command-line interface (CLI) that can be used to interact with FastStore.
  • VTEX IO CLI: CLI used when the project needs to interact with the VTEX platform.
  • Localhost preview: Tool that allows developers to preview their FastStore projects locally.

Package layer

FastStore consists of five main packages that enable the store to work:

  • Core: Provides the starter source code to get your store up and running. It contains four sub-packages: Components, SDK, UI, and API packages.

  • SDK: Provides developers with a set of tools that handle all meaningful states an ecommerce store might have, such as Session, Cart, Component, and Search. The SDKs also provide GA4-compatible analytics functions to help you create powerful analytics capabilities in your ecommerce store.

  • UI: Gathers the design system based on FastStore components, using Sass for styling.

  • API: Connects your project to your favorite ecommerce provider by creating interfaces for querying products, collections, and handling carts.

  • CLI: Unifies the VTEX source code in @faststore/core with the customizations and extensions the store will create in the /src folder.

Technologies

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

Quickstart

Follow the getting started track below to build and deploy a FastStore storefront at the domain https://{accountName}.vtex.app/.

1. Initial settings

Before starting the project, make sure you have the necessary tools and apps installed in your account or your local development environment. See the Requirements guide for more information.

2. Starting the project

After you have prepared your machine with the initial settings, you can start your project by following the steps below:

  1. FastStore WebOps: Start the onboarding of your project with the FastStore WebOps app. This app streamlines the process, saving you the trouble of complex configurations and getting your project up and running quickly.

  2. Local Development: After onboarding, start working on your store locally, making the initial changes and adjustments to your storefront.

Next steps

Now that you have your FastStore project running, extend your store functionalities by working with FastStore customization tools:

UI components
Enhance your store's features with these components designed to help you quickly implement and customize features in your store.
Using themes
Explore the look-and-feel of your store by using Themes, FastStore CSS stylesheets.
Customizing sections and components
Explore new ways to customize your store components with overriding.
Extending the FastStore API
Extend the FastStore API schema by adding new data to the existing queries
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page