Editor X: Adding and Setting Up Site Search
Add a search bar to your site to let visitors find anything they need. The search results are displayed clearly in a list, showing content from your site pages as well as store products, blog posts and much more. Before you begin:Make sure your site is set to appear in search engines. If it's hidden, visitors won't be able to see their search results. Step 1 | Add the Site Search AppThe first step is adding the Wix Site Search app directly from the Add panel. Once you click the Add to Site icon , you'll be redirected to a new Search Results page that is fully customizable.Show me how
Click Add   on the top of Editor X. Click Menu & Search on the left.  Select Site Search. Click the Add to Site icon  next to Site Search to add it to your site. Step 2 | Customize the Search BarAfter adding the Site Search app, choose a search bar from the Add panel and drag it to a section on your page. We recommend placing it in the default master header to ensure it's always visible. Next, customize the search bar's placeholder text, layout and design to make it your own. You can also enable quick search to let visitors see search results on the spot, in addition to the Search Results page. Click an option below to learn how to set up the search bar:Manage the search bar settings
Select the Search Bar element on your page. Click Settings. Do the following to set up your search bar:
    
Enter your own placeholder text in the text box.  Click the Enable quick search toggle to enable or disable this option. Quick search lets visitors see relevant results on the spot as they type their keywords.   Design the search bar
Select the Search Bar element on your page. Click the Design icon .  Click a tab at the top of the panel to choose which state you are customizing (Regular, Hover or Focus). Design the search bar using the following options:
    
Fill Color & Opacity : Choose the background color of the bar and the search icon. Drag the sliders to set the opacity of each component. Border : Create a border for your bar. You can choose the border color, opacity, style and width. Corners : Change the corners of your bar. You can enter a value in px on specific corners, or click the link icon in the center to keep them all the same. Shadow : Click the Enable Shadow toggle to add a shadow to your bar. You can change the angle, distance and size of the shadow. You can also choose the color, opacity and blur. Text : Change the design of the placeholder text, including the font and color.  Adjust the layout of the search bar 
Select the Search Bar element on your page. Click the Layouts icon . to adjust the layout of the search bar. First, choose a layout at the top.  Customize the layout using the available options:
    
Icon alignment: Choose whether to place the search icon to the left or right of the search bar.  Text alignment: Choose the alignment of the placeholder text (to the left or center).  Text padding: When you align text to the left, you can drag this slider to adjust the distance (in px) between the text and the left corner.   Icon spacing: Drag the slider to adjust the spacing (in px) between the search icon and the borders of the search bar.   Tip:Tailor the search bar to your site's breakpoints so visitors can use it from any device. Step 3 | Customize the Search Results PageAfter designing the search bar, customize the Search Results page that displays the results of your visitors' queries. Change the page's title by clicking the text element, and select the Search Results app to manage its settings, layout and design. Click an option below to learn how to set up the Search Results page: Change the page's title
Click the text element that reads Search Results. Click Edit Text to change the text and its formatting.  Manage the page's settings, layout and design
Select the Search Results app on the page.  Click Settings. Click the following tabs in the Settings panel to customize the page:
    
Settings: Decide how to display information on this page. For example, you can control the number of results shown per page, include an additional search bar within the page and more.  Display: Rename, reorder, hide or unhide the search categories on your search results page. Layout: Choose an alignment for the results menu and the pagination bar, in case there are multiple pages of search results.  Design: Design individual elements on the page like the search bar (if you chose to include it), the results menu and the actual search results.   Note:This page is hidden, which means visitors can only see it when they search for a term in the search bar.