Try ShortPoint nowIn this article, we'll guide you through the simple steps to add search functionality in SharePoint using the Search Box Design Element. This handy feature makes searching in SharePoint Online a breeze, helping your users quickly find the content, files, or information they need within your SharePoint sites. Let's dive in and enhance your SharePoint search experience together!
NOTEThe Search Box Design Element is currently not available for SharePoint classic pages. To use it, you can switch to SharePoint modern pages. TABLE OF CONTENTS
- Prerequisites
- What Is a Search Box?
- Interactive Tutorial
- Step-by-step Tutorial
- Search Box Features
- Search Box Design Element Sample Designs
- Frequently Asked Questions
- How does the SharePoint Search Box Design Element work?
- What types of content can I search for?
- Can I filter or refine my search results?
- Why can't I find a document I know exists?
- How can I improve search results for my content?
- Why do search results look different for different users?
- Can I exclude certain content from search?
Prerequisites
- You must have the ShortPoint SPFx version 8.6.2.0 or later installed in your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
What Is a Search Box?
The Search Box Design Element is a fantastic new feature added to ShortPoint's library starting with SPFx version 8.6.2.0 and beyond. It empowers your users to easily search for any content, files, or information across your SharePoint Site Collection, making search functionality in SharePoint Online more intuitive and user-friendly than ever before.
With the Search Box Design Element, you can create a truly personalized search experience for your users. It’s super easy to customize not only the content inside the search box but also the URL path for your search queries. This means your SharePoint start page, communication sites, modern team sites, and more can all have a search box that fits perfectly with your organization’s style and needs.
And to make it even better, you can easily customize the search box to match your organization’s unique branding and style, creating a seamless and personalized search experience for your users in SharePoint Online.
Interactive Tutorial
Click Get Started to easily add search functionality in SharePoint and enhance your users' experience. With this simple tutorial, you’ll empower everyone to quickly find the content, files, or information they need right from your SharePoint sites. Let’s get your SharePoint search box up and running!
NOTETo learn more about the features you can customize for Search Box, check out Search Box Features.
Step-by-step Tutorial
Follow this easy, step-by-step guide to start using the Search Box and boost your search functionality in SharePoint. With just a few clicks, you’ll help your users find the right SharePoint content faster and more efficiently, making their experience on team sites even better.
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit.
- Close the Toolbox:
- Click the Edit properties icon:
Step 2: Insert the Icon Boxes Design Element
- Choose where you want to add the Search Box and click the plus icon:
- Use the search box to look for Search Box and click it:
Step 3: Customize the Content
- Go to the Content tab.
- Customize the content of the Search Box according to your preferences.
NOTETo learn more about the features you can customize for Search Box, check out Search Box Features.
Step 4: Customize the Design
- Go to the Design tab.
- Customize the look of the Search Box according to your preferences.
- Go to the Advanced tab.
- Modify the design even further.
- Once satisfied, click the green check mark.
NOTETo learn more about the features you can customize for Search Box, check out Search Box Features.
Step 5: Save
- Click the eye icon to see your page in real-time:
- Save your changes:
That's it! You've successfully added search functionality in SharePoint, making it easier than ever for your users to find exactly what they need. With this powerful search box design element, searching in SharePoint Online is more intuitive and personalized, helping everyone quickly locate content, files, and information across your sites. Enjoy a smoother, more efficient search experience that truly enhances your SharePoint sites.
Search Box Features
Here are the handy options you'll find in the Search Box Settings window to help you customize your SharePoint search experience just the way you like it.
A. Content Tab
The Content tab is where you can easily customize what appears inside your Search Box. Here, you’ll find options to personalize your search experience, such as choosing the icon that shows up in the box, changing the placeholder text, and even deciding whether to display the Search button. You can also customize the button text and icon to match your style, and even enable filter choices to help users refine their search results. This makes adding search functionality in SharePoint not just simple, but also tailored to your team sites environments!
 | Icon | allows you to choose the icon inside the Search Box. |
 | Placeholder | allows you to change the placeholder text inside the Search Box. By default, it is set to 'Search...' |
 | Show Button | when enabled, the Search button will be shown. |
 | Button Text | allows you to change the text inside the Search button. By default, it is set to 'Search.' |
 | Button Icon | allows you to add an icon inside the Search button. |
 | Show Filters | when enabled, the filter choices will be shown. |
B. Design Tab
The Design tab is where you get to have fun customizing the look and feel of your Search Box. Here, you can choose the perfect style, size, and color to match your SharePoint site’s vibe. Whether you prefer a sleek modern look or something more vibrant, this tab lets you tailor the Search Box design to fit seamlessly within your team sites and Office.com search experience, making your search functionality in SharePoint not only powerful but also visually appealing!
SETTINGS
 | Style | allows you to choose the style of the Search box. |
 | Size | allows you to choose the size of the Search Box. |
 | Color | allows you to modify the primary color of the Search Box. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker. |
 | Color Mode | allows you to choose from Light or Dark color mode. |
