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

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

3.1 `sections/predictive-search.liquid`

Open the file.
Locate:

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

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

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

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

4. Save & test

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

5. Rollback instructions

Shopify auto‑saves file history. If anything breaks:

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

PreviousCommon Questions NextInstalling Alhena Conversational Search

Last updated 2 months ago