Step by Step Branding and Customizing Search in SharePoint

Explore how to use design packages and download files as you perform your first SharePoint search, and understand the importance of page layout for a cohesive search experience.

Explore first-time search in SharePoint 2016, compare out-of-the-box results with branded, customized search and refiners, and learn to set up a page layout for future branding steps.

Create a custom search results page layout, place it in the correct custom teams folder, and verify the page appears with its style, images, and files ready for customization.

Create a search page based on the page layout to display search results, replacing the out-of-the-box search in SharePoint.

Learn how to map and customize the SharePoint page layout for branded search by editing the page layout, managing placeholders, and connecting search results to the layout.

Learn to create a search results page using a custom page layout in SharePoint, configure the title and URL, publish, check in, and align the search results with branding.

Learn how web parts in SharePoint search integrate page layouts, mapping, and design, and how the search results part and other parts fit into power zones to customize branding.

Configure the web part zone on the page, then add a left-side search panel with a text box for user queries and display part search results.

Explore how to add a web part zone in SharePoint by editing page layouts, inserting a web part through snippets, and configuring a search results and a search box setup.

Copy and paste web part zone snippets from the snippet gallery into the SharePoint page layout via design manager, then save changes to configure the search results and search box.

Set up placeholders in a custom SharePoint page layout to organize a search filter, a search box, and search results, and prepare them for integration with web parts.

Learn to add and configure search web parts in SharePoint, including search results, a search box, and refinement filters, and customize the appearance in the page layout.

Link a custom css stylesheet to the SharePoint page layout, create the styles file, and apply branding to the search results page by adding a class to the search box.

Configure a custom search results page as the default in SharePoint by setting the custom results page in search settings and linking global search to the branding page.

Explore display templates in SharePoint search to control where results and data appear on the UI and web page, and learn to customize the search template to fit your needs.

Explore how to use SharePoint display templates to style results. Switch to design mode, apply templates like best bet item, and create a custom template with image, price, and details.

Download the default display template, customize the HTML and DOT files, and upload back to the SharePoint library so SharePoint generates the JavaScript and renders in the UI.

Link and customize the custom search display template in SharePoint designer, adjust its font size, apply it to search results, and save changes to verify branding.

Discover managed crawled properties in SharePoint search, learn what they are, and see how to create a property step by step.

Learn how crawl properties become managed properties and map to your search template in SharePoint, displaying branded, customized results sourced from SharePoint list fields after a full crawl.

Create and map a new managed property for the card photo column, linking it to the crawl property with the correct prefix, so the image displays in search results.

Learn how to customize the search display template in SharePoint by filtering out unwanted data and cleaning up search results to show only what you need.

Configure a SharePoint custom search template to display a car photo by mapping a managed property to the image source and updating the display template.

learn to clean up sharepoint search results by editing the results page, applying property filters, and testing queries to restrict results to a specific list.

Configure and map managed properties for car make and model in SharePoint search, crawl content, and display the make and model on the results page alongside images.

Create a tooltip on search results by assigning the image tag's title attribute with the car make and model, then customize behavior with JavaScript to handle missing images.

Discover how to leverage JavaScript to enhance SharePoint search results with dynamic logic, and learn where to inject it in your search template.

Learn to implement JavaScript logic in a SharePoint search template to replace missing car photos with a default image, using a Cadillac Eldorado example.

Explore how to use additional managed properties to customize SharePoint search results and control where and how data appears on the search page.

Create and map managed properties for car year and car condition in SharePoint, following steps to verify crawl properties, configure mappings, and perform a full crawl in central administration.

Discover how to display car year and condition in the SharePoint search UI using JavaScript, extracting values from a data object and binding them to the page.

Create and map a car origin managed property in SharePoint by linking the Origin column to the Country Flag Plus image library, validating variables and mappings for accurate search results.

Create and map managed properties for car year and car condition in SharePoint designer. Verify crawl properties exist, then perform a full crawl in central administration to reflect results.