C. Advanced Tab
The Advanced tab gives you even more control to personalize the look and feel of your Search Box Design Element. Here, you can tweak settings like margins, colors, and borders to perfectly match your SharePoint site’s style. Plus, you can set a custom search URL to tailor where your users’ queries go, making your search functionality in SharePoint truly unique and user-friendly.
SPACING
 | Margin Top | allows you to adjust the top margin of the Search Box in px, %, or em. |
 | Margin Right | allows you to adjust the right margin of the Search Box in px, %, or em. |
 | Margin Bottom | allows you to adjust the bottom margin of the Search Box in px, %, or em. |
 | Margin Left | allows you to adjust the left margin of the Search Box in px, %, or em. |
SETTINGS
 | Custom Search URL | allows you to add a specific URL to search. Make sure to add %s for the search term. If empty, default SharePoint search URLs will be used. |
 | Background Color | allows you to modify the background color of the Search Box. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker. |
 | Text Color | allows you to modify the color of the text inside the Search Box. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker. |
 | Button Text Color | allows you to modify the color of the text inside the button. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker. |
 | Border Color | allows you to modify the border color of the Search Box. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker. |
 | Filter Background Color | allows you to modify the background color of the filters. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker. |
 | Filter Text Color | allows you to modify the text color of the filters. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker. |
 | Show More Filters | when enabled, more filter options will be shown. |
D. Custom CSS Tab
This tab lets you add your own custom touch by using CSS, HTML, and JavaScript to personalize the Search Box Design Element exactly how you want it. It’s a great way to enhance your search functionality in SharePoint and create a unique, branded experience for your users!
NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.
NOTEThe Connect and Visibility tabs are currently unavailable in Live Mode. Switch to Grid Mode to establish your connection or adjust the design element visibility settings.
Search Box Design Element Sample Designs
To help spark your creativity, we've put together some fun and inspiring design ideas you can use for the Search Box Design Element. These designs not only make your SharePoint search functionality more attractive but also enhance the user experience, making it easier and more enjoyable to find what you need in SharePoint. Whether you want a sleek and modern look or something colorful and vibrant, these examples will give you a great starting point to customize your search box and boost your SharePoint search results page’s appeal!
Search Box Design 1
This search box features some delightful design touches that make it both practical and welcoming! The striking contrast between the deep navy background and the crisp white-bordered search field makes it super easy to find, while the bright purple "Search" button adds a lively splash of color that perfectly complements the gradient "HR Portal" header. This design truly enhances the search functionality in SharePoint by making it easy and enjoyable to find your private documents and more.
Search Box Design 2
This search box features a clean, modern design with a welcoming personal touch. The prominent white search bar creates an inviting atmosphere. Below the search field, you'll find helpful filter buttons (People, Documents, News, Tools) with rounded edges that make navigation feel approachable and intuitive.
Search Box Design 3
This search box design showcases a sleek and professional look that's both inviting and easy to use. The input field features helpful placeholder text. This design creates a warm and approachable feel that encourages users to explore and quickly find exactly what they need within SharePoint. This modern search in SharePoint enhances your search functionality in SharePoint Online, making it even easier to explore the search results and discover relevant content across your sites and Microsoft 365 environment.
Search Box Design 4
This search box features a calm and professional vibe. It offers an intuitive and user-friendly interface, with plenty of spacing and a clear visual hierarchy that makes navigating your company portal a breeze. It's absolutely perfect for boosting your search functionality in SharePoint and helping new employees find exactly what they need from day one!
Frequently Asked Questions
How does the SharePoint Search Box Design Element work?
The Search Box emulates the main SharePoint search. It uses a crawler that continuously indexes content across your SharePoint environment. When you perform a search, the search engine queries this index and returns relevant results based on factors like keywords, metadata, permissions, and relevance algorithms. Results are security-trimmed, meaning users only see content they have permission to access.
What types of content can I search for?
You can search for documents (Word, Excel, PowerPoint, PDF), web pages, list items, images, videos, people profiles, sites, news posts, and even content within documents. SharePoint Search also supports searching metadata, file properties, and custom managed properties.
Can I filter or refine my search results?
Yes, SharePoint Search provides refiners (filters) on the left side of the search box. You can filter by file type, modified date, author, site, and other properties. Refiners can be customized by administrators to match your organization's needs.
Why can't I find a document I know exists?
Several reasons could explain this: the document may not have been crawled yet, you may lack permissions to view it, it might be in a location excluded from search, or the search index may need time to update. Recently uploaded content can take a few minutes to several hours to appear in search results.
How can I improve search results for my content?
Ensure documents have descriptive titles and filenames, incorporate relevant metadata, and use consistent terminology throughout your SharePoint content to improve search functionality in SharePoint. Enable versioning to maintain content history and avoid storing important files in locations excluded from search indexing. Additionally, site owners can leverage bookmarks to promote specific documents or sites, ensuring they appear at the top of search results for targeted queries, thereby delivering more relevant search results to users.
Why do search results look different for different users?
Search results are personalized and security-trimmed. Each user sees results based on their permissions, search history, frequently accessed content, and organizational graph relationships. This ensures users only see content they're authorized to access.
Can I exclude certain content from search?
Yes, administrators can exclude libraries, lists, sites, or specific file types from the search index through search settings. This helps improve search functionality in SharePoint by ensuring that irrelevant or sensitive content does not appear in search results. By managing what content is indexed, you can refine your search results from SharePoint and provide users with more relevant and personalized results based on their previous activity in Microsoft 365. This control supports better security trimming, so users only see content they already have access to, enhancing the overall search experience in SharePoint Online.
Related articles:
