[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore search overview in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/sdk-overview)

[Analytics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/analytics-overview)

[Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/cart-overview)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-overview)

[SearchProvider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-search-provider)

[usePagination](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-use-pagination)

[useSearch](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-use-search)

[Session](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/session-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/sdk-overview)

[Analytics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/analytics-overview)

[Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/cart-overview)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-overview)

[SearchProvider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-search-provider)

[usePagination](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-use-pagination)

[useSearch](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-use-search)

[Session](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/session-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/sdk-overview)

Search

The `Search` module helps create and manage faceted store search experiences. The module allows users to filter products by attributes like brand, price, or features. These filters generate unique URLs (facet states) for each combination, enabling:

* Easy navigation: Allows users to view previous searches using their browser history.
* Improved filtering experience: Selecting or removing filters updates the URL without reloading the page.
* SEO-friendly: Unique URLs for each search state help with search engine optimization.

![{"base64":"  ","img":{"width":900,"height":550,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":8899,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/FacetedSearch___7d5958d80e6945f07dae5f9f7d2ac8d4.jpg"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/FacetedSearch___7d5958d80e6945f07dae5f9f7d2ac8d4.jpg)

The `Search` module relies on the following parts:

* [SearchProvider](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/blob/master/packages/sdk/src/search/Provider.tsx) component and [useSearch](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/blob/master/packages/sdk/src/search/useSearch.ts) hook: Defines the search state (selected filters, sort criteria, etc.) and provide functions to change it (select/remove filters, change sort options).
* [serializer](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/blob/master/packages/sdk/src/search/serializer.ts): Parses URLs to create a serialized URL for every filter combination.

## `SearchProvider`

The `SearchProvider` component defines the structure of a faceted search state and provides functions to change that state. This component exposes the `State` interface that allows you to access and modify the following search variables:

| Variable name  | Data type                             | Description                                                                                |
| -------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| onChange       | (url: URL) => void                    | Callback function responsible for handling changes in the facet state.                                                 |
| itemsPerPage   | number                                | Number of product items displayed on a given page.                                                                     |
| sort           | SearchSort                            | Sorting criteria of the search result (e.g., price\_asc, orders\_desc, discount\_desc, etc.).                          |
| term           | string / null                         | Full-text term used on the search.                                                                                |
| page           | number                                | Current page index of search pagination.                                                                               |
| base           | string                                | Base URL path of the search page. Useful when dealing with localization and prefixing paths by locale (e.g., /pt-br/). |
| selectedFacets | Array<{ key: string, value: string }> | Array of selected facets on the search.                                                                                |
| passThrough    | URLSearchParams                       | Additional URL parameters to preserve when building URLs.                                                              |

The `SearchProvider` also provides functions to change the facet state:

* `setFacet`: Selects a facet by its key.
* `toggleFacet`: Replaces a selected facet with its key.
* `removeFacet`: Removes the selected facet with its value.

For more information about this component, see the guide [SearchProvider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider).

## `serializer`

The `serializer` file parses URLs and creates serialized URLs that represent specific filter combinations.

## Use cases

The `Search` module is versatile for ecommerce applications, especially for creating dynamic product search interfaces. Key features include sorting, filtering by facets like price or category, and generating unique URLs for search states, which enhance user experience and SEO.

For more examples, see the FastStore repository in the [search tests folder](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/tree/master/packages/sdk/test/search).

### Brand filtering

In this use case, the `SearchProvider` and a checkbox component create a filter for the `faststore` brand. When a user selects or deselects the checkbox for this brand, the search state is updated via the `toggleFacet` function, which adds or removes the brand filter from the current search context.

This interaction automatically updates the URL and redirects the user to a new results page that reflects the selected filter criteria. The `itemsPerPage` prop ensures that a consistent number of products (12) are shown per page, offering a customizable and user-friendly shopping experience.

`1

import { SearchProvider, parseSearchState } from '@faststore/sdk'

2

3

function Page() {

4

 const params = useMemo(() => parseSearchState(new URL(window.href)), [])

5

6

 return (

7

 <SearchProvider

8

 onChange={(url: URL) => (window.location.href = url.href)}

9

 itemsPerPage={12}

10

 {...params}

11

 >

12

 <Checkbox />

13

 </SearchProvider>

14

 )

15

}

16

17

function Checkbox() {

18

 const { toggleFacet } = useSession()

19

20

 return (

21

 <input

22

 type="checkbox"

23

 onChange={() => toggleFacet({ key: 'brand', value: 'faststore' })}

24

 />

25

 )

26

}

`

The `Page` component parses the search state from the URL and passes it to `SearchProvider`, which manages the faceted search context. When the checkbox is selected, the URL updates with the chosen filter and redirects to the corresponding results page. The `itemsPerPage` prop ensures that 12 products are displayed per page.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/sdk/search/overview.mdx)

[CartProvider« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/cart-cart-provider)[SearchProviderNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-search-provider)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

ON THIS PAGE

[SearchProvider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-overview%23searchprovider)

[serializer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-overview%23serializer)

[Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-overview%23use-cases)

[Brand filtering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-overview%23brand-filtering)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/sdk/search/overview.mdx)

