Let’s explore the elements of the Search Drawer, how they improve the search experience, and how to configure them in Settings to suit your store’s needs.

Search Drawer Overview

When an initial search is made, the Search Drawer appears at the top of the screen, displaying the first search result below. The Search Drawer allows customers to refine their search by selecting attribute options or typing what they are looking for in the search bar.

The Search Drawer is designed to be non-intrusive:

• Auto-collapse: It collapses when customers start scrolling through the product listing or opening a PDP.
• Manual control: Customers can collapse or expand it by pressing outside the drawer or the round Search Button.

Key Elements of the Search Drawer

Primary Attributes

If Primary Attributes were selected in the Entry View, the chosen options will be displayed in the top left corner of the Search Drawer. This helps customers track their search context.

• Customers can modify their selections at any time via the top-left corner or the Attribute Panel.
• Primary Attributes are also shown in the Attribute Panel as the attribute tabs.

Loyalty Signup

The Loyalty Signup button is also available at the top of the Search Drawer. Tapping it opens the same Signup Form covered in the previous chapter.

<aside>

🔗 Refer to the Chapter 2: Loyalty Signup

</aside>

Language & Country Selector

The Language & Country Selector appears in the top-right corner of the Search Drawer, enabling customers to change their preferences. Changing the selection resets the session and redirects customers to the Entry View.

Search Bar

The Search Bar allows customers to:

• Search by Style ID, Style Name, EAN, or any keyword.
• Automatically map keywords to existing attribute options, optimizing the search process.

Size Selector

Before selecting a size or length

Size and length are selected

The Size Selector, located next to the Search Bar, offers quick access to size or length attributes.

• Selected sizes or lengths will be displayed as the button's label.
• This separation improves visibility and usability, addressing specific customer needs more efficiently.
• Customers can also access size and length attributes via the Attribute Panel.