Enabling product purchase from search with QuickOrder

This feature allows customers to add products directly to their cart from search results, simplifying the purchase process.

QuickOrder is a feature that allows customers to add products directly to their cart from search results, simplifying the purchase process. It reduces the number of steps required to complete a purchase, making it especially useful for B2B stores that involve bulk and frequent orders. QuickOrder can help in the following scenarios:

Minimizing clicks to add items to the cart.
Simplifying the process for bulk and frequent orders.
Improving the usability of search results.
Handling complex product variations.

Before you begin

Before implementing QuickOrder, make sure you have:

A FastStore project onboarded through WebOps.
VTEX Intelligent Search installed and integrated with your store.
An understanding of Section Override to follow along the instructions.

Use case: B2B store

In B2B stores, buyers often need to add large quantities of products, including multiple variants, to the cart. With QuickOrder, the SearchProductItem component displays available stock and quantity selectors directly in search results, streamlining the purchasing process for repeat and bulk orders. QuickOrder in a B2B context supports two interaction patterns:

Simple quantity input: The buyer sets the desired quantity next to each search result and adds it to the cart directly.

${"base64":" ","img":{"width":1111,"height":739,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":104022,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/quickorder-b2b-search-results___2e7fec0b94420c3014a48c1fec6ce813.png"}}$

SKU Matrix (bulk variant selection): For products with multiple variants (example: sizes, colors), clicking the add-to-cart button opens a sidebar panel where the buyer can select combinations and quantities across all SKUs at once, then add everything to the cart in a single action.

${"base64":" ","img":{"width":1163,"height":906,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":83015,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/quickorder-sku-matrix___79ff33859a20bd179905ac6298541d2b.png"}}$

Instructions

Step 1 - Override the `SearchProductItem` component

In your FastStore project, navigate to src/components/overrides and create a SearchProductItem.tsx file.
Add the following code to the file:

_25import { SectionOverride } from "@faststore/core"; _25import { SearchProductItemContent_unstable } from "@faststore/core/experimental"; _25 _25const SECTION = "SearchInput" as const; _25 _25const override: SectionOverride = { _25 section: SECTION, _25 components: { _25 SearchProductItemContent: { _25 Component: (props) => ( _25 <SearchProductItemContent_unstable _25 {...props} _25 quickOrderSettings={{ _25 quantitySelector: { _25 maxQuantity: 999, _25 }, _25 outOfStockLabel: "Out of stock", _25 }} _25 /> _25 ), _25 }, _25 }, _25}; _25 _25export { override };

The code above overrides the SearchProductItemContent component to enable QuickOrder with the following settings:
- maxQuantity: Sets the upper limit for the quantity selector. Adjust this value to meet the requirements of your store.
- outOfStockLabel: Defines the label displayed when a product is out of stock.
Open the terminal and run yarn dev to sync the changes locally.
Access the local development URL of your store to check if the search results now display a quantity selector and an add-to-cart button next to each product.

For products with multiple SKUs, you can extend QuickOrder with the SKU Matrix sidebar, which lets buyers choose variants and quantities in a single interaction.

The SKU Matrix sidebar (__experimentalSKUMatrixSidebar) is an experimental feature. Its API and behavior may change in future releases.

In src/components/overrides, create a Navbar.tsx file and add the following:

_14import { SectionOverride } from "@faststore/core"; _14 _14const SECTION = "Navbar" as const; _14 _14const override: SectionOverride = { _14 section: SECTION, _14 components: { _14 __experimentalSKUMatrixSidebar: { _14 Component: () => null, _14 }, _14 }, _14}; _14 _14export { override };

The __experimentalSKUMatrixSidebar override registers the SKU selection sidebar in the Navbar. This allows buyers to view and select all available SKU combinations for a product from a drawer panel without leaving the search results page.
Update your SearchProductItem.tsx override to enable the SKU Matrix:

_28import { SectionOverride } from "@faststore/core"; _28import { SearchProductItemContent_unstable } from "@faststore/core/experimental"; _28 _28const SECTION = "SearchInput" as const; _28 _28const override: SectionOverride = { _28 section: SECTION, _28 components: { _28 SearchProductItemContent: { _28 Component: (props) => ( _28 <SearchProductItemContent_unstable _28 {...props} _28 quickOrderSettings={{ _28 skuMatrix: { _28 enabled: true, _28 }, _28 quantitySelector: { _28 maxQuantity: 999, _28 }, _28 outOfStockLabel: "Out of stock", _28 }} _28 /> _28 ), _28 }, _28 }, _28}; _28 _28export { override };

With skuMatrix.enabled set to true, the add-to-cart button in search results opens the SKU Matrix sidebar for products with multiple variants, allowing buyers to pick variant combinations and quantities before adding everything to the cart.
Run yarn dev to apply the changes locally.
Do a search and click the add-to-cart button on a product with multiple SKUs. The SKU Matrix panel should open.

Step 3 - Promote your changes

After testing locally, follow these steps to deploy the changes to production:

In your local store code, create a new branch with the changes you made.
Push the changes to the new branch and publish it.
Open a pull request in the store repository.
If the checks and reviews are all good, merge with the main branch.

For more details on customizing components in FastStore, see Section Override. For information about the Search components used in QuickOrder, see SearchProducts.

Before you begin

Use case: B2B store

Instructions

Step 1 - Override the SearchProductItem component

Step 2 - Enable the SKU Matrix sidebar for bulk variant selection

Step 3 - Promote your changes

Step 1 - Override the `SearchProductItem` component