How to set the search design and Ajax search functionality in Magento 2 using the Pearl Theme

The Pearl Theme provides an out of the box flexible design for both header and Ajax search results:

A. Header Search Design

• Header Search Version 1 ( default Magento search)
• Header Search Version 2

B. Ajax Search Results Design

• Ajax Search results Version 1
• Ajax Search results Version 2 - White - Horizontal results
• Ajax Search results Version 2 - Black - Vertical results 

A. Header Search Design

You can choose between Header Search V1 and Header Search V2 by going to:

Admin > Store > Configuration > Custom Header > Search Options > Search Version 

Search Version 1 (default Magento)

Search Version 2

Search Version 2 - open - white

Search Version 2 - open - black

Additional design options are available for each search version, allowing you full control over the search design. You can choose one of the 2 versions and customize it further using admin options to match your design needs. 

B. Ajax Search Results Design

You can choose between 3 Ajax search results designs, or choose one and customize it further using the existing admin options:

• Ajax Search results Version 1 (Only with Header Search Version V1)
• Ajax Search results Version 2 - White - Horizontal results (Only with Header Search V2)
• Ajax Search results Version 2 - Black - Vertical results (Only with Header Search V2)

Select Search Design from:

Admin > Store > Configuration > Custom Header > Search Options > Search Version

Configure Ajax Search Autocomplete functionality from:

Admin > Store > Configuration > Ajax Search Autocomplete 

Ajax Search results Version 1 (Only with Header Search Version V1)

Ajax Search results Version 2 - White - Horizontal results (Only with Header Search V2)

Ajax Search results Version 2 - Black - Vertical results (Only with Header Search V2)

Additional design options are available for each Ajax search version, allowing you full control over search results.  

Admin > Store > Configuration > Ajax Search Autocomplete 

Note on sample configuration: In case you need to check specific the configuration to match our demo-store design, you can login to our demo admin at the link below, select specific store-view and check the search and Ajax auto-complete settings.

Pearl Theme Demo Admin

pearl.weltpixel.com/admin(try incognito if it doesn't auto-login)