Quick View Search enhances the user experience by dynamically displaying products, collections, and related search terms as shoppers type into the search bar, adapting in real time to their input. This feature promotes product discovery, offers personalized recommendations, and boosts conversions and revenue.
Editor Preview
The Quick View editor includes a live preview of your actual storefront, rendered directly within the Rebuy admin as you configure settings. The preview reflects your real store theme, product catalog, and branding. Changes made in the editor do not go live until saved.
How the preview loads when you open the editor:
Existing Smart Search users: The preview automatically loads using your store's top search data, so a relevant result set appears right away without any input required.
Net-new Smart Search users (no prior search history): You'll be prompted to enter a search term to activate the preview. Once entered, the preview renders results from your storefront for that query.
Context-aware preview: The preview is reactive to the setting panel you have open. As you navigate through configuration options, the preview updates to reflect the scenario tied to that setting, so you can see the direct impact of each change as you make it.
Configuration Options:
Within these settings, you can easily configure the following:
Adjust the Quick View layout.
Set search results to default or custom URLs.
Define keyword suggestions that shoppers will see before typing.
Configure product suggestions to appear before typing.
Quick View Customization:
The main editor offers a variety of customization options to align Quick View with your brand and preferences. As you make changes, the editor displays a live preview of your actual storefront rendered directly within the Rebuy admin. The preview reflects your real store theme, products, and branding.
Product Card Layout: Choose between vertical or horizontal alignment for product images and text.
Column Spacing: Use the slider to select from six preset spacing options to adjust the space between product columns.
Column Breakpoints: Customize the layout for desktop, tablet, and mobile devices to ensure an optimal view across all platforms.
Number of Products Displayed: Choose how many products to display in Quick View, ranging from 1 to 15.
Limitations:
Column Breakpoint Restrictions with Side Search Layout
When the Side Search layout (left or right) is selected under Layout options, certain column breakpoints within Product Display become restricted. The available options depend on which Product Card layout is in use:
| Mobile | Tablet | Desktop |
Vertical Product Card (default) | 1, 2 | 1, 2 (3, 4 disabled) | 1, 2 (3, 4, 5 disabled) |
Horizontal Product Card | 1 (2 disabled) | 1 (2, 3, 4 disabled) | 1 (2, 3, 4, 5 disabled) |
Disabled breakpoints are grayed out and cannot be selected while Side Search is active. Switching to a different layout restores the full breakpoint range.
Enabling and Disabling Quick View
Enabling and disabling the Quick View search feature is as simple as toggling it on or off on the Quick View settings page. It's important to note that Smart Search must be installed and enabled for the Quick View function to work properly.
Quick View Layout
Customize the visual layout of your Quick View search experience to suit your preferences. 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 for flexible design options.
Interaction Settings
Customize the appearance and presentation of product recommendations before and as users type in the search bar.
Before User Starts Typing:
In this section, you can:
Customize the Quick View appearance when visitors haven’t started typing.
Choose to display suggested collections, search terms, and/or products.
Configure custom titles for each element to fit your needs.
Suggested Search Terms:
You can configure the search terms shoppers will see before they begin typing. Three default rules are provided by Rebuy, but you also have the option to create custom search terms.
Previous Search History: Displays recent search terms from the user’s current session, based on all-time search data.
Trending Search Terms: Shows search terms that have been trending across the merchant site in the past 24 hours.
Custom (Add New): Create custom search terms tailored to your preferences for display in the search bar.
You can adjust the priority of these search terms by clicking and dragging them in the settings, with higher-priority terms appearing at the top.
Suggested Collections
Customize the collection suggestions that shoppers see before they start typing. By default, Trending Collections are displayed, showcasing collections that are currently popular. You can also choose to display Custom Collections or combine both options for a more personalized browsing experience.
Trending Collections: Displays collections that have been popular within the past 24 hours, reflecting current shopper interests.
Custom (Add New): Allows you to create and display custom collections every time someone uses the search bar.
You can adjust the priority of collection suggestions by clicking and dragging them in the settings. The suggestions are prioritized top-down.
Suggested Products
Customize the product suggestions that shoppers see before they start typing. You can choose from two default settings or create a tailored experience by combining options.
User History (Search and View): Displays products recently viewed by the user, based on their session and all-time activity. This is generated through cookie tracking, and unless users are signed in, the data remains anonymous. We do not track or sell cookie data; events are anonymized across the same browser unless users sign in and provide customer information.
Trending Products: Shows products that have been trending in the past 30 days, reflecting the most purchased items on the merchant site during that period.
Custom (Add New): Allows you to create and display custom products each time someone uses the search bar.
You can adjust the priority of product suggestions by clicking and dragging them within the settings, with the higher-priority suggestions appearing at the top.
As User Starts Typing
You have several options to enhance the search experience as users begin typing:
Auto-Complete Terms: Display suggested searches based on the product's title. When enabled, part of a word from the product title will trigger an auto-complete suggestion.
Help shoppers find products faster with auto-complete suggestions. Auto-complete terms are based on the keywords you create within Smart Search.
Matching Products: Show products that match the user's search query in real time.
Matching Collections: Display relevant collections containing products related to the search term. If any collections contain matching products, they will be shown. Note: Excluded collections from the Global Settings will not appear in this section of Quick View.
Matching Content: Display relevant blog posts and pages as the shopper types. Matching results appear in a dedicated Matching Content section between Matching Collections and Matching Products. Each result is shown as a clickable title link that takes the shopper directly to the blog post or page. The section is hidden entirely if no matching content is returned for a query.
Title Input: A new field allows you to customize the name of Auto-Complete terms, similar to the customization available for matching products and collections.
Max Suggestions Displayed: A new setting has been added to both Auto-Complete Terms and Matching Collections, allowing you to limit the number of suggestions shown.
Configure in Product Display: A hyperlink has been added to Matching Products, directing you to the Product Display settings to configure the maximum number of products shown.
No Search Results Page
This setting helps keep shoppers engaged when their search returns no results. Instead of landing on a dead-end page, they’ll see curated suggestions—products, collections, or related search terms—helping them continue their product discovery journey.
When a search query returns zero results, you can choose to display:
Suggested Search Terms
Suggested Collections
Suggested Products
You can customize these settings:
Page Title Customization
Change the default messaging shown on the no results page. Use
{term}to dynamically insert the search query (e.g., "No results for {Tee}").
Editable Suggestion Cards
Each of the three suggestion types includes an 'Edit' button. Clicking opens a slide-out panel to customize suggestions.
Limits and Validation
You can add up to 10 items per suggestion type. If you try to exceed the limit or leave with unsaved changes, you’ll see clear error messaging and prompts.
Consistent Styling
This interface matches the styling used in the “Before User Starts Typing” settings for a cohesive setup experience.
All suggestion settings are off by default. You’ll need to enable and configure them manually.
Text Settings
Search Bar Text
Customize the placeholder text in the search bars on both the Quick View and Results pages. By adding tailored text, merchants can create a more personalized and branded search experience, helping guide shoppers effectively before they begin typing.
Product Display
Customize how search suggestions are displayed across different device types, including mobile, tablet, and desktop. Each device type can be adjusted individually to suit your preferences.
Image Ratio Settings for Quick View Page
The Image Ratio Settings allow you to adjust the aspect ratio of product images shown in search results on both the Quick View and Results pages.
How It Works: By default, the image ratio is set to 1:1. When you choose a different ratio, the display container for product images automatically adjusts to match your selection.
Image Ratio Options:
1:1: Default square ratio.
3:4: Slightly rectangular, with more height.
9:16: Wider, landscape-style ratio.
Column Breakpoints
Customize the display of Quick View across different devices, including mobile, tablet, and desktop. Adjust the settings for each device type individually to ensure an optimized viewing experience.
Note: When the Side Search layout is active, the available column options are reduced for all device sizes. See the Limitations section above for the full breakpoint restriction table by Product Card layout type.
Device-Specific Limitations for normal product card layout:
Mobile: Only 2 product can be displayed per row.
Tablet: A maximum of 4 products can be displayed per row.
Desktop: A maximum of 5 products can be displayed per row.
Device-Specific Limitations for compact product card layout:
Mobile: Only 1 product can be displayed per row.
Tablet: A maximum of 3 products can be displayed per row.
Desktop: A maximum of 3 products can be displayed per row.
Column Spacing:
You can choose from one of the following options for column spacing in your collection:
None
Extra-Tight
Tight
Default
Loose
Extra-Loose
Alignment Settings
Control the alignment of the product card text displayed in Quick View. You can choose from the following options:
Left: Aligns text to the left side of the product card.
Center (default): Aligns text to the center of the product card.
Right: Aligns text to the right side of the product card.
By default, product card text is center-aligned.
Text Styling
Customize the text colors for various product details displayed on the product card:
Title: Set the color for the product title.
Price: Set the color for the regular product price.
Sale Price: Set the color for discounted product prices.
Compare at Price: Set the color for the original price shown when a product is on sale.
Call to Action
Customize the Call to Action buttons, including button text and styling, to enhance the shopping experience.
Add to Cart Button
Enable the Add to Cart (ATC) button within the Quick View results, allowing shoppers to quickly add products to their cart—an effective way to increase conversions.
A dedicated Call to Action section in the Quick View Editor gives you full control over all ATC settings, including new customization and styling options to ensure the button aligns with your brand and storefront design.
Customization Options
Color Picker Settings:
Button Text – Customize the text color.
Button Background – Set a custom background color.
Button Border Color – Choose a border color for the button.
Slider Settings (0–24 pixels):
Button Border Width – Adjust the thickness of the button border.
Button Radius – Change the roundness of the button corners.
⚠️ Note: The slider range is limited to 0–24 pixels for border width and radius. Rebuy’s default theme may allow larger values, but these settings in Search are capped at 24.
Theme Link & Info Note: A note card at the top includes helpful guidance and a link to the Rebuy Default Theme.
Default Theme Integration: Your default Rebuy theme settings will be used initially, but you can override them with your own styles.
Reset Option: Easily revert to your default Rebuy styling if needed.
Product Reviews in Smart Search Quick View
The Product Reviews configuration in the Smart Search Quick View editor controls which review providers display star ratings and review counts in your Quick View search results. The editor splits providers into two dynamic sub-sections based on your actual Rebuy account configuration: Connected in Rebuy and Not Connected. The split makes it clear at a glance which providers can display ratings onsite and which still need to be set up before they can be toggled on.
The Product Reviews section in the Smart Search Quick View editor controls which review providers display star ratings and review counts in your Quick View search results. Find it in the Quick View editor's left navigation under General Settings > Product Reviews. Opening it loads a dedicated Product Reviews page with a subtitle that reads Select your product review app(s) and customize the display of the star ratings to match your brand.
The Product Reviews page is organized into four sub-sections:
Integrations is a shortcut card with a Rebuy Account Integrations Settings button that opens the main Rebuy Integrations admin page in a new tab. Use this when you want to manage your full set of Rebuy integrations, not just review apps.
Connected in Rebuy lists every supported review app that you have already configured in your Rebuy account. Connected apps can be toggled on or off from this sub-section.
Not Connected lists supported review apps that you have not yet configured in your Rebuy account. Apps here cannot be toggled on until you complete their setup.
Styling controls the size and color of the star rating display in Smart Search Quick View results.
(Screenshot example above: The Smart Search Quick View editor with the Product Reviews page)
How to display review star ratings in Smart Search Quick View
To display star ratings from a review provider in Smart Search Quick View search results:
Open the Smart Search Quick View editor in your Rebuy admin.
In the left navigation, within the General Settings section, select Product Reviews.
If the provider you want to display is listed under Connected in Rebuy, toggle it on. Star ratings will then appear next to matching products in Quick View results.
If the provider you want to display is listed under Not Connected, click Connect next to that provider. This opens the provider's integration setup page in a new tab. Complete the setup, then return to the Product Reviews page. The provider will now appear under Connected in Rebuy, where you can toggle it on.
For full setup instructions on each individual review app, see the Product Review Apps Help Center collection.
Connected in Rebuy in Smart Search Product Reviews
The Connected in Rebuy sub-section of the Smart Search Product Reviews page lists every review app that you have already configured in your Rebuy account. Each connected provider has a toggle that turns its star rating display on or off in Smart Search Quick View results. All toggles are off by default. Star ratings will not appear in Smart Search until you explicitly toggle a provider on.
Each connected provider also displays a Manage link that opens that provider's integration settings page in a new tab within the Rebuy admin, so you can adjust the integration without leaving the editor flow.
If no review providers are currently configured in your Rebuy account, the Connected in Rebuy sub-section displays an info alert reading Connect a provider to display ratings with a Connect button. Clicking Connect opens the main Rebuy Integrations admin page in a new tab so you can pick a supported provider and set it up.
(Screenshot example above: A capture of the Connected in Rebuy sub-section in its empty state, showing the "Connect a provider to display ratings" info alert with the Connect button visible.)
Hovering the Connected in Rebuy header surfaces a tooltip that reads: These review apps are connected in your Rebuy account. Toggle on to display star ratings in Smart Search.
Not Connected in Smart Search Product Reviews
The Not Connected sub-section of the Smart Search Product Reviews page lists supported review apps that Smart Search can work with but that you have not yet configured in your Rebuy account. Apps in this sub-section do not show a toggle, because an integration that is not connected cannot be enabled from the editor.
Each Not Connected app displays a Connect link that opens that provider's specific integration setup page in a new tab. Once you complete setup, the provider moves to the Connected in Rebuy sub-section the next time you load the Product Reviews page.
Hovering the Not Connected header surfaces a tooltip that reads: These review apps aren't connected in your Rebuy account yet. Click Connect to set them up.
Styling Product Reviews stars in Smart Search Quick View
The Styling sub-section of the Smart Search Product Reviews page controls the appearance of the star ratings displayed in Quick View search results. Four settings are available, each defaulting to your current Rebuy theme:
Size sets the star size. Choose from three preset positions on the slider: Small, Default, or Large. There is no custom size input.
Product Reviews Text sets the color of the review text shown alongside the stars, including the review count.
Star Color sets the color of the filled stars.
Background sets the color of the empty star area that appears behind partially filled stars.
To revert any setting to your Rebuy theme defaults, click RESET TO THEME at the bottom of the Styling card.
Supported review integrations in Smart Search
Smart Search supports star rating display for the following nine review providers:
Ensure an active supported integration is enabled in Rebuy for your review app to display reviews. For further details on currently supported review apps, please visit the Smart Search FAQ.
Advanced Settings
Selectors
If you're using a customized theme, you may need to use advanced selectors within the Quick View settings to ensure the search bar triggers and displays correctly. Rebuy provides default selectors that work seamlessly with standard Shopify themes, so you may not need to adjust these. However, if Smart Search isn't functioning as expected, here are the relevant definitions.
We recommend previewing Smart Search before making any adjustments, as default themes should work with the pre-configured elements. These selectors are typically only necessary if issues arise.
Trigger Element
The Trigger Element refers to a component (like the search icon) that initiates a specific action when interacted with. In this case, your trigger element would be the search icon.
Embedded Element
The Embedded Element refers to content, such as multimedia or interactive components, integrated directly into the web page. This is where the search display is embedded to show the search results.
Pro Tip - Use the "Select Trigger" Button to Simplify Quick View Setup
The "Select Trigger" button launches a visual selector tool that makes it easy to set up your Quick View trigger—no need to manually hunt for CSS selectors.
Here’s how it works:
Go to Selectors in your Rebuy Admin settings.
Click the "Select Trigger" button.
You’ll be taken to your live storefront.
Click the search icon or any element you want to use as the Quick View trigger.
The tool will automatically capture the correct CSS selector and paste it into the Trigger Element field for you.
This tool removes the technical guesswork, so you can configure your Quick View trigger quickly and confidently—no coding required.
Please note that this selector helper may not work as intended on certain themes with nested items so please be sure to test by clicking other elements after making your selection to ensure it is set properly with the search icon or whatever other element you desire to be the trigger.
Event Callbacks
Configure custom JavaScript to trigger during specific stages of the Quick View lifecycle. These callbacks let you track user interactions or integrate with third-party tools.
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 product selection changes.
Products Change Callback – Fires after product selection changes.
💡 Use these callbacks to trigger analytics events, modify behavior dynamically, or sync data with other services.
Custom CSS
Apply your own custom CSS to style the Quick View component. This allows you to override default styles and match your brand’s look and feel.
Example: Change fonts, button styles, layout spacing, or hide specific elements. Checkout our guide for some CSS styling tricks for Smart Search
FAQs
Q: What is the limit of suggested terms, products, and collections within the quick view editor settings?
A: The limit of products that can be shown in the Rebuy search suggestions for terms, products, and collections is 6 for each category by default.
Q: Why aren't my Product and/or Collections showing properly?
A: Whenever you make changes to Products or Collections in Shopify, the process involves Shopify automatically sending us an update request via webhooks. Once we receive it, we sync the updated products or collections with Rebuy. However, occasional delays can occur due to factors like network disruptions, high server traffic, temporary API rate limits, or even minor hiccups in communication between Shopify and Rebuy. To solve for this issue, we recommend manually re-syncing your Product and Collections data by following the steps in our guide here: Sync Product Data, Store Data, and Clear Cache
Q: Why isn't the auto-complete feature working?
A: For the auto-complete behavior, this is triggered by Keywords. So you will need to first have Keywords configured in your Smart Search settings for the auto-complete feature to work. Please note that the auto-complete feature will not auto-complete in the search input field itself, but rather show a section in the dropdown called "Suggested Searches" as shown below.
Q: How do I preview smart search on my site?
A: To preview Smart Search, simply click the "preview" button on the Smart Search dashboard, Quick View editor page, or Results editor page.
More Questions? Checkout our Smart Search FAQ document for some frequently asked questions. If you don't see your answers there, please feel free to send them to us via the messenger on this page along with your details.