Using Search with Acquia Source ¶

In the default Acquia Site Template, you can access Search by clicking the blue magnifying glass icon at the top right of the header.

1. Access your site that you have created by using the default Acquia Site Template.

2. Open Search by clicking the blue magnifying glass icon at the top right of the header.

   The system displays the search section under the header. The system also changes the magnifying glass icon to an X icon for closing Search.

3. Type your search terms in the search bar.

   When you start typing, the system displays another X icon on the right, which is used for clearing your search terms and starting a new search.

4. To start search, do one of the following:

   • Click the magnifying glass icon at the right of the search field

   • Press Enter on the keyboard.

   The system displays the search results under the search bar.

   

Configuring Search in Experience Builder¶

To configure Search, use Experience Builder.

Accessing components¶

Use the following steps to access the components of the Search experience:

1. Access your site.

2. On the top right, click Edit.

   The system displays the Experience Builder user interface.

3. On the top center, click the page title to open the navigator.

4. In the dropdown menu, select the Search page.

   The Search experience contains two components separated by a spacer:

   • Search form
   • Search results
   

Editing a component¶

Use the following steps to customize a component:

1. In the Layers panel, hover over the component.
2. Click the ellipsis (...) icon.

3. Select Edit code.

   

Editing code and previewing changes¶

Search form¶

Edit the JavaScript code to change the Search form’s behavior or appearance, such as placeholder text or CSS classes. The Preview pane on the right displays changes immediately.

To change the placeholder text and the magnifying glass CSS class, update the relevant lines in the code editor. The Preview pane shows the updates.

Search results¶

Edit the Search results component to change how results display, such as adding an emoji or changing text color.

Make code updates and view the changes in the Preview panel.

Publishing changes¶

Use the following steps to publish the changes:

1. On the top right of Experience Builder, click Review changes to review the changes.
2. In the review panel, do one of the following:
   • Click Select All to publish all changes.
   • Check individual boxes to publish selected changes.

3. Click Publish to apply the updates.