Skip to end of metadata
Go to start of metadata

It is usually a good idea to have a search box in your header that redirects to your search page, as it allows users to search through your website content from any page.

Requirements

Insert a Coveo Search Box

  1. In the Sitecore Content Editor, navigate to your header template, usually located under Content > Templates.
  2. Select the __Standard Values of your header.
  3. Select the Presentation tab, and select Details.
  4. Under Default, click Edit, opening the Device Editor window.
  5. Select the Controls tab.
  6. When adding Web Form components:
    1. Select Add.
    2. Navigate to Sublayouts > Coveo, and select Coveo Search Box Resources.

      Icon

      The Coveo Search Box Resources sublayout includes only the minimally required dependencies to include a Coveo Search Box on a page. If you plan on adding Omnibox Result List components, you need to add the Coveo Search Resources sublayout instead.

      1. In Add to Placeholder, enter the name of the placeholder in which to put your search box.
      2. Click Select.
    3. Select Add again.
    4. Navigate to Sublayouts > Coveo, and select Coveo Search Box.
      1. In Add to Placeholder, enter the name of the same placeholder as before.
      2. Click Select, opening the Control Properties window.
      3. In Id, enter a value, such as CoveoSearchBoxId.
      4. In Search page item, select the search page to which your search box redirects.
      5. Click OK to close the Control Properties window.
    5. Select OK to close the Device Editor window.
    6. Select OK to close the Layout Details window.
  7. When adding MVC components:
    1. Select Add.
    2. Navigate to Renderings Coveo, and select Coveo Search Box View Resources.

      Icon

      The Coveo Search Box View Resources rendering includes only the minimally required dependencies to include a Coveo Search Box on a page. If you plan on adding Omnibox Result List components, you need to add the Coveo Search View Resources rendering instead.

      1. In Add to Placeholder, enter the name of the placeholder in which to put your search box.
      2. Click Select.
    3. Select Add again.
    4. Navigate to Renderings Coveo, and select Coveo Search Box View.
      1. In Add to Placeholder, enter the name of the same placeholder as before.
      2. Click Select, opening the Control Properties window.
      3. In Id, enter a value, such as CoveoSearchBoxId.
      4. In Search page item, select the search page to which your search box redirects.
      5. Click OK to close the Control Properties window.
    5. Select OK to close the Device Editor window.
    6. Select OK to close the Layout Details window.
  8. Save your __Standard Values item.
  9. Test that your search box is present in your header.
    1. Navigate to one of your content items in which your header is present.
    2. Select the Publish tab, and click on Preview.

What's Next?

As you may notice, the search box is too big for the header. You may thus want to start Inserting Custom CSS.

 

  • No labels