Create a car mileage managed property and conditionally display a low mileage icon when mileage is five thousand or less, using JavaScript and a full crawl check.

Create and map a new managed property for the just arrived flag, run a full crawl, and implement display logic to show or hide an image in search results.

Implement the just arrived managed property in SharePoint with a JavaScript variable and conditional logic to display the just arrived image or logo.

Create a litres column and a custom managed property in SharePoint, map it to the search template with JavaScript, and crawl to see fuel, km, transmission, and sedan or suv.

Create a column and a managed property for car data in SharePoint, run a crawl, and refine search results with mileage and just arrived icons while improving the display template.

Learn how to expose car mileage as a SharePoint managed property and format it in search results using JavaScript, converting miles to thousands with two decimals for clear display.

Map cylinder, transmission, and fuel properties to SharePoint search results, displaying icons and transmission type. Learn to display vehicle type logos based on car body type with a style sheet.

Learn to customize the search item template in SharePoint by mapping the car body type to a dynamic icon and text, using a managed property and designer tools.

Learn how to configure body type as a managed property in SharePoint search, using JavaScript to map SUV and sedan values to icons and refine results.

Explore implementing an on special ribbon in search results by creating a managed property mapped to the on special column and using a display template JavaScript to conditionally show ribbon.

Configure a managed property and its display template to show a conditional ribbon for items marked as special, using a JavaScript variable and a full crawl to update results.

Learn how to create and map a managed property for a column, populate it with the car price, crawl the index, and display the value on the search results page.

Format currency values from a managed property in SharePoint search results by adding JavaScript to display prices with symbols, thousands separators, and decimals.

Create columns for phone and inquirer, add test data, crawl them, and map custom managed properties car phone and car inquire for SharePoint search.

Configure placeholders for car inquiry and car phone in search results by adding a contact box with phone and email sections in SharePoint designer, then update with numbers and emails.

Configure property mapping in SharePoint designer to surface car phone numbers and email inquiries, display the phone value, and create an email hyperlink that opens the default mail client.

Demonstrates applying three criteria—price under 60,000, mileage under 100k, and age under three years—to show a best price tag beside qualifying cars using SharePoint designer and JavaScript.

Learn to implement a best price tag in SharePoint using JavaScript logic to derive year data, apply date thresholds, and conditionally display the best offer based on price and mileage.

Explore the out-of-the-box search and its refiners in SharePoint, then customize and refine search results to improve filtering and discovery.

Explore how SharePoint refiners on the left-hand side refine search results by author, modified date, and custom definers like model, cylinders, and car body type.

Learn how to configure the SharePoint search refiners web part, mapping out of the box and custom refiners to make, model, and modified date, refining results in real time.

Map the car make property as a search refiner using SharePoint’s pre configured refiners to enable a dedicated car make filter on the search results page.

Fix refiner headings and reorder refiners in SharePoint search, adjust display names, and add a car model refiner to show how refiners relate and filter results.

Configure a SharePoint search refiner for car model by mapping the model column, enable contextual filtering with the car make, and run full crawls to apply changes and add refiners.

Set up a car condition refiner in SharePoint by mapping the condition property to managed properties and defining the display name, awaiting crawl before showing results.

Map the body type column to a definable string to create a body type refiner in SharePoint search, run a full crawl, and display sedan, SUV, and other body options.

Fix CSS in search refiners to enable collapsible filters and show all values for car make and model, eliminating default five-value limits in SharePoint search results.

Learn to customize SharePoint search refiners to control results display, branding, and display templates, tailoring the search experience to show only what you need.

Explore managing search refiners in SharePoint, adjust selected refiners, and set the maximum number of values. Learn how to create custom filter refiners to display the desired values.

Learn to customize SharePoint search refiners by copying and editing the display template file, adjusting short list size, and uploading the customized filter for a major version publish.

Customize search refiners by applying an uploaded custom refinement template and title, increase the refinement limit to 50, and test contextual filters across make and model to ensure accurate results.