Adding Search to your Website Print

If you have a lot of information on your website, adding a search feature is essential for your visitors. BlueberryCMS makes it easy to add and customize your search capabilities.

Step 1 - Create a Search Module

Start off by navigating to Content > Modules > Search and click the New Search button. 

Type in a name for your search and select from the list of areas to search through like Web Pages, Blogs, News, and even Data Collection items. 

Step 2 - Create a Search Results Web Page

Now create a Web Page for your search results to appear. In the HTML of your page, simply place the tag:

{bb_searchresults}

As shown below.

Visit the General tab as well and take note of the Page URL. You will need it for the next step!

Step 3 - Add {bb_search} tag to your Page Template or Web Page

Now it's just a matter of finding a spot to place your search form. In our example, we created a simple DIV container inside our main page template. The {bb_search} tag supports a number of parameters. Some of which are required. This will get you started:

{bb_search source="Site Search" resultsUrl="/search-results" useSearchIcon="false" searchButtonText="Search"}

The source="" and the resultsUrl="" parameters are required in order for the search feature to work. Be sure to fill in the details like we use in our example. Use the relative link in your resultsUrl parameter such as "/search-results" from the example above.

Step 4 - Customize the Search Results Layout

Go back to Content > Modules > Search and edit the search module you created, then click the Layouts tab. This is where you can adjust what information is displayed on each search result. Here's a layout you can copy/paste to help get you started:

<div class="search-result">
  <h4>{{searchCounter}}. {{searchItemName}} - (<em>{{searchItemType}}<em>)</h4>
  <p>{{searchItemDescription | truncate_words: 50}}</p>
  <br />
</div>

Notice the different tags that can be used in your layout under the Available Tagssection on the left. We use some clever liquid to help truncate the amount of words being displayed in the searchItemDescription. You can learn more under the {bb_searchresults} developer documentation.

Step 5 - Test your Search

Let's give it a whirl!