Appearance and theme integration

Overlay or inside the theme, the selectors that tie the search to the store, the look of the results and the texts the visitor reads.

Everything here lives in Search → Stores → edit, and reaches the search panel automatically: you don't touch the module and there's no deploy on the store.

Where the results appear

The search panel has two modes, and the choice depends on the theme:

• Over the store (overlay): the results open in a panel of their own that covers the page. It works on any theme with no configuration. Here you can set the logo (pointing at the theme's own with a selector, or uploading one of yours) and the cart link, so the search panel keeps the store's essential navigation.
• Inside the theme (inline): the results are drawn inside a container of the theme itself, like a store page. It asks for two selectors: the container one and, normally, the one for what to hide while searching. On a page where the container doesn't exist, the search panel uses overlay automatically.

The selectors

They are the glue between the search panel and the theme, and they are where an integration goes well or badly:

• Search bar: input[name='s'] by default. If your theme uses another one, it's the first to adjust, and it's adjusted in the module's configuration.
• Buttons that open search: theme icons or buttons (the magnifying glass in the phone menu, for example). When they are tapped, the search panel opens with its own input box.
• Buttons that open the assistant: the same, for the assistant.
• Hide while searching: what in the theme should get out of the way while the results are in view, in inline mode.

If the store's search keeps answering The bar selector isn't catching the right input. Inspect the field in the theme and fix it; it's the cause of nine out of ten half-finished integrations.

Pagination

There are three options for reaching the rest of the results: a "See more" button, infinite scroll or numbered pages. Each one has its cost and its benefit explained on the screen itself.

The look of the results

Accent colour, corner radius, products per row (on the computer and on the phone), and what each card shows: buy button (on by default), call to action text, brand, reference, discount badge and out of stock notice.

The typeface isn't configurable: the search panel always inherits the store's, so that it fits into the theme. It's one of the few things closed on purpose, and the reason is that a search with typography of its own always looks like somebody else's box stuck on top of the store.

A product already in the visitor's cart shows up marked: the card gains a frame in the accent colour, the buy button shows the units in there, and in the store's own listings the theme card gets an "In the cart" badge. The marking follows the cart in real time, whether the item was added in the search or in the store.

For what the options don't cover there's the Extra CSS box (up to 4000 characters), injected at the end of the search panel's stylesheet.

Search panel texts

Every text the visitor reads ("See more results", "No results for…", the sorting, the filters) has an in-house translation in each language of the index. In the Search panel texts section you can replace any of them, language by language.

A field left blank keeps our version and carries on receiving future corrections; only what you write stays fixed your way. It's worth touching only what your store says differently, and leaving the rest to follow the search panel's releases.