---
title: "Search"
date: "2025-08-04T16:21:46+00:00"
summary: "Customize and optimize your site's search functionality with Acquia Source. Easy configuration and real-time previews."
image:
type: "page"
url: "/acquia-source/search"
id: "54c547b5-0269-464a-afcf-babe0b92e6c7"
---

Using Search with Acquia Source 
--------------------------------

In the default [Acquia Site Template](/acquia-source/acquia-site-template "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](/node/69836#access-a-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.
    
    ![User clicks the search icon in the Source interface, enters a search term, and views the search results displayed below the search bar.](https://acquia.widen.net/content/uhszwujzr5/web/1-using-search.gif?w=720&animate=true&v=c7ad3ed3-b538-420a-a065-5671c0e1a93f&itok=wAkIgNRg)
    

Configuring Search in Drupal Canvas
-----------------------------------

To configure Search, use Drupal Canvas.

### Accessing components

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

1.  [Access your site](#access-a-site).
    
2.  On the top right, click **Edit**.
    
    The system displays the Drupal Canvas 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
    
    ![Website design interface showing a search results page with plant names and scientific names. Layer panel on the left.](https://acquia.widen.net/content/28nvwsf5eh/web/Acquia%20Source_configuring%20Search.png?w=720&v=d638e70b-7ed1-4f6a-b8a5-67a83d44e88d&itok=CoO56fom)
    

### 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**.
    
    ![Web design interface showing a search form with a dropdown menu. "Edit code" is highlighted by a red arrow.](https://acquia.widen.net/content/olk4cj8qab/web/Acquia%20Source%20Search_editing%20component.png?w=720&v=4e848064-8513-492f-b21f-b3c986f8d649&itok=fp6clve_)
    

### 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.

![Code editor showing JavaScript updates with live preview of a search form for plant names.](https://acquia.widen.net/content/4nmwgpczbf/web/Acquia%20Source%20Search%20previewing%20code%20changes.png?w=720&v=bac6df73-91a1-453b-870e-d84c5f0cc1ee&itok=vO9bQ1Gl)

#### 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.

![Code editor interface showing HTML code with highlighted "Search results" text and a preview pane displaying plant names.](https://acquia.widen.net/content/5agt3sdyeq/web/Acquia%20Source%20Search_previewing%20code%20changes2.png?w=720&v=c49eb28d-d41c-4c6d-b3a4-7643bd9f9602&itok=rPEbVLZq)

### Publishing changes

Use the following steps to publish the changes:

1.  On the top right of Drupal Canvas, 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.
    
    ![Popup window showing unpublished changes with options to select all and publish selected changes.](https://acquia.widen.net/content/ca1rzsxadm/web/Acquia%20Source%20Search_publishing%20changes.png?w=480&v=7141f18a-010b-405f-a9e8-18f954bb8e49&itok=vHalZTD1)