-
Notifications
You must be signed in to change notification settings - Fork 98
EDU-16074: Delivery Promise (2.1 and 2.2) #2179
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
Navigation Preview LinkNo changes detected in the navigation.json file |
Preview LinksOpen this URL to set up the portal with this branch changes. You can now access the edited pages with the following URLs:
|
Grammar review summaryReview for
|
Documentation feedback for docs/faststore/components/features/delivery-promise/overview.mdxGeneral FeedbackThe Explanation provides a good overview of how Delivery Promise operates in FastStore, covering hooks, filter options, location priority, and badges. The content is well-organized with clear headings and subheadings, and it includes helpful visuals like images and a diagram. However, there are areas where the documentation can be improved to better align with the Explanation guidelines, particularly regarding cross-references, tone, and avoiding step-by-step instructions. Actionable Feedback
Suggested Revision---
title: "Understanding Delivery Promise operation"
updatedAt: "2025-09-03T15:35:51.192Z"
---
>ℹ This feature is in closed beta, meaning only selected customers can access it. If you're interested in implementing it, please contact our [Support](https://support.vtex.com/hc/en/) team.
This guide explains how Delivery Promise operates, covering the following:
* [Hooks](#hooks): Discover the hooks used to manage user location, fulfillment options, and Delivery Promise workflows.
* [Filter options](#filter-options): Learn how shoppers can filter products by delivery or pickup methods.
* [Location priority](#location-priority): Understand the order and logic used to determine the shopper's location for accurate delivery estimates.
>⚠️ To learn how to implement Delivery Promise in your store, see the guide [Implementing Delivery Promise](https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation).
## Hooks
This feature introduces the following hooks as part of the regionalization and location workflow:
* `useGeoLocation`: Uses the browser's geolocation API or other client-side methods to auto-detect the user's location when not provided.
* `useRegion`: Accesses or updates the user's region information, such as a postal code or location and manages region validation flows.
* `useRegionModal`: Handles modal display logic for region selection, especially when the location input is mandatory.
* [`useDeliveryPromise_unstable`](https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components#list-of-hooks-and-components): Manages all logic for querying, displaying, and updating delivery availability filters and states.
* [`deliveryPromiseStore_unstable`](https://developers.vtex.com/docs/guides/faststore/developing-and-overriding-components-experimental-exports-hooks-and-components#list-of-hooks-and-components): Stores and retrieves Delivery Promise data (pickup points, default/global selection, simulation state).
## Filter options
Delivery Promise offers shoppers two product filtering options:
- [Global filters](#global-filters): Apply to all store navigation.
- [Product List Page (PLP) or search page](#plp-or-search-page-filters): Apply only to the current page the shopper is viewing.
>ℹ Learn more about filter usage and user flows on the [Delivery Promise Figma Community](https://www.figma.com/community/file/1545494767147168145/delivery-promise-by-vtex) page.
### Global filters
Global filters remain active across all user navigation and are applied to all product searches until they are changed or cleared.
Shoppers can filter available products globally using the **Filter by store** option, which displays only products available for pickup at a specific store. This filter shows all available pickup points within a 50-km radius, as configured in [Checkout](https://help.vtex.com/en/tutorial/what-is-vtex-checkout--1K3x9tSp9OSGkQMgyAe2Uk). The number of pickup points displayed is unlimited.

### PLP or search page filters
On PLPs or search pages, the shopper has the following options for applying filters: [Delivery Methods](#delivery-methods-filters), [Delivery Option](#delivery-option-filters), and [Availability](#availability).
>⚠️ To edit the filter labels, follow the instructions in [Managing filters and badges](https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation).
{/*
#### SLA (WIP)

*/}
#### Delivery Methods
This filter displays available products according to the shopper's location. With this option, shoppers can filter using the following options:

| **Filter option** | **Description** |
| ----------------- | --------------- |
| **All delivery methods** | Displays products that match all active delivery method filters: **Shipping to**, **Pickup anywhere**, **Pickup at**, and **Pickup nearby**. |
| **Shipping to** | Displays products that can be shipped to the shopper's specified location. |
| **Pickup anywhere** | Displays products available for pickup at any participating store within the merchant's network, rather than restricting results to a selected pickup location or geographic proximity. This is often used by B2B stores, and this filter is deactivated in Headless CMS by default. |
| **Pickup at** | Displays the store specified in the global pickup point filter or the one closest to the shopper's location. To change the store set in `Pickup at {storeName}`, the shopper can click on it and select a new store in the slideover that opens. This slideover shows all available pickup points within a 50-km radius, as configured in [Checkout](https://help.vtex.com/en/tutorial/what-is-vtex-checkout--1K3x9tSp9OSGkQMgyAe2Uk). The number of pickup points displayed is unlimited. |
| **Pickup nearby** | Displays products available for pickup at the shopper's nearby stores. This filter considers up to 40 pickup points within 10 km of the shopper's location. |
#### Delivery Option
This filter allows shoppers to refine search results based on the type of delivery or pickup method available for each item, helping to find products that match the shopper's preferred fulfillment method.

To create, configure, and manage delivery options in the [VTEX Admin](https://help.vtex.com/en/tutorial/navigation-overview--7zzs2Qo8lK98W0K8W0wk8W), see the instructions in the [Delivery Option (Beta)](https://newhelp.vtex.com/docs/tutorials/delivery-options-beta) guide.
>⚠️ While following the instructions to [create the delivery options](https://newhelp.vtex.com/docs/tutorials/delivery-options-beta#creating-delivery-options), make sure to enable the option **Use option as a filter on the store product**. This will allow shoppers to filter products by the delivery option using [Intelligent Search filters](https://newhelp.vtex.com/en/tutorial/filters--k24mQQa9SjmhNWSwdqIMB).
#### Availability (In-stock filter)
This filter helps shoppers refine product results based on whether items can actually be purchased and fulfilled, preventing the display of products they can't immediately purchase in their preferred way and narrowing results to only what's actually in stock.

The Availability filter is disabled by default in the Headless CMS. This filter is helpful for stores where the `discovery.config.js` file has `hideUnavailableItems` set to `false`. Otherwise, when this setting is `true`, unavailable products are already hidden by default, so the Availability filter would have no functionality in this scenario.
To enable this filter in your store, follow the instructions in [Enabling the Availability filter](https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation#enabling-the-availability-filter).
## Badges
When Delivery Promise data is available, the `ProductCard` automatically displays badges so shoppers can quickly see shipping and pickup availability for their location.

In the following table, see the available types of badges:
| Badge label | Description |
| ---------- | ----------- |
| `Available for shipping` or `Unavailable for shipping` | Indicates whether the product can be shipped to the shopper's postal code. |
| `Available for pickup` or `Unavailable for pickup` | Indicates that the product can be collected from a nearby pickup point. |
| No badges available | The product is out of stock. Delivery and pickup are unavailable. |
>⚠️ To edit the badge labels or disable the badges, follow the instructions in [Managing filters and badges](https://developers.vtex.com/docs/guides/faststore/delivery-promise-implementation).
## Understanding location priority
To provide accurate Delivery Promise estimates, FastStore projects determine the user's location based on the following priority:
1. **Logged-in user's address:** If the user is logged in and has a saved address, this information is used.
2. **User-provided location:** If the user is logged in but doesn't have a saved address, or isn't logged in but provides their location (like a postal code), this data is used.
3. **Default postal code:** If the user hasn't provided a location, isn't logged in, or has no saved address, we check if the merchant has configured a default postal code for all buyers. See [Defining a default postal code](#step-4-optional-defining-a-default-postal-code) for more information.
4. **No postal code (optional):** If no postal code is provided and not required, products are displayed without using Delivery Promise.
5. **No postal code (required):** If no postal code is provided when required, a modal is displayed which the buyer cannot close until a postal code is entered. To make the postal code required, open your `discovery.config.js` file and change the `mandatory` field in the `deliveryPromise` object to `true`, as shown in the [Default settings](#default-settings) section.
To better understand how this flow works, see the following diagram:
```mermaid
graph LR
S{"Is the user logged in?"} -- Yes --> C{"Logged-in user's address available?"}
S -- No --> A{"Location provided?"}
C -- Yes --> D(["Use the logged-in user's address"])
C -- No --> A
A -- Yes --> B(["Use the provided location"])
A -- No --> E{"Default postal code configured?"}
E -- Yes --> F(["Use the default postal code"])
E -- No --> H{"Postal code mandatory?"}
H -- Yes --> K(["Display mandatory postal code modal"])
K --> L["User inputs postal code"]
L --> M(["Use the provided postal code"])
H -- No --> N(["Display products without using Delivery Promise"])
``` Was this feedback useful?
|
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Grammar review summaryReview for
|
Grammar review summaryReview for
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit
Grammar reviewer
📝 [Grammar reviewer] reported by reviewdog 🐶
- Avoid contractions in formal technical documentation.
- Adding 'how' makes the instruction clearer and more grammatically complete.
dev-portal-content/docs/faststore/components/features/delivery-promise/overview.mdx
Line 84 in 845dce2
3. **Default postal code:** If the user hasn't provided a location, isn't logged in, or has no saved address, we check if the merchant has configured a default postal code for all buyers. Learn to do so in [Defining a default postal code](#step-4-optional-defining-a-default-postal-code). |
📝 [Grammar reviewer] reported by reviewdog 🐶
Adding 'it is' clarifies the subject of 'not required,' improving sentence clarity.
dev-portal-content/docs/faststore/components/features/delivery-promise/overview.mdx
Line 85 in 845dce2
4. **No postal code (not required):** If no postal code is provided and not required, products are displayed without using Delivery Promise. |
📝 [Grammar reviewer] reported by reviewdog 🐶
Avoid contractions in formal technical documentation.
dev-portal-content/docs/faststore/components/features/delivery-promise/overview.mdx
Line 86 in 845dce2
5. **No postal code (required):** If no postal code is provided when required, a modal is displayed that the buyer can't close until a postal code is entered. To make the postal code required, open your `discovery.config.js` file and change the `mandatory` field in the `deliveryPromise` object to `true`, as shown in the [Default settings](#default-settings) section. |
Grammar review summaryReview for
|
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Grammar review summaryReview for
|
Documentation feedback for docs/faststore/components/features/delivery-promise/implementation.mdxGeneral FeedbackThe guide provides instructions on implementing the Delivery Promise feature in a FastStore project. It covers configuration, synchronization with Headless CMS, and managing filters and labels. However, there are several areas where the content deviates from the rules for Guide writing, particularly in terms of structure, tone, and adherence to the required format. The use of Actionable Feedback
Suggested Revision---
title: "Implementing Delivery Promise"
slug: "implementing-delivery-promise"
excerpt: "Learn how to configure Delivery Promise in your FastStore project to provide accurate delivery estimates."
createdAt: "2024-01-01T12:00:00Z"
updatedAt: "2025-10-01T13:52:21.684Z"
---
> ℹ This feature is in closed beta, which means that only selected customers have access to it. If you're interested in implementing it in the future, please contact our [Support](https://support.vtex.com/hc/en-us) team.
Delivery Promise is a feature that provides accurate and reliable delivery estimates for available products based on the customer's location. It ensures that customers only see products that are in stock and can be delivered to their address or picked up at a nearby location.
This solution continuously updates product availability throughout the buying journey by responding to changes in catalog, pricing, inventory, or shipping settings. These updates are then sent to [Checkout](https://developers.vtex.com/docs/guides/checkout-overview) and [Intelligent Search](https://help.vtex.com/tracks/vtex-intelligent-search), ensuring customers see up-to-date options based on their region.
In this guide, you will learn how to configure Delivery Promise in your FastStore project. By the end of this guide, you will have a fully configured Delivery Promise setup, providing accurate delivery estimates to your customers.
> ℹ To understand how Delivery Promise operates, see the [Understanding Delivery Promise operation](https://developers.vtex.com/docs/guides/faststore/delivery-promise-overview) guide. For more information about Delivery Promise components, see the [Working with Delivery Promise components](https://developers.vtex.com/docs/guides/faststore/delivery-promise-components) guide.
## Default settings
Delivery Promise is defined in the `deliveryPromise` section of the [`discovery.config.js`](https://developers.vtex.com/docs/guides/faststore/project-structure-config-options) file.
The default settings are:
```js discovery.config.js
deliveryPromise: {
enabled: true,
mandatory: false
},
```
* `enabled`: When set to **true**, Delivery Promise activates, allowing the store to provide delivery estimates based on the user's location.
* `mandatory`: When set to **true**, users must provide a postal code. By default, this is **false**, allowing users to browse and add items to the cart without entering their postal code. However, without a postal code, the accuracy of delivery information may be limited.
## Before you begin
Before you start, make sure you have the following prerequisites:
1. **Check the `search-session` app:**
* Ensure you have version `0.5.0` or later of the [`search-session`](https://developers.vtex.com/docs/apps/vtex.search-session) app installed.
* In your terminal, run the `vtex list` command.
* In the returned results, search for the app.
* If you don't have this app installed, run the command `vtex install vtex.search-session`.
2. **Enable the VTEX Intelligent Search app:** To enable the Intelligent Search app, check the version of your [Edition Store](https://developers.vtex.com/docs/guides/vtex-io-documentation-edition-app) account.
* In your terminal, log in to your account by running `vtex login {accountName}` and run `vtex edition get` to see the Edition app version installed. *Remember to replace the values between curly braces with your account name*.
<details>
<summary>Accounts with <code>vtex.edition-store@5.x</code></summary>
If your account is using the `vtex.edition-store@5.x` major version, the VTEX Intelligent Search app is already included, and you need to integrate it via VTEX Admin.
To integrate VTEX Intelligent Search, access **Store Settings > Intelligent Search > Integrations** in the VTEX Admin, and click `START INTEGRATION`.
</details>
<details>
<summary>Accounts with an edition version older than <code>5.x</code></summary>
1. In the VTEX IO CLI, log in to your VTEX account by running `vtex login {accountName}`. *Remember to replace the values between curly braces with your account name.*
2. If the VTEX Intelligent Search app isn't installed in your account, run the following command:
```bash
vtex install vtex.search-resolver@1.x vtex.admin-search@1.x
```
After installing the app, integrate it by going to **Store Settings > Intelligent Search > Integrations** in the VTEX Admin, and clicking `START INTEGRATION`.
</details>
<details>
<summary>Accounts that want to migrate to version <code>5.x</code></summary>
If you're using a different major version and want to migrate, please [open a ticket with VTEX Support](https://help.vtex.com/en/support) and request the installation of Edition app `vtex.edition-store@5.x`.
</details>
3. **Update the `@faststore/cli` package:** Run the `yarn upgrade @faststore/cli` command to update the `@faststore/cli` package to the latest version.
4. **Open a ticket with VTEX Support:** Open a ticket with [VTEX Support](https://help.vtex.com/en/support) and request the activation of Delivery Promise in your account.
## Instructions
### Step 1 - Enable `deliveryPromise`
1. **Open** your FastStore project using the code editor of your choice.
2. **Open** the [`discovery.config.js`](https://developers.vtex.com/docs/guides/faststore/project-structure-config-options) file.
3. **Set** the `enabled` value to `true` under the [`deliveryPromise`](https://developers.vtex.com/docs/guides/faststore/project-structure-config-options#deliverypromise) section. Set the `mandatory` value based on your business needs. Learn more in the [Default settings](#default-settings) section.
```js discovery.config.js
deliveryPromise: {
enabled: true,
mandatory: false,
}
```
### Step 2 - Sync your FastStore project with Headless CMS
1. **Run** the `faststore cms-sync` command to sync the `cms` folder of your FastStore project with [Headless CMS](https://developers.vtex.com/docs/guides/faststore/headless-cms-overview).
The expected response is the message `CMS synced successfully...`. The native regionalization components and sections will be automatically updated. You can check them in the VTEX Admin:
* **Regionalization component:** Go to **Storefronts > Headless CMS > Global Sections > NavBar > Navigation > Regionalization**.
* **Region Bar section:** Go to **Storefronts > Headless CMS > Global Sections > Region Bar**.
* **Region Modal section:** Go to **Storefronts > Headless CMS > Global Sections > Region Modal**.
You only need to [add a new section](#step-3-add-the-region-popover-section): `Region Popover`.
### Step 3 - Add the `Region Popover` section
`RegionPopover` is a section that manages user location inputs. It's used when location data is missing or the store default postal code is applied. `RegionPopover` is available in [`@faststore/core`](https://developers.vtex.com/docs/guides/faststore/project-structure-overview#packagejson) and uses the [`Popover`](https://developers.vtex.com/docs/guides/faststore/molecules-popover) component as its UI base.

<details>
<summary>`RegionPopover` code</summary>
```tsx packages/core/src/components/region/RegionPopover/RegionPopover.tsx
import type { PopoverProps as UIPopoverProps } from '@faststore/ui'
import {
Icon as UIIcon,
InputField as UIInputField,
Link as UILink,
Popover as UIPopover,
useUI,
} from '@faststore/ui'
import { useRef, useState } from 'react'
import useRegion from '../RegionModal/useRegion'
import { sessionStore, useSession } from 'src/sdk/session'
import { textToTitleCase } from 'src/utils/utilities'
import styles from './section.module.scss'
interface RegionPopoverProps {
title?: UIPopoverProps['title']
closeButtonAriaLabel?: UIPopoverProps['closeButtonAriaLabel']
inputField?: {
label?: string
errorMessage?: string
noProductsAvailableErrorMessage?: string
buttonActionText?: string
}
idkPostalCodeLink?: {
text?: string
to?: string
icon?: {
icon?: string
alt?: string
}
}
textBeforeLocation?: string
textAfterLocation?: string
description?: string
triggerRef?: UIPopoverProps['triggerRef']
onDismiss: UIPopoverProps['onDismiss']
offsetTop?: UIPopoverProps['offsetTop']
offsetLeft?: UIPopoverProps['offsetLeft']
placement?: UIPopoverProps['placement']
}
function RegionPopover({
title = 'Set your location',
closeButtonAriaLabel,
inputField: {
label: inputFieldLabel,
errorMessage: inputFieldErrorMessage,
noProductsAvailableErrorMessage: inputFieldNoProductsAvailableErrorMessage,
buttonActionText: inputButtonActionText,
},
idkPostalCodeLink: {
text: idkPostalCodeLinkText,
to: idkPostalCodeLinkTo,
icon: { icon: idkPostalCodeLinkIcon, alt: idkPostalCodeLinkIconAlt },
},
textBeforeLocation = 'Your current location is:',
textAfterLocation = 'Use the field below to change it.',
description = 'Offers and availability vary by location.',
triggerRef,
offsetTop = 6,
offsetLeft,
placement = 'bottom-start',
}: RegionPopoverProps) {
const inputRef = useRef<HTMLInputElement>(null)
const { isValidating, ...session } = useSession()
const { popover: displayPopover, closePopover } = useUI()
const { city, postalCode } = sessionStore.read()
const location = city ? `${textToTitleCase(city)}, ${postalCode}` : postalCode
const [input, setInput] = useState<string>('')
const { loading, setRegion, regionError, setRegionError } = useRegion()
const handleSubmit = async () => {
if (isValidating) {
return
}
await setRegion({
session,
onSuccess: () => {
setInput('')
closePopover()
},
postalCode: input,
errorMessage: inputFieldErrorMessage,
noProductsAvailableErrorMessage:
inputFieldNoProductsAvailableErrorMessage,
})
}
const idkPostalCodeLinkProps = {
href: idkPostalCodeLinkTo,
children: (
<>
{idkPostalCodeLinkText}
{!!idkPostalCodeLinkIcon && (
<UIIcon
name={idkPostalCodeLinkIcon}
aria-label={idkPostalCodeLinkIconAlt}
width={20}
height={20}
/>
)}
</>
),
}
const RegionPopoverContent = (
<>
<span data-fs-region-popover-description>
{postalCode ? (
<>
{textBeforeLocation} <span>{location}</span>. {textAfterLocation}
</>
) : (
<>{description}</>
)}
</span>
<UIInputField
data-fs-region-popover-input
id="region-popover-input-postal-code"
inputRef={inputRef}
label={inputFieldLabel}
actionable
value={input}
onInput={(e) => {
regionError !== '' && setRegionError('')
setInput(e.currentTarget.value)
}}
onSubmit={handleSubmit}
onClear={() => {
setInput('')
setRegionError('')
}}
buttonActionText={loading ? '...' : inputButtonActionText}
error={regionError}
/>
{idkPostalCodeLinkTo && (
<UILink data-fs-region-popover-link {...idkPostalCodeLinkProps} />
)}
</>
)
return (
<>
{displayPopover.isOpen && (
<div className={`${styles.section} section-region-popover`}>
<UIPopover
data-fs-region-popover
title={title}
isOpen={displayPopover.isOpen}
content={RegionPopoverContent}
placement={placement}
dismissible
triggerRef={triggerRef}
offsetTop={offsetTop}
offsetLeft={offsetLeft}
closeButtonAriaLabel={closeButtonAriaLabel}
onEntered={() => {
if (!postalCode && inputRef.current) {
inputRef.current.focus()
}
}}
/>
</div>
)}
</>
)
}
export default RegionPopover
```
</details>
Follow the steps below to add the `RegionPopover` section to Headless CMS.
1. **Go** to **Storefront > Headless CMS > Global Sections** in the VTEX Admin.
2. **Click** `+` in the Sections tab to open a modal with a list of section options.
3. **Search** for the **Region Popover** section and click it to add it.
4. **Set** the `Title` and `Close popover aria-label` fields with your values.
5. **Click** `Save` to save your changes.
6. **Click** `Publish` to open a dropdown list with the options `Add to Release` (to schedule the update) and `Publish now` (to publish immediately).
Learn more in [Adding sections to Headless CMS](https://developers.vtex.com/docs/guides/faststore/headless-cms-3-adding-content-types-and-sections#step-3-adding-sections-to-the-headless-cms)
### Step 4 - (Optional) Define a default postal code
The default postal code is a fallback mechanism when users don't provide a location, aren't logged in, or have no saved address.
To set a default postal code for your store, follow the steps below:
1. **Open** your FastStore project using the code editor of your choice.
2. **Open** the [`discovery.config.js`](https://developers.vtex.com/docs/guides/faststore/project-structure-config-options) file.
3. **Set** your default `postalCode` in the [`session`](https://developers.vtex.com/docs/guides/faststore/project-structure-config-options#session) object. See the example below:
```js discovery.config.js mark=12
session: {
currency: {
code: "USD",
symbol: "$",
},
locale: "en-US",
channel: '{"salesChannel":"1","regionId":""}',
country: "USA",
deliveryMode: null,
addressType: null,
city: null,
postalCode: 10021,
geoCoordinates: null,
person: null,
},
```
## Manage Delivery Promise filters and labels
Delivery Promise [filters](https://developers.vtex.com/docs/guides/faststore/delivery-promise-components) help shoppers narrow products by delivery/pickup availability for their location, while [badges](https://developers.vtex.com/docs/guides/faststore/delivery-promise-components) visually indicate shipping/pickup availability for the shopper's location when Delivery Promise data exists.
By default, filters and badges are active once Delivery Promise is enabled and implemented in the store. However, you can deactivate them (Global Filter by Pickup Point, Delivery Option, and Badges) and edit their labels in the Headless CMS. To do this, follow these steps.
> ℹ️ For more details on filters and badges, see the [Working with Delivery Promise components](https://developers.vtex.com/docs/guides/faststore/delivery-promise-components) guide.
1. **Go** to **Storefront > Headless CMS** in the VTEX Admin.
2. **Click** on the **Global Sections** Content Type.
3. **Click** the **Settings** tab.
4. **Go** to the **Delivery Promise** section and change the labels and settings to suit your scenario.

## Enable the Availability (In-stock) filter
By default, the [Availability](https://developers.vtex.com/docs/guides/faststore/delivery-promise-overview#plp-or-search-page-filters) filter is disabled in the Headless CMS. To enable this feature, follow these steps:
### Set up `hideUnavailableItems`
1. **Open** your FastStore project in the code editor of your choice.
2. **Open** the `discovery.config.js` file.
3. **Change** the value to `false` in `hideUnavailableItems`.
```discovery.config.js mark=6
...
api: {
storeId: "newstore",
workspace: "master",
environment: "vtexcommercestable",
hideUnavailableItems: false,
incrementAddress: false,
},
...
```
4. **Create** a new branch and open a pull request to deploy the change made in the `discovery.config.js` file to production.
### Enable the filter in the Headless CMS
After changing the `hideUnavailableItems` value to `false`, you can enable this filter in the Headless CMS.
1. **Go** to **Storefront > Headless CMS** in the VTEX Admin.
2. **Click** on the **Global Sections** Content Type.
3. **Click** the **Settings** tab.
4. **Check** the field **Should display In Stock filter?** in the **Delivery Promise** section.

## Next steps
After implementing Delivery Promise, you may want to:
* Customize the appearance of the Delivery Promise components to match your store's branding.
* Monitor the performance of Delivery Promise in your store using analytics.
* Explore advanced configurations for Delivery Promise, such as setting up custom delivery rules. Was this feedback useful?
|
Grammar review summaryReview for
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit
Grammar reviewer
📝 [Grammar reviewer] reported by reviewdog 🐶
'To request' is more concise and indicates purpose more clearly than 'and request' in this context.
dev-portal-content/docs/faststore/components/features/delivery-promise/implementation.mdx
Line 76 in 916f9ed
If you are using a different major version and want to migrate, please [open a ticket with VTEX Support](https://help.vtex.com/en/support) and request the installation of the Edition app `vtex.edition-store@5.x`. |
📝 [Grammar reviewer] reported by reviewdog 🐶
'To request' is more concise and indicates purpose more clearly than 'and request' in this context.
dev-portal-content/docs/faststore/components/features/delivery-promise/implementation.mdx
Line 86 in 916f9ed
Open a ticket with [VTEX Support](https://help.vtex.com/en/support) and request the activation of Delivery Promise in your account. |
📝 [Grammar reviewer] reported by reviewdog 🐶
'For more information, see' is a more formal and common phrasing in technical documentation.
dev-portal-content/docs/faststore/components/features/delivery-promise/implementation.mdx
Line 96 in 916f9ed
3. Under the [`deliveryPromise`](https://developers.vtex.com/docs/guides/faststore/project-structure-config-options#deliverypromise) section, set the `enabled` value to `true`. Set the `mandatory` value based on your business needs. Learn more in the [Default settings](#default-settings) section. |
📝 [Grammar reviewer] reported by reviewdog 🐶
'Is to receive' is a more concise and grammatically direct phrasing.
dev-portal-content/docs/faststore/components/features/delivery-promise/implementation.mdx
Line 109 in 916f9ed
The expected response is that you receive the message `CMS synced successfully...`. The native regionalization components and sections will be automatically updated. You can check them in the VTEX Admin: |
📝 [Grammar reviewer] reported by reviewdog 🐶
A colon is appropriate here to introduce an explanation or a specific item.
dev-portal-content/docs/faststore/components/features/delivery-promise/implementation.mdx
Line 117 in 916f9ed
You only need to [add a new section](#step-3-adding-region-popover-section), the `Region Popover`. |
📝 [Grammar reviewer] reported by reviewdog 🐶
In formal technical writing, contractions like 'It's' are generally avoided in favor of the full form 'It is'.
dev-portal-content/docs/faststore/components/features/delivery-promise/implementation.mdx
Line 121 in 916f9ed
`RegionPopover` is a section that manages user location inputs. It's used when location data is missing or the store's default postal code is applied. Available in [`@faststore/core`](https://developers.vtex.com/docs/guides/faststore/project-structure-overview#packagejson), `RegionPopover` uses the [`Popover`](https://developers.vtex.com/docs/guides/faststore/molecules-popover) component as its UI base. |
📝 [Grammar reviewer] reported by reviewdog 🐶
'Displaying a list of' is more descriptive and active than 'with a list of'.
dev-portal-content/docs/faststore/components/features/delivery-promise/implementation.mdx
Line 308 in 916f9ed
2. In the Sections tab, click `+` to open a modal with a list of section options. |
📝 [Grammar reviewer] reported by reviewdog 🐶
The verb 'add' requires an object; specifying 'it' (referring to the section) clarifies the action.
dev-portal-content/docs/faststore/components/features/delivery-promise/implementation.mdx
Line 309 in 916f9ed
3. Search for the **Region Popover** section and click it to add. |
📝 [Grammar reviewer] reported by reviewdog 🐶
'Save your changes' is redundant. 'Apply your changes' or simply 'Click Save
' is more concise.
dev-portal-content/docs/faststore/components/features/delivery-promise/implementation.mdx
Line 311 in 916f9ed
5. Click `Save` to save your changes. |
📝 [Grammar reviewer] reported by reviewdog 🐶
'For more information, see' is a more formal and common phrasing in technical documentation.
dev-portal-content/docs/faststore/components/features/delivery-promise/implementation.mdx
Line 314 in 916f9ed
Learn more in [Adding Sections to the Headless CMS](https://developers.vtex.com/docs/guides/faststore/headless-cms-3-adding-content-types-and-sections#step-3-adding-sections-to-the-headless-cms) |
📝 [Grammar reviewer] reported by reviewdog 🐶
Adding 'for' clarifies the context of the fallback mechanism.
dev-portal-content/docs/faststore/components/features/delivery-promise/implementation.mdx
Line 318 in 916f9ed
The default postal code is a fallback mechanism when the user doesn't provide a location, isn't logged in, or has no saved address. |
📝 [Grammar reviewer] reported by reviewdog 🐶
'For example' is a more concise and common way to introduce an example.
dev-portal-content/docs/faststore/components/features/delivery-promise/implementation.mdx
Line 324 in 916f9ed
3. In the [`session`](https://developers.vtex.com/docs/guides/faststore/project-structure-config-options#session) object, set the `postalCode` value based on your scenario. See the following example: |
📝 [Grammar reviewer] reported by reviewdog 🐶
Use 'on' when referring to a specific page or platform.
dev-portal-content/docs/faststore/components/features/delivery-promise/overview.mdx
Line 31 in 916f9ed
>ℹ Learn more about filter usage and user flows in the [Delivery Promise Figma Community](https://www.figma.com/community/file/1545494767147168145/delivery-promise-by-vtex) page. |
📝 [Grammar reviewer] reported by reviewdog 🐶
Adding 'how' makes the phrase grammatically complete and clearer.
dev-portal-content/docs/faststore/components/features/delivery-promise/overview.mdx
Line 88 in 916f9ed
3. **Default postal code:** If the user hasn't provided a location, isn't logged in, or has no saved address, we check if the merchant has configured a default postal code for all buyers. Learn to do so in [Defining a default postal code](#step-4-optional-defining-a-default-postal-code). |
📝 [Grammar reviewer] reported by reviewdog 🐶
In formal technical documentation, it's generally preferred to use the full form 'cannot' instead of the contraction 'can't'.
dev-portal-content/docs/faststore/components/features/delivery-promise/overview.mdx
Line 90 in 916f9ed
5. **No postal code (required):** If no postal code is provided when required, a modal is displayed that the buyer can't close until a postal code is entered. To make the postal code required, open your `discovery.config.js` file and change the `mandatory` field in the `deliveryPromise` object to `true`, as shown in the [Default settings](#default-settings) section. |
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Grammar review summaryReview for
|
Grammar review summaryReview for
|
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Grammar review summaryReview for
|
|
||
Shoppers can filter available products globally using the **Filter by store** option, which displays only products available for pickup at a specific store. This filter shows all available pickup points within a 50-km radius, as configured in Checkout. The number of pickup points displayed is unlimited. | ||
|
||
 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
suggestion: display the global pickup point set. (is the video cutting right after choosing it?)
| **All delivery methods** | Displays products that match all active delivery method filters: **Shipping to**, **Pickup anywhere**, **Pickup at**, and **Pickup nearby**. | | ||
| **Shipping to** | Displays products that can be shipped to the shopper's specified location. | | ||
| **Pickup anywhere** | Displays products available for pickup at any participating store within the merchant's network, rather than restricting results to a selected pickup location or geographic proximity. This is often used by B2B stores, and this filter is deactivated in Headless CMS by default. | | ||
| **Pickup at** | Displays the store specified in the global pickup point filter or the one closest to the shopper's location. To change the store set in `Pickup at {storeName}`, the shopper can click on it and select a new store in the slideover that opens. This slideover shows all available pickup points within a 50-km radius, as configured in Checkout. The number of pickup points displayed is unlimited. | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@lariciamota is unlimited for us, because we are only displaying what is coming from API right? Is this information somehow important to know? (Is it because you can't set a limit?)
|
||
 | ||
|
||
To create, configure, and manage delivery options in the VTEX Admin, see the instructions in the [Delivery Option (Beta)](https://newhelp.vtex.com/docs/tutorials/delivery-options-beta) guide. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sobre esse ponto aqui, será que seria interessante destacar que é preciso marcar o Use option as a filter on the product listing page
? Sem isso ativado, o filtro não vai aparecer.
Use option as a filter on the product listing page: Enable this to allow customers to filter products by this delivery option using[ Intelligent Search filters]
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@hellofanny essa opção, Use option as a filter on the product listing page
, eu ativo aonde? No Admin?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Issoo! quando vai cadastrar um novo DP.
Tem todo um tutoria nesse guide aí Delivery Option (Beta), mas estava pensando se seria bom reforçar aqui tbm 🤔

There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Entendi, @hellofanny!
Olhando o guia do Help, pode ser que a pessoa não perceba, não ative e depois não apareça na PLP.
Eu adicionei um callout aqui, mas talvez o ideal seja reforçar isso no guia de delivery options. Vou falar com a @karenkrieger (TW de Logistic) se faz sentido reforçar essa flag no guia original.
Atualização: Karen, já vai atualizar o guia no help.
docs/faststore/components/features/delivery-promise/overview.mdx
Outdated
Show resolved
Hide resolved
docs/faststore/components/features/delivery-promise/overview.mdx
Outdated
Show resolved
Hide resolved
Co-authored-by: Fanny Chien <fanny.chien@vtex.com>
Grammar review summaryReview for
|
Grammar review summaryReview for
|
Grammar review summaryReview for
|
- [Global filters](#global-filters): Apply to all store navigation. | ||
- [Product List Page (PLP) or search page](#plp-or-search-page-filters): Apply only to the current page the shopper is viewing. | ||
|
||
>ℹ Learn more about filter usage and user flows on the [Delivery Promise Figma Community](https://www.figma.com/community/file/1545494767147168145/delivery-promise-by-vtex) page. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[link-check] reported by reviewdog 🐶
🚨 Found a broken link in a Markdown Link (Error 403):
https://www.figma.com/community/file/1545494767147168145/delivery-promise-by-vtex
👉 Please review this link before merging your Pull Request.
Grammar review summaryReview for
|
Grammar review summaryReview for
|
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Grammar review summaryReview for
|
|
||
1. Open your FastStore project in the code editor of your choice. | ||
2. Open the `discovery.config.js` file. | ||
3. In `hideUnavailableItems`, change the value to `false`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📝 [Grammar reviewer] reported by reviewdog 🐶
Rephrased for clarity and better grammatical structure. 'In hideUnavailableItems
' is less precise than 'Change the value of hideUnavailableItems
'.
3. In `hideUnavailableItems`, change the value to `false`. | |
3. Change the value of `hideUnavailableItems` to `false`. |
H -- No --> N(["Display products without using Delivery Promise"]) | ||
``` | ||
--- | ||
title: "Understanding Delivery Promise operation" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📝 [Grammar reviewer] reported by reviewdog 🐶
In titles and headings, major words are typically capitalized for better readability and consistency.
title: "Understanding Delivery Promise operation" | |
title: "Understanding Delivery Promise Operation" |
This feature introduces the following hooks as part of the regionalization and location workflow: | ||
|
||
* `useGeoLocation`: Uses the browser's geolocation API or other client-side methods to auto-detect the user's location when not provided. | ||
* `useRegion`: Accesses or updates the user's region information, such as a postal code or location and manages region validation flows. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📝 [Grammar reviewer] reported by reviewdog 🐶
A comma is needed before 'and' when it connects two independent clauses or separates items in a list of actions to improve clarity.
* `useRegion`: Accesses or updates the user's region information, such as a postal code or location and manages region validation flows. | |
* `useRegion`: Accesses or updates the user's region information, such as a postal code or location, and manages region validation flows.. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📝 [Grammar reviewer] reported by reviewdog 🐶
Added 'the' for better grammatical flow when referring to a specific app by its type and name.
dev-portal-content/docs/faststore/components/features/delivery-promise/implementation.mdx
Line 76 in e9fe738
If you're using a different major version and want to migrate, please [open a ticket with VTEX Support](https://help.vtex.com/en/support) and request the installation of Edition app `vtex.edition-store@5.x`. |
Types of changes
PR changes: