Using Search Widget Templates

The default search widgets views are useful, but your site’s widgets likely need a specific design. You can choose from one of the available widget templates or create a new one. See Styling Widgets with Widget Templates for general information about creating templates for a widget’s display.

From each widget’s configuration, choose a template from the Display Template field. Available templates were created specifically for the widget you’re configuring, and are visible in the Global site or the current site at Site Menu () → Design → Templates → Widget Templates.

From Instance Settings you can change the default template for a widget. When you add the widget to a page, it defaults to the configured template. Doing this requires getting the widget template’s key from the template editor.

There are several out-of-the-box templates you can choose.

Using the Out-of-the-Box Templates

You can use the out-of-the-box widget templates as-is or as inspiration for creating your own widget template. Here’s a preview, so you can see which one works best for you.

Custom Filter

The Default template:

The Compact Layout template:

Search Bar

The Default template:

The Left Aligned Icon Layout template:

Note

The Left Aligned Icon Layout template does not support search bar suggestions.

Search Facets

A Default template is available for all search facet widgets:

The Compact Layout template is available for all but the Modified Facet widget:

The Label Layout template is available for all but the Modified Facet widget:

The Cloud Layout template is available for the Tag Facet and Category Facet widgets:

The Vocabulary Layout template is available for the Category Facet widget:

The Radio Layout template is available for the Modified Facet:

Search Results

The List Layout template is the default:

The Card Layout:

The Compact Layout:

Similar Results

The Compact Layout template is the default:

The List Layout template:

The Card Layout template:

Creating a Search Widget Template

1. Go to the site where you want to use the template.

   Note

   The out-of-the-box widget templates appear in the Global site. You can do the same or add yours to a specific site.

2. Open Site → Design → Templates.

3. Click the Widget Templates tab.

4. Click New → More.

5. From the list of widgets, choose the widget your template should target.

   Note

   The first listing for Search Results Template targets the Search Results widget, while the second listing with the same name targets the Commerce Search Results widget.

6. Using the editor’s predefined variables, create your template using FreeMarker.

7. Click Save when finished, or Save and Continue to save your progress and continue working.

Once saved, you can select the template from the widget configuration.

You can accelerate template development by copying an existing template and modifying it as needed:

1. Go to the Global site. Click Select Site () → My Sites → Global.

2. Open Site → Design → Templates.

3. Click the Widget Templates tab.

4. Search for the title of the template to copy. For example, search for compact to start with the Compact Layout template.

5. Find the entry for the widget you want, then click Actions () → Make a Copy.

   

6. Using the editor’s predefined variables and your own FreeMarker, create the template.

   

7. Click Save when finished, or Save and Continue to save your progress and continue working.

Once saved, you can select the template from the widget configuration.

Example: Extending the Search Results Widget’s Compact Layout Template

This example extends the Compact Layout template to include the last modified date of the result:

1. In the Global site’s menu, open Site → Design → Templates and click the Widget Templates tab.

2. Search for compact, then click Actions () → Make a Copy for the Search Results Template.

3. Name it Compact with Details.

4. Your copy appears in the list with the others, so click Compact with Details to begin editing.

5. Replace the template’s list item block (the code from <li> to </li>) with this code:

   <li class="c-mb-3 c-mt-3">
      <a class="link-primary single-link" href="${entry.getViewURL()}">
         ${entry.getHighlightedTitle()}
      </a>
      <details class="text-2">
         <summary>Details...</summary>
         <p class ="c-mb-0 c-mt-0">
            Last modified:<em>${entry.getModifiedDateString()?keep_before(",")}</em>
         </p>
         <#if entry.getModifiedByUserName()?has_content>
            <p class ="c-mb-0 c-mt-0">
               Edited by: <em>${entry.getModifiedByUserName()}</em>
            </p>
         </#if>
      </details>
   </li>
   

6. Click Save.

Related Topics

• Search Configuration Reference
• Styling Widgets with Widget Templates