---
title: "Customize a Eureka Campaign Template"
slug: "customize-a-eureka-campaign-template"
tags: ["customize eureka template", "eureka campaign", "eureka template"]
updated: 2026-06-30T09:40:09Z
published: 2026-06-30T09:40:09Z
canonical: "academy.insiderone.com/customize-a-eureka-campaign-template"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://academy.insiderone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize a Eureka Campaign Template

Eureka web campaigns utilize a web search pop-up to enhance the search experience on your website. Thanks to the Eureka campaign generation wizard, you can manage this search experience in the Design step.

1. Click **Add a new variant** or **Choose an existing variant** to start configuring the search experience.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-1KXSBPBN.png)

1. Select the template to configure.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-4AXTH54M.png)

1. To start designing your template, [append](/docs/append-an-inline-template) it to your website’s search input box.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-YENLDCE4.png)

1. Selecting the **#input element** in your search box is a requirement for your template to work. After selecting it, use the **Position to Element** option to place it.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-6U3G29C9.png)

1. After placing your search template, you can see it in the **Preview** mode.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-8I0NGYA3.png)

1. Click on the Design tab to start designing your experience tailored for your website. Eureka enables you to customize your experience template by using an element tree. When you select an element from the left menu, you can edit its customizable styles from the right menu. The Instant Search template has three states:
  1. Search Page
  2. Results Page
  3. No Results Page

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-OP4UCAB5.png)

## The Search Page

1. The **Search Page** visualizes data with your enabled facets and product cards by default. You can customize the styling and labels of your facets' titles and items. All the changes you apply are reflected in the Results and No Results pages as well.

2. You can customize your product card and its elements by selecting from the element tree and the Settings menu on the right. If an element takes more than one place in your template, the customizations apply to all of them.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-1737013569139.png)

## The Results Page

1. The **Results Page** visualizes data for applied filters, enabled facets with their results page representation, and product content with product cards, pagination, and sorting.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-1737013712341.png)

2. You define each facet in **Eureka** > **Settings** > [**Search Facets**](/v1/docs/eureka-search-facets) by attributes, style, and related inputs that are reflected similarly in your search popup. The Search Results page also has additional UI elements for **Applied Filters** and **Facets,** like Facet collapsed, Show More, and Counter. The element customization process applies to the results page state as well.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-1737013830994.png)

## The No Results Page

1. The **No Results** page is very similar to the Search page. In addition, it shows the no-result text you define in **Eureka** > **Settings** > [**Localization Keys**](/v1/docs/eureka-localization-keys) menu.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-1737014004872.png)

2. You can apply more customizations through **Advanced Settings** and edit your search template's HTML, JS, and CSS files.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-1737014429220.png)

You can also refer to the video below to learn how to customize a Eureka campaign better:

[Design Eureka](https://player.vimeo.com/video/1172826396?badge=0&autopause=0&player_id=0&app_id=58479)

> [!NOTE]
> If this video does not load in your region, you can watch it on our [YouTube Channel](https://youtu.be/1-Khlu8IQw8).