--- title: "Build a Custom Search Results Page with Smart Search" description: "How to create a custom SharePoint Online search results page and configure the Vitextra Smart Search web part — data sources, appearance, filtering, sorting, and item layout." url: https://vitextra.com/en/support/kb/10058 language: en published: 2024-11-13 modified: 2026-10-10 products: - "Smart Search" author: "Jānis Bērziņš" tags: ["Smart Search web part", "custom search results page SharePoint", "Vitextra Smart Search", "SharePoint Online search page", "configure search web part", "refinement panel", "search settings results page URL", "SharePoint search SPFx"] --- # Build a Custom Search Results Page with Smart Search How to create a custom SharePoint Online search results page and configure the Vitextra Smart Search web part — data sources, appearance, filtering, sorting, and item layout. Helping users quickly find what they need is key to productivity on any SharePoint site. The [Smart Search](https://vitextra.com/en/products/smart-search) web part makes this easier, with search functionality you can tailor to your organization's needs. Built on the ::SharePoint Framework:: (SPFx), it works in both SharePoint Online and ::Microsoft Teams:: for a consistent search experience across platforms. This article describes how to build a custom search results page for SharePoint Online from scratch and configure the Smart Search web part on it. ## Create New Page To add and configure the Smart Search web part on a new page, go to the SharePoint site where you want to create it. Click the gear icon in the top-right corner and select **Site contents**. Then click **New** and choose **Page** from the dropdown menu. ![New Page Menu Item](https://static.vitextra.com/articles/10058/new-page-menu-item.png) *New Page Menu Item* Select a page template that suits your needs and click **Create**. 💡 **Tip** Smart Search supports a ::single app page::. You can switch to the **App** tab and select Smart Search to create a new app page. The new page opens automatically in edit mode. Hover above or below an existing section until a line with a circled plus sign appears, then click it to open the web part toolbox. Find the Smart Search web part by browsing or using the search box, and click it to add it to the page. ![Web Part Gallery](https://static.vitextra.com/articles/10058/web-part-gallery.png) *Web Part Gallery* ## Web Part Configuration After adding the web part, click the **Edit web part** button (the pencil icon) on its left side. A configuration pane opens on the right, where you can adjust the settings. ### Data Source In the first section, you choose the search scope and the web part's operation mode. You can search the entire tenant — including ::OneDrive:: and team sites — or limit the search to the current ::site collection:: or ::site::. Smart Search has two operation modes: **Single Source** and **Multiple Sources (Tabs)**. In **Single Source** mode, you pick one built-in search source to limit the scope, and no tabs are shown. In **Multiple Sources** mode, users can switch between different sources using tabs. ![Smart Search. Tabs (Search Sources)](https://static.vitextra.com/articles/10058/tabs.png) *Smart Search. Tabs (Search Sources)* ### Appearance ![Smart Search. Appearance Settings](https://static.vitextra.com/articles/10058/appearance.png) *Smart Search. Appearance Settings* The following settings control the web part's appearance: **Display Search Box**. Show or hide the search box. 💡 **Tip** If the search box is empty or hidden, the Smart Search web part uses the query from the top header search bar. **Default Search Query**. Query to use when the search box is empty or hidden. **Enable Paging**. Show or hide pagination. **Page Size**. Number of items per page. **Show Total Count**. Display the total number of search results. ### Filtering ![Smart Search. Filtering Settings](https://static.vitextra.com/articles/10058/filtering.png) *Smart Search. Filtering Settings* Click **Show Filters** to enable the refinement panel. To choose which fields are available for filtering and set their order, click **Configure Refiners**. 💡 **Tip** When the refinement panel is enabled, users can filter search results by a tag by clicking it in the list. ### Sorting ![Smart Search. Sorting Settings](https://static.vitextra.com/articles/10058/sorting.png) *Smart Search. Sorting Settings* Click **Enable Sorting** to set the default sort order for the search results. 📝 **Note** Sorting does not apply to the **Popular** and **Recently Changed Items** data sources. ### Item Layout ![Smart Search. Item Layout Settings](https://static.vitextra.com/articles/10058/item-layout2.png) *Smart Search. Item Layout Settings* Each search result has 12 fields for displaying information. You can show or hide every field except the title, and set the summary length (from 100 to 300 characters). ### Item Actions Smart Search provides three actions users can take without opening a new browser tab: - **Download** — download the item. - **Preview** — open a document in a dialog window. - **Play** — play video content in a dialog. ## Search Settings Go to site settings and select **Search Settings** under the **Site Collection Administration** heading: ![SharePoint Site Settings](https://static.vitextra.com/articles/10058/site-settings.png) *SharePoint Site Settings* Enter the server-relative URL of the new search page in the **Results page URL** field: ![SharePoint Site Settings](https://static.vitextra.com/articles/10058/search-settings.png) *SharePoint Search Settings* The change can take up to 5 minutes to apply. After that, SharePoint redirects all search requests to the new page. ## Conclusion The Vitextra Smart Search web part is a versatile tool for improving search in SharePoint Online and Microsoft Teams. A custom search results page gives users a tailored, efficient way to find and manage information, and features such as multiple search sources, a customizable layout, and advanced filtering and sorting make search in your SharePoint environment both more usable and more capable.