Copy page

On this page

ON THIS PAGE

[SearchProvider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-overview%23searchprovider)

[serializer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-overview%23serializer)

[Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-overview%23use-cases)

[Brand filtering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-overview/docs/guides/faststore/search-overview%23brand-filtering)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides installing affirm payment app 1 in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/guides/vtex-io-deprecated-apps)

---

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/vtex-io-apps)

Affirm Payment

Official extension

Version: 2.3.0

Latest version: 2.3.0

This is a payment authorization app for the Affirm payment method (financing with monthly payments). By installing this app, the [Affirm payment connector app](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/affirm-api) will also be automatically installed as a dependency.

> _Currently Affirm cannot be used in a marketplace scenario where the seller account processes the payment. In marketplace scenarios, the marketplace account must process the payment._

## Configuration

1. [Install this app](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/installing-an-app/) in your account by running `vtex install vtex.affirm-payment`.
2. Enable Affirm as a payment method in your store admin. In the Gateway Affiliation, enter your Affirm public API key as the `Application Key` and your Affirm private API key as the `Application Token`. For initial testing, set the Test/Production toggle to `Test` and use sandbox keys.
3. Configure the app settings by clicking `Apps > My Apps` in your account's admin sidebar and then selecting `Affirm Payment`.

The available settings are:

* `Enable Katapult`: Katapult is a newer Affirm feature that offers a leasing option to shoppers who do not qualify for the normal Affirm financing. Please ask your Affirm contact to enable the feature on your Affirm account before enabling this app setting.
* `Company Name`: If you have multiple sites operating under a single Affirm account, you can override the external company/brand name that the customer sees. This affects all references to your company name in the Affirm UI. Leave blank to use your default company name stored in your Affirm account.
* `Public API Key for promotional components`: The public API key provided to you by Affirm.
* `Production Mode for promotional components`: Determines if the components from the [Affirm Components](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/affirm-components) app run in Production or Sandbox mode.
* `Interval to use for the following three settings`: Determines the unit of time used by the following settings.
* `Delay to automatic payment capture`: Number of minutes/hours/days before authorized Affirm payments are automatically settled.
* `Delay to automatic payment capture after antifraud analysis`: Number of minutes/hours/days before authorized Affirm payments are automatically settled after merchant's antifraud approval.
* `Delay to cancel`: Number of minutes/hours/days before Affirm payments are automatically canceled.
> _`Delay to cancel` also affects the amount of time the user is given to complete the Affirm checkout modal. As such, the app will enforce a minimum `delay to cancel` time of 60 minutes. Shorter times may be inputted on the settings page, but they will be ignored. Also, times longer than 1 day should not be used._
* `Katapult public token`: The public API token for your Katapult account. This is only needed if Katapult is enabled.
* `Katapult private token`: The private API token for your Katapult account. This is only needed if Katapult is enabled.
* `Partial cancellation`: Feature flag to enable partial cancellation feature, which when enabled, ensures that the amount for partially canceled items on order is voided during settlement.

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-affirm-payment-app-1/docs/apps/vtex.affirm-payment%23configuration)

Was this helpful?

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides uploading files to master data v1 in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/master-data)

[Understanding Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/understanding-master-data)

