This is a blog post in the series “How to set up a product-centric website in SharePoint Server 2013.” In this series, I'll use data from a fictitious company called "Contoso" to show you how to use search features to set up a website based on product catalog data. Note: Most of the features described in this series are not available in SharePoint 2013 Online.
For an overview of the blog posts in this series, go to How to set up a product-centric website in SharePoint Server 2013.
In previous blog posts, I showed you how to configure the query for a Content Search Web Part on a category page and a catalog item page. Although the query results displayed in the Web Parts were correct, they did not have a Contoso look, and they only displayed a title and a strange looking gray box.
In this blog post we'll learn:
Start stage 11
About display templates
Display templates are used to control how content should be displayed in a Content Search Web Part (CSWP). Remember that the content that is displayed in a CSWP is composed of search results that are returned based on the query that is defined in the Web Part. So, when you customize a display template, you are basically customizing how search results should be displayed in the Web Part.
Each display template consists of two files:
The image below shows how the control display template and item display templates are used on the CSWP of our category page.
For more conceptual information about display templates, and for details about how to create your own display templates, see SharePoint 2013 Design Manager display templates.
How to upload display templates
For our Contoso site, we have four display templates:
Because we have mapped our network drive, uploading these display templates is a piece of cake. Simply drag and drop the files into the folder located in Master Page Gallery --> Display Templates --> Content Web Parts. The exact location of where you drag and drop the files, isn’t that important as long as it is in the Master Page Gallery. However, as the Content Web Parts folder is where the other display templates for Content Web Parts are located, we'll add them there.
So now we’re ready to apply these display templates to our Content Search Web Parts.
How to apply display templates to a Content Search Web Part
We first want to apply display templates to the CSWP on our category page, so let's browse to "Audio."
Suddenly, our "Audio" page is looking like it has been to one of those makeover shows. Instead of the strange looking gray box, there’s a colorful image that displays for each item, and we’ve also added the price and rating information that was stored in the site columns of our catalog. But it is only displaying three items, so we'll have to do something about that.
Now our "Audio" page is looking really good. By using the paging arrows, we can easily browse through the different items in the "Audio" category.
So now that our category page has gotten a Contoso look, the next step is to apply display templates to the CSWP on our catalog item page.
And now your item details page has also gotten a very nice Contoso look.
By using the Color selection menu, we can easily page through the items with different colors.
So now our Contoso site is really starting to look good. But looks is one thing. We also have to make sure that our visitors are able to browse and rapidly find the product they are looking for. The next step is to start considering which refiners we want to use on our site.
Next blog post in this seriesStage 12: Plan to use refiners for faceted navigation - Part I