Editor X: Adding and Setting Up Site Search
6 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
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 App
The 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.
, you'll be redirected to a new Search Results page that is fully customizable.Show me how
on the top of Editor X.
next to Site Search to add it to your site. 
Step 2 | Customize the Search Bar
After 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
Design the search bar
. 
: Choose the background color of the bar and the search icon. Drag the sliders to set the opacity of each component.
: Create a border for your bar. You can choose the border color, opacity, style and width.
: 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.
: 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.
: Change the design of the placeholder text, including the font and color.Adjust the layout of the search bar
. to adjust the layout of the search bar. First, choose a layout at the top. Tip:
Tailor the search bar to your site's breakpoints so visitors can use it from any device.
Step 3 | Customize the Search Results Page
After 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
Manage the page's settings, layout and design
Note:
This page is hidden, which means visitors can only see it when they search for a term in the search bar.
Did this help?
|