This article covers how to lay out and install Smart Search Quick View: choosing its layout, pointing it at the right trigger element, embedding it in your theme, adding event callbacks, and applying custom CSS. It is part of the Smart Search Quick View documentation set — for a general introduction, see Smart Search Quick View: Overview.
Quick View layout
The Quick View layout controls where and how the Quick View panel appears on your storefront. You can choose between a dropdown search or a side search. The side search can be positioned on either the left or right side of the screen, giving you flexibility in how the panel fits your design.
In the Rebuy admin, go to Smart Search > Quick View, to open the editor. Layout Settings is on the root screen of the left sidebar, near the top.
(Animation above: The Smart Search Quick View layout options — dropdown vs. side search)
Custom trigger and embedded elements (selectors)
If you are using a customized theme, you may need to set advanced selectors so the Quick View search bar triggers and displays correctly. Rebuy provides default selectors that work with standard Shopify themes, so most stores will not need to change these. We recommend previewing Smart Search before adjusting selectors — default themes should work with the pre-configured elements, and selectors are typically only necessary if issues arise.
(Screenshot above: Rebuy Admin Smart Search "Configure Quick View" — "Selectors" panel showing the "Trigger Element" and "Embedded Element" settings)
Trigger element
The Trigger Element is the component that opens Quick View when a shopper interacts with it — most often the search icon. Setting the trigger element tells Quick View which element on your storefront should launch the search panel.
Leave it blank and Rebuy uses its own defaults, which cover the common theme patterns. You fill it in when Quick View doesn't open on click, which usually means the theme's search element doesn't match anything Rebuy expects.
There's also a storefront picker flow for this one, so instead of digging through the theme's HTML you can select the element visually on your live storefront and have the selector filled in for you. See section Use the Select Trigger button to set your trigger.
Note: Smart Search Quick View opens from a trigger element — usually your theme's search icon — and does not replace a theme's always-visible search bar. If your theme shows a visible search bar, shoppers can end up with two search bars: the theme's and Rebuy's. Where your theme supports it, switch the theme's search to a search icon only (no visible Shopify search bar), then point Quick View's Trigger Element at that icon so a single search experience opens on click. See the "Why do I see two search bars when I use Smart Search Quick View?" FAQ below for the full walkthrough.
Embedded element
The Embedded Element is the location on the page where the Quick View search display is rendered. Setting the embedded element tells Quick View where to show the search results within your theme.
When it's blank, Rebuy falls back to its own default placement, which works for most themes. You only fill it in when the default lands in the wrong spot: the dropdown opens detached from the search bar, gets clipped by a parent with overflow hidden, or sits behind a sticky header. Pointing it at the correct wrapper element in the theme puts it back where it belongs.
The Smart Search Quick View's Embedded Element Selector field accepts standard CSS selectors, and it's a placement control only, not a styling one. If the issue is appearance rather than position, that's Custom CSS. And if Quick View isn't opening at all, use the Trigger Element, not this field.
Use the Select Trigger link to set your trigger (recommended)
The Select Trigger link launches a visual selector tool that sets up your Quick View trigger without you having to manually find CSS selectors. Use it to point Quick View at your search icon (or any other element) directly on your live storefront:
Go to Selectors in your Rebuy admin settings.
Click the Select Trigger link.
You are taken to your live storefront.
Click the search icon, or any element you want to use as the Quick View trigger.
The tool automatically captures the correct CSS selector and pastes it into the Trigger Element field for you.
This removes the technical guesswork so you can configure your Quick View trigger without coding.
(Example above: The Smart Search Quick View's Select Trigger visual selector tool on a live storefront)
On some themes with nested elements, the selector helper may not capture the element you intend. After making a selection, test it by clicking other elements to confirm the trigger is set to the search icon (or your chosen element) and not a nearby nested element.
Event callbacks
Event callbacks let you run custom JavaScript at specific stages of the Quick View lifecycle. Use them to track user interactions or integrate with third-party tools such as analytics platforms. You can enable callbacks for the following events:
Init Callback — fires when Quick View is initialized.
Before Ready Callback — fires just before Quick View is ready.
Ready Callback — fires when Quick View is fully ready.
Open Callback — fires when Quick View opens.
Close Callback — fires when Quick View closes.
Before Add Callback — fires before a product is added.
Add Callback — fires after a product is added.
View Callback — fires when a product is viewed.
Before Products Change Callback — fires before the product selection changes.
Products Change Callback — fires after the product selection changes.
Use these callbacks to trigger analytics events, modify behavior dynamically, or sync data with other services.
Custom Javascript Event Callbacks goes in the Quick View Editor under Advanced Settings:
Navigate to Smart Search in your Rebuy admin.
Click Quick View to open the Quick View Editor.
In the left navigation, scroll to Advanced Settings.
Click Event Callbacks to open the code editor.
Paste your Javascript in the relevant Callback box and click Save.
Visit our Developer Documentation for more info:
(Animation above: Rebuy Admin Smart Search "Configure Quick View" — Advanced Settings — "Event Callbacks" showing the JavaScript callback boxes.)
Custom CSS
The Custom CSS setting lets you apply your own CSS to style the Quick View component, so you can override default styles and match your brand's look and feel. Use it to change fonts, button styles, and layout spacing, or to hide specific elements.
Quick View CSS goes in the Quick View Editor under Advanced Settings:
Navigate to Smart Search in your Rebuy admin.
Click Quick View to open the Quick View Editor.
In the left navigation, scroll to Advanced Settings.
Click Custom CSS to open the code editor.
Paste your CSS and click Save.
For ready-made examples, see CSS Styling Tricks for Customizing Smart Search.
(Animation above: Rebuy Admin Smart Search "Configure Quick View" — Advanced Settings — "Custom CSS")
Using a custom template
If you need more control over the Quick View markup than layout and CSS provide, you can build a custom template. For instructions on applying a custom template to Quick View and the Results page, see How To Use a Custom Template for Smart Search Quick View and Results Page.
You can also visit our Rebuy Developer Documentation for Smart Search Quick View Custom Templates
Frequently asked questions
Why won't Smart Search Quick View open when I click the search icon?
If Smart Search Quick View does not open when you click your search icon, it usually means the Trigger Element is not pointed at the element shoppers actually click. Quick View opens from a trigger element — most often your theme's search icon — and when Rebuy's default selectors do not match your theme's search element, clicking it does nothing.
To fix it:
Open the Quick View editor in your Rebuy admin and go to Selectors.
Click the Select Trigger link, then click your search icon directly on your live storefront. The tool captures the correct CSS selector and fills in the Trigger Element field for you. See "Use the Select Trigger link to set your trigger" above.
On themes with nested elements, confirm the trigger landed on the search icon itself and not a nearby wrapper element — test by clicking other elements after making your selection.
Save, then reload your storefront and click the search icon to confirm Quick View opens.
If Quick View opens but appears in the wrong place — detached from the search bar, clipped, or behind a sticky header — that is the Embedded Element, not the trigger. See the Embedded element section above.
Why do I see two search bars when I use Smart Search Quick View?
Seeing two search bars — your Shopify theme's own search bar and Rebuy's — happens because Smart Search Quick View opens from a trigger element instead of replacing your theme's built-in search. Quick View launches from a trigger (most often a search icon) and cannot completely replace a Shopify theme that shows an always-visible search bar, so when both are active shoppers can open two separate search inputs.
To give shoppers a single search experience:
If your Shopify theme supports it, switch the theme's search from a visible search bar to a search icon only, so no visible Shopify search bar remains.
Set Quick View's Trigger Element to point at that search icon. The Select Trigger tool does this for you — see "Use the Select Trigger link to set your trigger" above.
Clicking the icon then opens Rebuy's Quick View search, so only one search bar appears.
Does Smart Search Quick View support an always-visible search bar?
Smart Search Quick View does not currently support an always-visible search bar. Quick View requires a trigger element — usually a search icon — to open the search display, so shoppers open search on click rather than typing into a permanently visible bar. If your theme currently shows an always-visible search bar, It is recommended to configure the Shopify theme to use a search icon instead, then point Quick View's Trigger Element at that icon as described in Why do I see two search bars when I use Smart Search Quick View?