---
title: Organize components within a search result template grid
slug: '1745'
canonical_url: https://docs.coveo.com/en/1745/
collection: build-a-search-ui
source_format: adoc
---
# Organize components within a search result template grid
In a Coveo JavaScript Search Interface, an [HTML search result template](https://docs.coveo.com/en/413#using-the-html-engine-recommended) is made up of rows and cells.
You can use the Interface Editor to easily drag-and-drop components into the appropriate cells to design your template.

## Access the search result template grid

. In the Coveo Administration Console, on the [**Search Pages**](https://platform.cloud.coveo.com/admin/#/orgid/search/search-pages/) ([platform-ca](https://platform-ca.cloud.coveo.com/admin/#/orgid/search/search-pages/) | [platform-eu](https://platform-eu.cloud.coveo.com/admin/#/orgid/search/search-pages/) | [platform-au](https://platform-au.cloud.coveo.com/admin/#/orgid/search/search-pages/)) page, click the desired page, and then click **Edit interface** in the Action bar.
Alternatively, see [Access the Coveo for Salesforce Interface Editor](https://docs.coveo.com/en/3081/) for Salesforce search interfaces.

. [Create a search result template](https://docs.coveo.com/en/1585/) or [select the one you want to modify](https://docs.coveo.com/en/1593/).

. Access the layout options:

** If you just created a search result template or selected your template in the template, select the **Layout** tab.

** If you opened the edit panel directly from the result list, click ![Layout](https://docs.coveo.com/en/assets/images/build-a-search-ui/admin-interface-editor-layout-button.png).

## Add a component to a cell

. [Access the search result template grid](#access-the-search-result-template-grid).

. In the Interface Editor, click a component, drag it over the template grid, and then drop it in the desired cell.

## Move a component from one cell to another

. [Access the search result template grid](#access-the-search-result-template-grid).

. In the search result template grid, drag the component from its current cell to the target cell.

. In the search result template preview, validate that your change appears as desired.

## Edit a component

. [Access the search result template grid](#access-the-search-result-template-grid).

. In the search result template grid, select the component to edit, and then click the corresponding [edit].

> **Notes**
>
> * The following components can't be customized and therefore don't have a corresponding [edit]:
> 
> ** `Excerpt`
> 
> ** `Chatter post attachment`
> 
> ** `Chatter topic`
> 
> ** `Printable URI`
> 
> ** `Result rating`
> 
> * Some components such as `Badge` and `Field table` have two options panes. In such cases, click icon:settings-cog[alt=settings-cog,width=16] to access the other pages.

. In the search result template preview, validate that your changes appear as desired.

## Delete a component from a cell

. [Access the search result template grid](#access-the-search-result-template-grid).

. In the search result template grid, select the component to delete, and then click the corresponding [delete].

. In the **Delete a component** confirmation pop-up, click **Yes**.

. When removing the component would leave your cell empty, you should [remove that cell](https://docs.coveo.com/en/1929/).
This is done to ensure that you don't have empty white spaces in your template.