🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

Experimental Exports - Hooks & Components

When overriding a native component or creating a new FastStore section, you can import the hooks and components from @faststore/core to customize specific functionalities without starting from scratch. Although some hooks are accessible through @faststore/sdk, certain functionalities, such as accessing cart and session data, require the use of hooks and components from @faststore/core.


All exports are suffixed with _unstable to indicate that the support is experimental.


Import the hook or component into your component from @faststore/core/experimental:

import { use{ComponentName}_unstable as use{ComponentName} } from '@faststore/core/experimental'

In the following example, the useCartToggleButton_unstable hook was imported to enhance the custom buy button with the ability to toggle the cart, and benefeting from the behavior of the useCartToggleButton.

import React from 'react'
import { Button as UIButton } from '@faststore/ui'
import { useCartToggleButton_unstable as useCartToggleButton } from '@faststore/core/experimental'
export default function CustomBuyButton() {
  const { onClick: toggleCart } = useCartToggleButton()
  return (
      onClick={() => {
      New Buy Button

Available Exports

Explore the functionalities of the hooks and components, also find the up-to-date list of available experimental exports directly within the codebase: @faststore/core/experimental (opens in a new tab).


Functions that provide a way to import some of the functionalities or state of native components to your custom components. The hooks provided by @faststore/core/experimental include:

  • useSession_unstable
  • sessionStore_unstable
  • validateSession_unstable
  • useCart_unstable
  • cartStore_unstable
  • useBuyButton_unstable
  • useCartToggleButton_unstable
  • useCheckoutButton_unstable
  • useRemoveButton_unstable
  • useQuery_unstable
  • useLazyQuery_unstable
  • useNewsletter_unstable
  • useDiscountPercent_unstable
  • useFormattedPrice_unstable
  • useLocalizedVariables_unstable
  • useProductGalleryQuery_unstable
  • useProductLink_unstable
  • useProductQuery_unstable
  • useProductsPrefetch_unstable
  • useSearchHistory_unstable
  • useSuggestions_unstable
  • useTopSearch_unstable
  • useFilter_unstable
  • useDelayedFacets_unstable
  • useDelayedPagination_unstable
  • getShippingSimulation_unstable
  • useShippingSimulation_unstable


We highly recommend using the Image component when working with images in your application to enhance storefront performance. This component utilizes a service called Thumbor (opens in a new tab) for image resizing and cropping, with the results cached on a Content Delivery Network (CDN). Utilize it whenever an image is uploaded in the VTEX admin, whether in the CMS or Catalog.

import { HeroImage as UIHeroImage } from '@faststore/ui'
import { Image_unstable as Image } from '@faststore/core/experimental'
export default function CustomHeroImage() {
  return (
        alt="Two puffs and two small desks placed together, accompanied by various color pencils."
        sizes="(max-width: 360px) 50vw, (max-width: 768px) 90vw, 50vw"