[Master Data best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/master-data-best-practices)

[Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/master-data-v2)

[Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/master-data-v1)

[Querying documents in Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/querying-documents-in-master-data-v1)

[Implementing newletter opt-in with Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/implementing-newsletter-opt-in-with-master-data-v1)

[Uploading files to Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1)

[Interacting with Master Data v1 through VTEX IO services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/interacting-with-master-data-v1-through-vtex-io-services)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/master-data)

[Understanding Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/understanding-master-data)

[Master Data best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/master-data-best-practices)

[Master Data v2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/master-data-v2)

[Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/master-data-v1)

[Querying documents in Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/querying-documents-in-master-data-v1)

[Implementing newletter opt-in with Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/implementing-newsletter-opt-in-with-master-data-v1)

[Uploading files to Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1)

[Interacting with Master Data v1 through VTEX IO services](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/interacting-with-master-data-v1-through-vtex-io-services)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides)

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/master-data)

[Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/master-data-v1)

[Uploading files to Master Data v1](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1)

Uploading files to Master Data v1

Learn how to upload files to Master Data v1.

In this guide, you will learn how to upload files to Master Data v1 by following these steps:

* [Step 1 - Creating a new data entity](#step-1---creating-a-new-data-entity): Start by creating a new [data entity](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/creating-data-entity--tutorials%5F1265) to hold the data you want to upload.
* [Step 2 - Publishing and indexing the data entity](#step-2---publishing-and-indexing-the-data-entity): After creating the entity, publish and index it to make it available via the [Master Data CRM](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-can-i-create-a-field-in-master-data--frequentlyAskedQuestions%5F1829%23crm).
* [Step 3 - Creating a Master Data form](#step-3---creating-a-master-data-form): Next, create a [form](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/creating-form-in-master-data--tutorials%5F1047) that will allow you to upload your files.
* [Step 4 - Uploading the file](#step-4---uploading-the-file): Use the form to upload your files to Master Data v1.
* [Step 5 - Accessing the file](#step-5---accessing-the-file): Finally, see how to access the files' public URLs.

## Instructions

### Step 1 - Creating a new data entity

In this step, you will create a new [data entity](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/creating-data-entity--tutorials%5F1265) to represent a collection of files. This entity will include a file-type field dedicated to storing files.

1. Access the [DynamicStorage](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-can-i-create-a-field-in-master-data--frequentlyAskedQuestions%5F1829%23dynamic-storage) at `https://{accountName}.ds.vtexcrm.com.br`.
> Remember to replace the value between curly braces with your [account name](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/what-is-an-account-name--i0mIGLcg3QyEy8OCicEoC).
2. Click **Data Entities** in the top bar.
3. Click **Add New**.
4. In the **Acronym** field, enter a two-letter acronym for the data entity you are creating.
5. In **Name**, enter the name of the data entity that will store the PDF file (e.g., _Files_, _PDFs_).
6. Go to the **Fields** tab. In the **Name** field, enter a new name for the field that will store the file in lowercase letters (e.g., _filename_).
7. In **Display Name**, enter the data entity name chosen in Step 5, but with uppercase in the first letter (e.g., _Files_, _Pdf_).
8. In the **Type** dropdown menu, select **File**.
9. Click the "engine" icon ![Engine Icon](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/docs/guides/Master-Data/master-data-v1/engine-icon.png) on the right side of the **Type** field.
10. Under the **General settings** section, select the **Make readable without credential** checkbox to make the data saved via this field available without the need for authentication.
11. On **Custom field type settings**, select the **Max size per file** according to your needs. This sets the maximum file size that can be uploaded to this field.
12. Click **Save**.

### Step 2 - Publishing and indexing the data entity

As the next step, you will now publish and index your newly created data entity.

1. On the **Data Entities** tab, find the data entity you created in the previous step and click the "blue disk" icon ![Save Icon](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/docs/guides/Master-Data/master-data-v1/save-icon.png) on the left side of the line to publish the entity.
2. Click **Ok** to continue.
3. Click the "four arrows" icon ![Four-arrow Icon](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/docs/guides/Master-Data/master-data-v1/arrows-icon.png) to reindex the data entity.

> Wait for the data entity to be fully indexed. This may take from 30 minutes to one hour. During this time, do not make any changes to the data entity or its fields. Note that there is currently no interface to monitor the progress of indexation. Instead, you can periodically check the status of the entity.

### Step 3 - Creating a Master Data form

Once your data entity is successfully indexed, you can proceed to [create a form](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/creating-form-in-master-data--tutorials%5F1047). This form will define how your data entity will be displayed and handled.

1. After indexation is completed, access the [Master Data CRM](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-can-i-create-a-field-in-master-data--frequentlyAskedQuestions%5F1829%23crm) at `https://{account}.vtexcrm.com.br`.
> _Remember to replace the value between curly braces with your [account name](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/what-is-an-account-name--i0mIGLcg3QyEy8OCicEoC)._
2. Click the **Advanced settings** tab.
3. Click **Formulários**.
4. Click **Novo** to create a new form.
5. In the **Nome** field, enter the name of the _formulário_, which should be the same as the data entity name.
6. In **Entidade de Dados**, select the data entity you previously created.
7. In the **Campos de Listagem** tab, select the **Id do Registro** and the data entity you previously created.
8. Change to the **Schemas de Layout** tab.
9. Click the **Incluir nova seção** button to add a new section to the form.
10. In the **Nome** field, enter a name for the section.
11. Select the data entity previously created from the column **Campos disponíveis**. Then, drag and drop it into the column **Campos da coluna 1**.
12. Click **Save**.

### Step 4 - Uploading the file

Now, access the [Master Data CRM](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-can-i-create-a-field-in-master-data--frequentlyAskedQuestions%5F1829%23crm) at `https://{account}.vtexcrm.com.br` to upload your files.

> Remember to replace the value between curly braces with your [account name](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/what-is-an-account-name--i0mIGLcg3QyEy8OCicEoC).

By now, when accessing the Master Data CRM, you should see a new tab with the name of the form you just created. If that's not the case, reload the page.

![{"base64":"  ","img":{"width":1591,"height":271,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":65912,"url":"https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/docs/guides/Master-Data/master-data-v1/form.png"}}](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/docs/guides/Master-Data/master-data-v1/form.png)

1. Click the tab with the name of your new form.
2. Click **Novo**.
3. Click the **Upload a File** button. Choose your file and click **Open**.
4. After the upload, click **Save**.

### Step 5 - Accessing the file

Finally, after uploading your files, you can access and share their URLs by following these steps:

1. In the Master Data CRM, click the tab with the name of your new form.
2. Copy the **Id do Registro** value and save it. The **Id do Registro** value has the following pattern: `{acronym}-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX`.
3. Assemble the file's public URL and use it to access the file. Use this pattern to assemble the URL: `https://{account}.vtexcommercestable.com.br/api/dataentities/{acronym}/documents/{idWithouthAcronym}/{fieldName}/attachments/{file}`, where:
   * `acronym` \- Two-letter acronym that identifies the data structure
   * `idWithouthAcronym` \- Id of the document, without the acronym, i.e., the `XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX` part from the **Id do Registro** value.
   * `fieldName` \- Name of the field created in step 6 of **Step 1 - Creating a new data entity**.
   * `file` \- Name of the file followed by its extension (e.g., `myfile.pdf`).

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Master-Data/master-data-v1/uploading-files-to-master-data-v1.mdx)

[Implementing newletter opt-in with Master Data v1« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1//docs/guides/implementing-newsletter-opt-in-with-master-data-v1)[Interacting with Master Data v1 through VTEX IO servicesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1//docs/guides/interacting-with-master-data-v1-through-vtex-io-services)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1%23instructions)

[Step 1 - Creating a new data entity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1%23step-1-creating-a-new-data-entity)[Step 2 - Publishing and indexing the data entity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1%23step-2-publishing-and-indexing-the-data-entity)[Step 3 - Creating a Master Data form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1%23step-3-creating-a-master-data-form)[Step 4 - Uploading the file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1%23step-4-uploading-the-file)[Step 5 - Accessing the file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1%23step-5-accessing-the-file)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Master-Data/master-data-v1/uploading-files-to-master-data-v1.mdx)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1%23instructions)

[Step 1 - Creating a new data entity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1%23step-1-creating-a-new-data-entity)[Step 2 - Publishing and indexing the data entity](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1%23step-2-publishing-and-indexing-the-data-entity)[Step 3 - Creating a Master Data form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1%23step-3-creating-a-master-data-form)[Step 4 - Uploading the file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1%23step-4-uploading-the-file)[Step 5 - Accessing the file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/uploading-files-to-master-data-v1/docs/guides/uploading-files-to-master-data-v1%23step-5-accessing-the-file)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore developing and overriding components experimental exports hooks and components in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/overrides-overview)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/override-use-cases-overview)

[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section)

[List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

[Experimental exports - Hooks and Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-overview)

[Section override](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/overrides-overview)

[Section override - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/override-use-cases-overview)

[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-creating-a-new-section)

[List of native sections and overridable components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)

[Experimental exports - Hooks and Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-overview)

Experimental exports - Hooks and Components

FastStore provides [hooks](#list-of-hooks-and-components) and components to extend native features within your [custom sections](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section) and [overridden components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-overview).

For example, you can create a custom [BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-buy-button) that adds products to the cart and displays a personalized message based on user preferences or order history.

## Before you begin

All experimental [hooks and components](#list-of-hooks-and-components) are suffixed with `_unstable`, indicating they are available for use but may not function as expected or could have limitations with certain store customizations. Before deploying them in a production environment, make sure to test them to confirm compatibility with your store.

## Instructions

1. Open your store project in a code editor, then open the component or section file where you want to import the hook or component.
2. Import the hook or component into your custom component file.
`1
import { use{ComponentName}_unstable as use{ComponentName} } from '@faststore/core/experimental'
`
> Replace `{ComponentName}` with the name of the component you want to import, for example `useCartToggleButton`.
3. Incorporate the imported hook or component into your custom component logic. In the following example, the `useCartToggleButton_unstable` hook enables toggling the cart.
`1
import React from "react";
2
import { Button as UIButton } from "@faststore/ui";
3
import { useCartToggleButton_unstable as useCartToggleButton } from "@faststore/core/experimental";
4

5
export default function CustomBuyButton() {
6
 const { onClick: toggleCart } = useCartToggleButton();
7
 return (
8
 <UIButton
9
 variant="primary"
10
 onClick={() => {
11
 toggleCart();
12
 }}
13
 >
14
 New Buy Button
15
 </UIButton>
16
 );
17
}
`
4. Save your changes.
5. Open a terminal and run `yarn dev` to test the implementation.

## List of hooks and components

Explore the features of the experimental hooks and the `Image_unstable` component.

* [Hooks](#hooks)
* [Image\_unstable](#image%5Funstable-component)

### Hooks

Hooks provide features or statuses of native components that you can integrate into your custom components. Here's a list of available hooks:

#### Authentication

| Hook              | Description                                 |
| ----------------- | ------------------------------------------- |
| useAuth\_unstable | Accesses authentication status and actions. |

#### Cart

| Hook                          | Description                                                                                |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| cartStore\_unstable           | Stores and retrieves cart details.                                                                                |
| useCart\_unstable             | Accesses the current cart's status and actions.                                                                           |
| useBuyButton\_unstable        | Leverages the behavior of the native [BuyButton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-buy-button). |
| useCartToggleButton\_unstable | Adds a cart toggle feature to custom components.                                                                          |
| useCheckoutButton\_unstable   | Leverages the behavior of the native checkout button.                                                                     |
| useRemoveButton\_unstable     | Leverages the behavior of the native remove button.                                                                       |

#### Delivery Promise

| Hook                           | Description                                                                                |
| ------------------------------ | -------------------------------------------------------------------------------------------------------- |
| deliveryPromiseStore\_unstable | Stores and retrieves Delivery Promise data (pickup points, default/global selection, simulation state).  |
| useDeliveryPromise\_unstable   | Accesses and manages Delivery Promise state, pickup points, delivery-related facets, labels, and badges. |

#### GraphQL

| Hook                   | Description                                       |
| ---------------------- | ------------------------------------------------- |
| useLazyQuery\_unstable | Retrieves data from a GraphQL endpoint on demand. |
| useQuery\_unstable     | Retrieves data from a GraphQL endpoint.           |

#### Newsletter

| Hook                    | Description                                   |
| ----------------------- | --------------------------------------------- |
| useNewsletter\_unstable | Accesses the newsletter subscription feature. |

#### Product

| Hook                              | Description                                                          |
| --------------------------------- | -------------------------------------------------------------------- |
| useDiscountPercent\_unstable      | Calculates the discount percentage for a given price.                |
| useFormattedPrice\_unstable       | Formats a price value based on the current locale.                   |
| useLocalizedVariables\_unstable   | Provides localized variables for use in components.                  |
| useCreateUseGalleryPage\_unstable | Handles the creation of a gallery page.                              |
| useGalleryPage\_unstable          | Manages the state and functionality of a gallery page.               |
| UseGalleryPageContext\_unstable   | Provides access to and management of the context for a gallery page. |
| useProductGalleryQuery\_unstable  | Retrieves product gallery images.                                    |
| useProductLink\_unstable          | Generates a product link based on the product ID.                    |
| useProductQuery\_unstable         | Retrieves product details.                                           |
| useProductsPrefetch\_unstable     | Preloads product details for a given list of product IDs.            |

#### Search

| Hook                           | Description                                            |
| ------------------------------ | ------------------------------------------------------ |
| useDelayedFacets\_unstable     | Delays facet application to improve performance.       |
| useDelayedPagination\_unstable | Delays pagination to improve performance.              |
| useFilter\_unstable            | Enables filtering for product listings.                |
| useSearchHistory\_unstable     | Accesses the user's search history.                    |
| useSuggestions\_unstable       | Provides suggestions based on the user's search query. |
| useTopSearch\_unstable         | Retrieves the top search results.                      |

#### Session

| Hook                      | Description                                       |
| ------------------------- | ------------------------------------------------- |
| sessionStore\_unstable    | Stores and retrieves session data.                |
| useSession\_unstable      | Accesses and manages current session information. |
| validateSession\_unstable | Validates the current user session.               |

#### Shipping

| Hook                            | Description                                                                                |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| getShippingSimulation\_unstable | Retrieves the shipping simulation data, which can be used to display shipping costs, options, and delivery estimates. |
| useShippingSimulation\_unstable | Runs and manages shipping simulations to display costs, options, and delivery estimates.                              |

#### UI

| Hook                      | Description                                                 |
| ------------------------- | ----------------------------------------------------------- |
| useScreenResize\_unstable | Adapts the interface to different screen sizes and devices. |

### `Image_unstable` component

Use the [Image\_unstable](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/blob/105a8b2f69ffd8438532d7c9eb959ed26a567675/packages/core/src/components/ui/Image/Image.tsx) component to optimize image performance in your storefront. This component uses [Thumbor](https://read.calvincode.net/reader?url=https://www.thumbor.org/) for image resizing, cropping, and caching the results on a Content Delivery Network (CDN). Use it whenever you need to [create a new section for the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section).

`1

import { HeroImage as UIHeroImage } from "@faststore/ui";

2

import { Image_unstable as Image } from "@faststore/core/experimental";

3

4

export default function CustomHeroImage() {

5

 return (

6

 <UIHeroImage>

7

 <Image

8

 src="https://storeframework.vtexassets.com/arquivos/ids/160965/est.jpg?v=637752924295370000"

9

 alt="Two puffs and two small desks placed together, accompanied by various color pencils."

10

 width={360}

11

 height={240}

12

 sizes="(max-width: 360px) 50vw, (max-width: 768px) 90vw, 50vw"

13

 />

14

 </UIHeroImage>

15

 );

16

}

`

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/developing-and-overriding-components/experimental-exports-hooks-and-components.mdx)

[List of native sections and overridable components« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-list-of-native-sections)[Extending the FastStore APINext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/api-extensions-overview)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23instructions)

[List of hooks and components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23list-of-hooks-and-components)

[Hooks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23hooks)[Image\_unstable component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23imageunstable-component)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/developing-and-overriding-components/experimental-exports-hooks-and-components.mdx)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23before-you-begin)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23instructions)

[List of hooks and components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23list-of-hooks-and-components)

[Hooks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23hooks)[Image\_unstable component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components%23imageunstable-component)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)