Adding Search Button To Shopify

Complete step-by-step guide

---

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

Search button visible in the predictive search results

Alhena chat widget responds to the user's query

---

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:

1KB

ai-search-with-alhena.svg

image

---

3. File‑by‑file changes

Quick checklist (click to expand)

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

Navigating to the theme code editor

3.1 sections/predictive-search.liquid

1. Open the file.

2. Locate:

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

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

<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:

/* === 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):

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:

{{ '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.

---