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.
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 Smart Search previewer provides a real-time mock-up of how your adjustments will look.
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 (Horizontal Layout only):
Mobile: 2 columns disabled
Tablet: 4 columns disabled
Desktop: 5 columns disabled
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.
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.
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.
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.
Integrations
Enabling Smart Search Product Ratings will display an average star rating and the total number of reviews for products in search results, provided that ratings exist for those products. By default, this toggle will be set to off.
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.
Enabling Review Integrations for search quick view:
Ensure you have a review app service with one of Rebuy's select partners.
Enable the review service within Rebuy.
Navigate to the Integrations section in your smart search quick view editor to enable review integrations.
Select your reviews app.
For assistance with setting up your review integrations, refer to the Rebuy Engine Help Center.
Styling
You can customize:
Star Size (with preset slider options)
Product Reviews Text Color
Star Color
Background (empty star color)
These settings use your current Rebuy theme defaults, but you can override them easily. You can also revert to theme defaults anytime by selecting that option in the Styling section.
Styling Options
Color Pickers:
Choose custom colors for:Product Reviews Text
Star Color
Background (this applies to the empty star background)
Star Size Slider:
Select from:Small
Default (Medium)
Large
Here’s what each setting controls:
Product Reviews Text: Sets the color of the review text shown with product ratings.
Star Color: Controls the color of the filled stars.
Background: Changes the color of the empty star background.
Star Size: Adjusts the overall size of the stars (small, default, large).
The only limitation is the Star Size—you can choose from the three preset sizes only.
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.
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.