> For the complete documentation index, see [llms.txt](https://alhena.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://alhena.gitbook.io/docs/developer-reference/website-sdk/examples/shopify-search-button.md).

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

***