# Shopify Search Button

***

### 1. What you’ll end up with

When shoppers open your store’s predictive-search drop-down they’ll see a **“Search with Shopping Assistant”** call‑to‑action that:

* Renders a branded Alhena button at the top of the panel
* Sends the current query to your embedded Alhena widget so the AI can answer in chat

<figure><img src="/files/B31BE6ewt6RknEoukbnE" alt=""><figcaption><p>Search button visible in the predictive search results</p></figcaption></figure>

<figure><img src="/files/uTko0Wnx0QLFozd0ryvs" alt=""><figcaption><p>Alhena chat widget responds to the user's query</p></figcaption></figure>

***

### 2. Prerequisites

| Item                                     | Why you need it                                                       |
| ---------------------------------------- | --------------------------------------------------------------------- |
| **Alhena widget already installed**      | Code below calls `window.gleenWidget.sendMessage()`                   |
| **Theme code access**                    | Online Theme Editor (`Admin → Online Store → Themes → … → Edit code`) |
| **SVG icon** `ai-search-with-alhena.svg` | Lives in **assets/** folder—upload before testing                     |

Download the SVG icon:

{% file src="/files/QmDPNcGTHqBzpul0Galu" %}

***

### 3. File‑by‑file changes

<details>

<summary>Quick checklist (click to expand)</summary>

| File                                     | Action                                                                              |
| ---------------------------------------- | ----------------------------------------------------------------------------------- |
| `sections/predictive-search.liquid`      | Insert Alhena button **immediately after** `<div id="predictive-search-results" …>` |
| `assets/component-predictive-search.css` | Append new utility classes                                                          |
| `assets/predictive-search.js`            | Extend `open()` method + add `onClickAlhenaButton()`                                |
| `assets/ai-search-with-alhena.svg`       | Upload via theme editor                                                             |

</details>

<figure><img src="/files/6TUIuipJOxrvtryaeJ4u" alt=""><figcaption><p>Navigating to the theme code editor</p></figcaption></figure>

#### 3.1 `sections/predictive-search.liquid`

1. Open the file.
2. Locate:

```liquid
<div id="predictive-search-results" role="listbox">
```

3. **Directly beneath** that line, paste the entire Alhena button block:

```liquid
<div id="predictive-search-results" role="listbox">
  <!-- ✨ NEW: Alhena Shopping Assistant CTA -->
  <div class="predictive-search__search_with_alhena_container">
    <div as="button"
         class="predictive-search__search_with_alhena"
         id="predictive-search-alhena-button">
      <img src="{{ 'ai-search-with-alhena.svg' | asset_url }}"
           width="21"
           height="20"
           alt="AI Agent Search with Alhena" />
      Search with Shopping Assistant
    </div>
  </div>
  <!-- existing predictive-search result markup continues here -->
```

> **Tip:** Keep indentation identical to surrounding Liquid to avoid merge‑conflict noise.

***

#### 3.2 `assets/component-predictive-search.css`

Append (or merge with utility file) **exactly** this block:

```css
/* === Alhena Shopping Assistant button ============================== */
.predictive-search__search_with_alhena_container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 4px 8px;
}

.predictive-search__search_with_alhena {
  display: inline-flex;
  padding: 6px 8px;
  flex-direction: row;
  gap: 4px;
  align-items: flex-start;
  border-radius: 8px;
  background: var(--neutralTwo-100, #ecf1f3);

  color: var(--neutralTwo-950, #2d3339);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 21 px */

  cursor: pointer;
}
```

***

#### 3.3 `assets/predictive-search.js`

Find the existing `open()` function and **replace it** with the full version below (or inject only the added lines if you maintain patch files):

```js
open() {
    this.predictiveSearchResults.style.maxHeight = this.resultsMaxHeight || `${this.getResultsMaxHeight()}px`;
    this.setAttribute('open', true);
    this.input.setAttribute('aria-expanded', true);
    this.isOpen = true;

  /* === Alhena hook =============================================== */
  this.alhenaButton = this.querySelector('#predictive-search-alhena-button');
  if (this.alhenaButton) {
    // Clean up previous listener in case open() fires twice
    this.alhenaButton.removeEventListener('click', this.onClickAlhenaButtonBound);
    this.onClickAlhenaButtonBound = this.onClickAlhenaButton.bind(this);
    this.alhenaButton.addEventListener('click', this.onClickAlhenaButtonBound);
  }
}

onClickAlhenaButton() {
  const query = this.getQuery?.() || this.input?.value || '';
  if (window.gleenWidget && typeof window.gleenWidget.sendMessage === 'function') {
    window.gleenWidget.sendMessage(query);
  } else {
    console.warn('Alhena widget not found - cannot send query.');
  }
}
```

***

#### 3.4 Upload the SVG icon

1. In the **left sidebar** of the theme editor choose **Assets → Add a new asset → Upload file**
2. Select **`ai-search-with-alhena.svg`**
3. Confirm the path in Liquid matches:

```liquid
{{ 'ai-search-with-alhena.svg' | asset_url }}
```

***

### 4. Save & test

1. **Save** all modified files in the code editor.
2. On your storefront, start typing in the header search bar.
3. In the predictive-search panel you should see:
   * Standard search results
   * A left‑aligned **“Search with Shopping Assistant”** button
4. Click the button → the active query is passed to your Alhena chat widget.

***

### 5. Rollback instructions

Shopify auto‑saves file history. If anything breaks:

1. Re‑open the modified file.
2. Click **Older versions** drop‑down (top‑right) and choose a timestamp before your change.
3. Save.

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://alhena.gitbook.io/docs/integrations/ecommerce/integrating-alhena-ai-with-shopify/adding-search-button-to-shopify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.