AI search
Three ways to show AI search on your store, what shoppers get, and how it falls back to your own search.
AI search never changes your markup on its own. You choose how shoppers reach it: through your existing search box, or through our search box placed where you want it.
What shoppers get
- Suggestions while typing: popular queries before typing, then matching categories and products from the second character.
- Results in two steps. Products appear fast, like a normal search. For a query written in plain words, the AI then reads it, turns it into filters and explains its choice in a short comment.
- Filter chips. Every recognised condition is a chip. A dashed chip is one the AI added on its own; removing any chip recalculates the results instantly, without asking the AI again.
- Honest cards. A product shown because a condition was relaxed says so on the card.
- Keyboard. ↑ ↓ move through suggestions and products, Enter opens, Esc closes, Tab moves to the consultant with the current query.
Three ways to show it
1. Your search box, results underneath
The default. The widget attaches to your search input: suggestions and results open under it, over your page.
| Setting | Default | What it is |
|---|---|---|
inputSelector | input[type=search], input[name=q] | A CSS selector for your search input |
formSelector | form[role=search] | Your search form, used when the input is not inside its own <form> |
layout | dropdown | dropdown opens under the input; fullscreen is option 2 |
2. Your search box, full-screen layer
Set layout to fullscreen. A click in your search box opens a full-screen layer with our own search field on top, then suggestions and results. Your header stays as it is.
On screens narrower than 768 px search always opens full-screen, whatever the setting.
3. Our search box in your markup
Put the <lockstock-search> tag where our search box should appear, with your usual search form inside it:
<lockstock-search>
<form action="/search" method="get">
<input name="q" placeholder="Поиск по каталогу">
<button type="submit">Найти</button>
</form>
</lockstock-search>- Your form is the fallback. While the widget loads, when it is off, for visitors in the A/B control group, or if our script is blocked, shoppers see and use your form — no JavaScript involved.
- Once the widget is active, your form is hidden and our search box takes its place, inside its own Shadow DOM with your branding.
- It works in any stack, including React, Vue and single-page apps: tags added after the page loaded are picked up too.
- Add
lockstock-search { display: block; }to your CSS and size the tag like any block element: until our box mounts, the browser treats an unknown tag as inline. The box fills its width. - Our box loads when the browser is idle, or at once when a shopper reaches your form first. Whatever they already typed carries over.
| Attribute | Default | What it is |
|---|---|---|
action | your form's action | Your search page, used for the fallback below |
param | your input's name, else q | The query parameter of your search page |
placeholder | your input's placeholder | Hint text in our box |
You can use the tag together with option 1 or 2: whichever box the shopper typed in last is the one in use.
Fallback to your own search
Your own search stays the safety net. If AI search does not answer within 1.5 seconds, or answers with an error, the widget submits the search form as if it were not there: your submit handlers and validation run, and the shopper lands on your usual results page. With <lockstock-search> the shopper is sent to action with the query in param.
Keep your search page working — it is what shoppers see whenever AI search cannot help.