Enable Customers to Add Products to Their Cart from Search Results

When customers search for products in your store, let them add the product to their cart directly from the search results page.

Configure the Add to Cart Button

These steps apply to the Results component in B2B stores.

In the navigation sidebar, select a store from the Store dropdown.
Select Website Design, and then click Experience Builder.
In Experience Builder, open the search page.
From the Components panel, drag the Results component into the page’s Results section.
When you drag a component over a content or theme layout region, a label appears to identify the region. Components in a content layout region are specific to the page. Components in a theme layout region have the label “Shared” added to the name because they’re shared everywhere that the theme layout region is used.
In the component’s Results Display section, select Show Call To Action Button.
Use the customization options to tailor the button style and text.

These steps apply to the Results Grid component in D2C stores.

In the navigation sidebar, select a store from the Store dropdown.
Select Website Design, and then click Experience Builder.
In Experience Builder, open the search page.
From the Components panel, drag the Results Grid component into the page’s Results Layout section.
When you drag a component over a content or theme layout region, a label appears to identify the region. Components in a content layout region are specific to the page. Components in a theme layout region have the label “Shared” added to the name because they’re shared everywhere that the theme layout region is used.
Edit the Results Grid component properties.
1. Go to the component’s Settings tab.
2. For Data Source, select Nested Expression.
3. For Expression, select Description.
Add the Product Card component to the Results Grid component, and edit the Product Card component properties.
1. From the Components panel, drag the Product Card component into the sfdcRepeaterItem section of the Results Grid component.
2. Go to the component’s Settings tab.
3. For Data Binding, make sure that {!Item} is entered.
4. In the Button Settings section, select Show Add to Cart Button.
5. Use the customization options to tailor the button style and text.
Edit the Results Grid component properties again.
1. Go to the component’s Settings tab.
2. For Data Source, select Nested Expression.
3. For Expression, select Product Cards.