Use this article to lay out the Smart Search Results Page and wire up its advanced options: pick a Dropdown, Side Bar, or Flyout Filters layout, show or hide the results-page search bar, customize the search bar placeholder text and the page title, tell Smart Search where to render with the embedded element selector, run your own JavaScript with event callbacks, and apply custom CSS. To configure any of these, go to Smart Search → Results Page in your Rebuy admin to open the Configure Results Page editor. This article is part of the Smart Search Results Page documentation set — for a general introduction and links to the other Results Page settings, see Smart Search Results Page: Overview.
Choose a Results Page layout
The layout controls how the Smart Search Results Page arranges search results and filters on your storefront. You choose the layout on the Layout screen of the Results Page editor, and the Results Page offers three layouts, described in the following table:
Layout | How results and filters appear |
Dropdown | Search results are displayed in a dropdown-style results area. This is the default layout. |
Side Bar | Filters appear in a fixed sidebar next to the search results, so shoppers can see and adjust filters alongside the products. |
Flyout Filters | Filters are hidden behind a button and open in a flyout panel over the results, keeping the results grid full-width until a shopper opens the filters. |
To choose your layout, go to Smart Search → Results Page in your Rebuy admin to open the Configure Results Page editor. On the General Settings screen, under Layout Settings, click Edit next to Layout to open the Layout screen. The Side Bar and Flyout Filters options both fall under the Side by Side choice, and Dropdown is the separate choice. For how the filters shown in these layouts are configured, see Smart Search Results Page: Filters & Sorting.
You can preview how your chosen layout appears on desktop, tablet, and mobile using the device switcher in the top bar of the Results Page editor. The same Results Page layout applies to all device types: setting a different layout for desktop, tablet, and mobile is not supported, and the single layout you choose is used across every device. If you want the results to feel different on mobile, adjust the shared layout and the product display settings rather than expecting a separate mobile layout.
Show or hide the search bar on the Results Page
The search bar on the Results Page is the input where shoppers type a new query directly on the results page, and you can show or hide it with the Show Search Bar toggle in the Results Page editor. You find this toggle on the General Settings screen of the Configure Results Page editor, under Layout Settings, alongside the Search Bar Text and Page Title fields described below. By default, the search bar is displayed on the Results Page. If you toggle it off, the search bar no longer appears on the Results Page, which can streamline your layout when your site's header already contains a full search bar rather than only a search icon.
Important: If you disable the search bar on the Results Page, shoppers use the Smart Search Quick View search to start a new search, because there is no longer a search input on the results page itself. Only hide the Results Page search bar if shoppers have another visible way to search, such as a full search bar in your site header.
Customize the search bar placeholder text
The Search Bar Text setting controls the placeholder text shown inside the Results Page search bar (the light-gray prompt a shopper sees before typing). Customizing this placeholder lets you create a more tailored, branded search experience, for example replacing the default with wording that matches your catalog. The default placeholder text is Search for products, this setting is available only while the search bar is shown, and you can reset it to the default at any time.
Customize the Results Page title
The Page Title setting controls the heading displayed at the top of the Results Page above the search results. You can customize this title, and it supports two placeholder variables that Rebuy fills in automatically, listed here:
{term}inserts the search term the shopper entered.{count}inserts the number of search results found.
By default, the page title is Showing results for "{term}" ({count}), so a search for "skin" that returns 20 products displays as Showing results for "skin" (20). You can reset the page title to the default at any time.
Selectors: tell Smart Search where to render on your theme
Selectors are advanced settings under the Advanced Settings section of the Results Page editor that tell Smart Search where to render on a customized theme. Rebuy provides default selectors that are configured to work with default Shopify themes, so most stores never need to change these. Preview Smart Search before adjusting any selector: in most cases default themes work correctly with the default elements Rebuy has configured, and selectors should only be necessary if Smart Search is not behaving as expected on your storefront.
Set the embedded element so the Results Page renders in the right place
The Embedded Element is the location on the page where the Results Page search display is mounted, defined as a CSS selector. Setting the embedded element tells Smart Search which element on your storefront to render the results page inside. Leave this field blank and Rebuy uses its own default placement, which works for most themes. The field's placeholder shows example selectors such as #MainContent, #main-content, #main, which are common wrapper elements in Shopify themes. Fill it in only when the results page mounts in the wrong spot on a customized theme, pointing it at the correct wrapper element so the results render where they belong.
Use the Select Element helper to set the embedded element
The SELECT ELEMENT helper is a visual picker that sets the Results Page embedded element for you, so you do not have to find a CSS selector in your theme's HTML by hand. It opens your live storefront and lets you click the container you want search results to render inside, then captures that element's selector and fills in the Embedded Element field automatically.
To set the embedded element with the Select Element helper, follow these steps:
Go to Smart Search → Results Page in your Rebuy admin to open the Configure Results Page editor.
In the left navigation, scroll to Advanced Settings and select Selectors.
Click SELECT ELEMENT next to the Embedded Element field. Your live storefront opens with the Select Container Element for Search Results dialog on top of it.
Read the dialog and click Continue to start selecting.
Move your pointer over your storefront. A red border highlights whichever element is currently being targeted. Click the container you want the Smart Search results to render inside.
The helper captures that element's CSS selector and fills it into the Embedded Element field. Click Save.
Reload your storefront and run a search to confirm the results now render inside the container you picked.
On themes with deeply nested elements, the helper may capture a wrapper near the one you intended rather than the exact container. After making a selection, check the selector that landed in the Embedded Element field and confirm it points at the container you meant. If the results still render in the wrong place, run the helper again and click a different element, or type the selector in manually.
Add JavaScript event callbacks to the Results Page
The Results Page editor includes configurable JavaScript event callbacks for each stage of the Results Page lifecycle, letting you run custom JavaScript in response to specific Results Page interactions without modifying your Shopify theme. Use them to track shopper interactions or integrate with third-party tools such as analytics platforms. The following table lists the eight available callbacks and when each one fires:
Callback | When it fires |
Init | The Smart Search Results Page settings are detected and the instance begins loading. |
Before Ready | The Results Page instance is about to become ready. |
Ready | The Results Page instance is fully initialized and ready. |
Before Add | A product is about to be added to the cart from the Results Page. |
Add | A product is added to the cart from the Results Page. |
View | A shopper clicks a product title, image, or Learn More link on the Results Page. |
Before Products Change | The products are about to update based on a new search term. |
Products Change | New products are returned from the entered search term. |
To add a JavaScript event callback to the Results Page, follow these steps:
Open the Results Page editor in your Rebuy admin.
In the left navigation, scroll to Advanced Settings.
Click JS Event Callbacks to expand the callback configuration.
Paste your JavaScript into the relevant callback box and click Save.
For developer-level documentation on the Results Page event listeners, see Smart Search event listeners (Results Page).
Apply custom CSS to the Results Page
The Results Page editor has a dedicated Custom CSS block under Advanced Settings that lets you apply your own CSS to style the Smart Search Results Page. Use it to override default styles so search results match your brand's fonts, colors, and spacing.
Custom CSS in each Smart Search editor is scoped to where that surface renders, and the scoping is not symmetrical:
CSS added in the Results Page editor applies only on the search results page, even if the selector targets a Quick View element.
CSS added in the Quick View editor applies anywhere Quick View renders, including the Results Page. If a style you added to Quick View is showing up on your results page, that is expected behavior, not a bug.
As a best practice, keep your CSS in the editor that matches the element you are styling.
To add custom CSS to the Results Page, follow these steps:
Open the Smart Search Results Page editor in your Rebuy admin.
In the left navigation, scroll to Advanced Settings.
Click Custom CSS to open the code editor.
Add your CSS and click Save.
For a full library of Results Page CSS selectors and ready-made styling examples, see CSS Styling Tricks for Customizing Smart Search. If you need more control over the Results Page markup than layout and CSS provide, you can build a custom template, described in How to use a custom template for Smart Search Quick View and Results Page.
Frequently asked questions
Can I use a different Smart Search Results Page layout on mobile than on desktop?
No, the Smart Search Results Page uses one layout across every device type, and setting a different layout for desktop, tablet, and mobile is not supported. The Dropdown, Side Bar, or Flyout Filters layout you choose on the Layout screen applies everywhere. You can preview how that single layout renders on desktop, tablet, and mobile using the device switcher in the top bar of the Results Page editor, and if you want the results to feel different on mobile, adjust the shared layout and the Product Display settings — which are configurable per device — rather than expecting a separate mobile layout.
Why is my Smart Search Results Page rendering in the wrong place on my theme?
If the Smart Search Results Page renders in the wrong place on your storefront, your theme most likely does not use one of the default wrapper elements Rebuy targets. Fix it by setting the Embedded Element field under Advanced Settings → Selectors in the Results Page editor to the correct container on your theme. The quickest way is the SELECT ELEMENT helper, which opens your live storefront and lets you click the container you want results to render inside, then fills in the selector for you — see "Use the Select Element helper to set the embedded element" above. You can also type a CSS selector in manually, such as #MainContent, #main-content, or #main. Leave the field blank to keep Rebuy's default placement, which works for most themes. Preview Smart Search before changing any selector — default Shopify themes usually work correctly with Rebuy's defaults, so a selector change should only be necessary when the Results Page is demonstrably mounting in the wrong spot.