Understanding and Customizing Your Search Results Page
When your visitors search your site using Wix Site Search, the results of the search are displayed clearly in a list on a Search Results page.
You can change the layout and design of the Search Results page, including the fonts, background, and border.
Understanding the Search Results page
When you add Wix Site Search, a new hidden page called Search Results is also added to your site. Your visitors can only see this page when they search for a term in your s earch bar.
The Search Results page includes 3 elements:
Search bar: This field allows visitors to easily search your site again from the Search Results page, without having to scroll to the other search bar.
Results menu: This menu categorizes the search results based on where the results are located (e.g. site pages, blog posts, stores).
Search results: These are the results for your visitor's search phrase. If no results are found, a "No Results" message displays.
Customizing your page display
Decide what options are available for visitors browsing the Search Results page. You can show a search bar on the page and customize the 'Results Found' message.
Wix Editor
Click Pages & Menu
on the left side of the editor.
Click Wix Site Search.
Click the Search Results page.
Click the search results element on the page.
Click Settings.
Click the Display tab.
Customize the following options:
Search Bar: Enable the Show search bar in Results Page toggle to add a search bar. Enter the placeholder text that should appear on the search bar.
Search Results: Decide what the 'Results Found' message includes: The number of results, the visitor's search term or both (e.g. "23 items found for 'T-shirt'").
Studio Editor
Click Pages
on the left side of the editor.
Click the Search Results page.
Click the search results element on the page.
Click Settings.
Click the Display tab.
Customize the following options:
Search Bar: Enable the Show search bar in Results Page toggle to add a search bar. Enter the placeholder text that should appear on the search bar.
Search Results: Select what the 'Results Found' message includes, the number of results, the visitor's search term, or both (e.g. "23 items found for 'T-shirt'").
Wix Harmony Editor
Click the Page dropdown at the top left of the page.
(In the Site Pages panel) Select the Search Results page.
Click the search results element on the page.
Click the Settings icon
on the action bar.
Click the Display tab.
Customize the following options:
Search Bar: Enable the Show search bar in Results Page toggle to add an additional search bar to the Search Results page. Enter the placeholder text that should appear on the search bar.
All Results Tab: Enable the Enable 'All' tab toggle to show an additional tab with all of the search results in one place (divided by page type).
Search Results: Select what the 'Results Found' message includes, the number of results, the visitor's search term, or both (e.g. "23 items found for 'T-shirt'").
Managing the tabs on the page
The Search Results page organizes the results into tabs. You can decide on the order of the tabs based on what you want to promote. You can also rename the tabs and hide those you don't want to show.
Wix Editor
Click Pages & Menu
on the left side of the editor.
Click Wix Site Search.
Click the Search Results page.
Click the search results element on the page.
Click Settings.
Click the Settings tab.
Choose what to do next:
Reorder the tabs
Click Reorder.
Click and drag a category tab to change its order on your results page.
Rename the tabs
Click Show on Search.
Click the Edit icon
next to the relevant category (e.g. Other Pages).
Rename the tab under Change label text.
Hide or show a tab
Click Show on Search.
Enable/disable the toggle next to the relevant category (e.g. Other Pages) to show or hide specific categories.
Advanced settings
Click Show on Search.
Enable/disable the Show hidden pages (SEO) toggle to show or hide hidden pages.
Studio Editor
Click Pages
on the left side of the editor.
Click the Search Results page.
Click the search sesults element on the page.
Click Settings.
Click the Settings tab.
Customize the following options:
Reorder the tabs
Click Reorder.
Click and drag a category tab to change its order on your results page.
Rename the tabs
Click Show on Search.
Click the Edit icon
next to the relevant category (e.g. Other Pages).
Rename the tab under Change label text.
Hide or show a tab
Click Show on Search.
Enable/disable the toggle next to the relevant category (e.g. Other Pages) to show or hide specific categories.
Advanced settings
Click Show on Search.
Enable/disable the Show hidden pages (SEO) toggle to show or hide hidden pages.
Wix Harmony Editor
Click the Page dropdown at the top left of the page.
(In the Site Pages panel) Select the Search Results page.
Click the search results element on the page.
Click the Settings icon
on the action bar.
Click the Settings tab.
Choose what to do next:
Reorder the tabs
Click Reorder.
Click and drag a category tab to change its order on your results page.
Rename the tabs
Click Show on Search.
Click the Edit icon
next to the relevant category (e.g. Other Pages).
Rename the tab under Change label text.
Hide or show a tab
Click Show on Search.
Enable/disable the toggle next to the relevant category (e.g. Other Pages) to show or hide specific categories.
Advanced settings
Click Show on Search.
Click the Show hidden pages (SEO) toggle:
Enabled: The search results also include pages that you chose to hide from search engines through your site's SEO settings.
Disabled: The search results don't include pages that are hidden from search engines.
Adjusting the layout of your Search Results page
Customize the layout by choosing the alignment of the menu and pagination bar. You can also choose the number of results displayed on each page.
Wix Editor
Click Pages & Menu
on the left side of the editor.
Click Wix Site Search.
Click the Search Results page.
Click the search results element on the page.
Click Settings.
Click the Layout tab.
Set up the layout of the page:
Menu layout: Select whether the results menu is aligned to the Left, Center, or Right.
Results layout: Drag the slider to increase or decrease the number.
Pagination layout: Select whether the pagination bar is aligned to the Left, Center, or Right.
Studio Editor
Click Pages
on the left side of the editor.
Click the Search Results page.
Click the search results element on the page.
Click Settings.
Click the Layout tab.
Set up the layout of the page:
Menu layout: Select whether the results menu is aligned to the left, center, or right.
Results layout: Drag the slider to increase or decrease the number.
Pagination layout: Select whether the pagination bar is aligned to the left, center, or right.
Wix Harmony Editor
Click the Page dropdown at the top left of the page.
(In the Site Pages panel) Select the Search Results page.
Click the search results element on the page.
Click the Settings icon
on the action bar.
Click the Layout tab.
Set up the layout of the page:
Menu layout: Select whether the results menu is aligned to the left, center, or right.
Results layout: Drag the slider to increase or decrease the amount of results that appear per page (the minimum is 10 per page).
Pagination layout: Select whether the pagination bar is aligned to the left, center, or right.
Tip: A pagination bar lets visitors navigate between pages of search results. It appears when there are too many results to display in a single page.
Customizing the design of your Search Results page
You can customize the font and color design of all aspects of your Search Results page to match your site. This includes the search bar, results menu and search results list.
Wix Editor
Click Pages & Menu
on the left side of the editor.
Click Wix Site Search.
Click the Search Results page.
Click the search results element on the page.
Click Settings.
Click the Design tab.
Choose what you want to customize:
Search bar
Customize the search bar on the results page. The search bar allows visitors to quickly search for something else without having to scroll through the page.
Click Search Bar, and customize the below options:
Background opacity & color: Click the color box to select the background color of the search bar, and drag the slider to increase or decrease the opacity.
Border width: Drag the slider to adjust the thickness of the border.
Border opacity & color: Click the color box to select the color of the search bar's border, and drag the slider to increase or decrease the opacity.
Text font & color: Click the color box to select the text color, and click the text field to adjust the font, size, and formatting.
Icon opacity & color: Click the color box to select the icon color, and drag the slider to increase or decrease its opacity.
Results menu
Customize the results menu, which shows where the search term was found on your site (e.g. pages, store).
Click Results Menu and customize using the below options:
Text font & color: Click the color box to select the text color, and click the text field to adjust the font, size, and formatting.
Border opacity & color: Click the color box to select the border color, and drag the slider to adjust its opacity.
Selected border color: Click the color box to select the border color of a menu item when it is selected.
Search results
Customize the list of search results section of the page.
Click Search Results to customize the options below:
Search Results: Click the color boxes next to the relevant text to select the color, and click the text field to adjust its font, size, and formatting.
Pagination: Customize the pagination bar at the bottom of the search results page with the below options:
Text font & color: Click the color boxes next to the relevant text to select the color, and click the text field to adjust its font, size, and formatting.
Selected text color: Click the color box to select the text color of the selected page in the pagination bar.
Text Highlight: Adjust how highlighted text looks on the results page using the below options:
Highlight color: Click the color picker to choose a highlight color, and drag the slider to adjust its opacity.
Font color & style: Click the color picker to choose a font color, and add bold, italics, or underline to the text.
Studio Editor
Click Pages
on the left side of the editor.
Click the Search Results page.
Click the search results element on the page.
Click Settings.
Click the Design tab.
Choose what you want to customize:
Search bar
Customize the search bar on the results page. The search bar allows visitors to quickly search for something else without having to scroll through the page.
Click Search Bar, and customize the below options:
Background opacity & color: Click the color box to select the background color of the search bar, and drag the slider to increase or decrease the opacity.
Border width: Drag the slider to adjust the thickness of the border.
Border opacity & color: Click the color box to select the color of the search bar's border, and drag the slider to increase or decrease the opacity.
Text font & color: Click the color box to select the text color, and click the text field to adjust the font, size, and formatting.
Icon opacity & color: Click the color box to select the icon color, and drag the slider to increase or decrease its opacity.
Results menu
Customize the results menu, which shows where the search term was found on your site (e.g. pages, store).
Click Results Menu and customize using the below options:
Text font & color: Click the color box to select the text color, and click the text field to adjust the font, size, and formatting.
Border opacity & color: Click the color box to select the border color, and drag the slider to adjust its opacity.
Selected border color: Click the color box to select the border color of a menu item when it is selected.
Search results
Customize the list of search results section of the page.
Click Search Results to customize the options below:
Search Results: Click the color boxes next to the relevant text to select the color, and click the text field to adjust its font, size, and formatting.
Pagination: Customize the pagination bar at the bottom of the search results page with the below options:
Text font & color: Click the color boxes next to the relevant text to select the color, and click the text field to adjust its font, size, and formatting.
Selected text color: Click the color box to select the text color of the selected page in the pagination bar.
Text Highlight: Adjust how highlighted text looks on the results page using the below options:
Highlight color: Click the color picker to choose a highlight color, and drag the slider to adjust its opacity.
Font color & style: Click the color picker to choose a font color, and add bold, italics, or underline to the text.
Buttons
Customize the buttons that appear in the search results section of the page.
Click Buttons to customize the View all button and the Add to cart button:
Text font & color: Click the color box to select the text color, and click the text field to adjust its font, size, and formatting.
Fill color & opacity: Click the color box to select the button color, and drag the slider to adjust its opacity.
Wix Harmony Editor
Click the Page dropdown at the top left of the page.
(In the Site Pages panel) Select the Search Results page.
Click the search results element on the page.
Click the Settings icon
on the action bar.
Click the Design tab.
Choose what you want to customize:
Search bar
Customize the search bar on the results page. The search bar allows visitors to quickly search for something else without having to scroll through the page.
Click Search Bar, and customize the below options:
Background opacity & color: Click the color box to select the background color of the search bar, and drag the slider to increase or decrease the opacity.
Border width: Drag the slider to adjust the thickness of the border.
Border opacity & color: Click the color box to select the color of the search bar's border, and drag the slider to increase or decrease the opacity.
Text font & color: Click the color box to select the text color, and click the text field to adjust the font, size, and formatting.
Icon opacity & color: Click the color box to select the icon color, and drag the slider to increase or decrease its opacity.
Results menu
Customize the menu that shows where the search term was found on your site (e.g. pages, store).
Click Results Menu and customize using the below options:
Text font & color: Click the color box to select the text color, and click the text field to adjust the font, size, and formatting.
Border opacity & color: Click the color box to select the border color, and drag the slider to adjust its opacity.
Selected border color: Click the color box to select the border color of a menu item when it is selected.
Search results
Customize the list of search results that appears on this page.
Click Search Results to customize the options below:
Search Results: Click the color boxes next to the relevant text to select the color, and click the text field to adjust its font, size, and formatting.
Pagination: Customize the pagination bar at the bottom of the search results page with the below options:
Text font & color: Click the color boxes next to the relevant text to select the color, and click the text field to adjust its font, size, and formatting.
Selected text color: Click the color box to select the text color of the selected page in the pagination bar.
Text Highlight: Adjust how highlighted text looks on the results page using the below options:
Highlight color: Click the color picker to choose a highlight color, and drag the slider to adjust its opacity.
Font color & style: Click the color picker to choose a font color, and add bold, italics, or underline to the text.
Buttons
Customize the buttons that appear in the search results section of the page.
Click Buttons to customize the 'View all' button and the 'Add to cart' button:
Text font & color: Click the color box to select the text color, and click the text field to adjust its font, size, and formatting.
Fill color & opacity: Click the color box to select the button color, and drag the slider to adjust its opacity.
Tip: The 'Add to cart' button is available for sites with Wix Stores installed. It allows visitors to add your store products to their cart directly from the search results.
Adjusting the images in the Search Results page
Thumbnail images for search results are taken from different places, depending on the result type. You can adjust these images by customizing the page settings.
Click an option below to learn more about adjusting the images for different page types:
Static page images
Your static pages (i.e. regular site pages that aren't connected to Wix apps or the CMS) can be found in the Other Pages tab of the search results. The image for static pages is pulled from the image that you've set for the page within its social share settings.
Note: To see this tab, you need to enable it in the Show on search settings in your editor.
Learn more about changing a page's social share settings in the:
Other tabs work differently, depending on the search result type. For example, the Product tab displays the cover images of each individual product, and the Blog tab displays the post's cover image.
Dynamic pages
The thumbnail images for your dynamic pages are taken from the image field within the SEO settings of the page. You can set a thumbnail image by clicking Add Field.
Want to customize your site search bar?
Use the layout and design settings to suit your site's look and feel.