Customizing the appearance of your Rebuy Smart Search can significantly elevate the shopping experience for your customers. This guide helps you personalize the Smart Search feature in your Shopify store using CSS.
NOTICE: Rebuy support services encompass all aspects directly associated with Rebuy, providing assistance and guidance for features and functionalities within the standard Rebuy package. However, please note that we cannot provide support for third-party plugins or customizations beyond the scope of Rebuy. Unsupported items include, but are not limited to, custom template modifications/troubleshooting, headless configurations/troubleshooting, native cart configurations/troubleshooting, Custom CSS/Javascript, custom scripts, and third-party integrations. Proceed with caution if you plan to make any customizations.
Please refer to our Support Policy Page
WHERE DO I ADD CSS STYLING CODE FOR SMART SEARCH?
CSS is styling code that can be directly integrated into the Rebuy Theme. By doing this, your CSS loads seamlessly with Rebuy, eliminating the need to modify your Shopify Theme. This approach not only streamlines the process but also maintains a cleaner and more organized setup for your site's design.
Access Theme Settings
Navigate to the settings page in your Rebuy admin.
Click on 'Themes' to open the theme customization options.
Or simply click the link below and we will take you there!
Once in the Rebuy Theme Settings page, scroll down to locate the black Custom CSS box at the bottom. Here, you can input any CSS code for custom styling.
CSS STYLING TIPS FOR SMART SEARCH
*Important Terms
Selectors: A Selector is what you're styling.
.rebuy-quick-view__search-input { } is the selector.
This specifies the element you're targeting for styling changes, with curly brackets following the selector used to enclose the CSS properties.
For example .rebuy-quick-view__search-input { } means you're targeting the input box of the SmartSearch Bar
Properties: These specify the styling modifications to the element’s selector and are placed within curly brackets following the selector.
For example, in .rebuy-quick-view__search-input { background: #ffffff; } background: is the property, and you assign it a value. Here, background: #ffffff; sets the button’s color to white using the color hex #ffffff.
*Ensure a semicolon ; follows every property-value pair in your CSS.
Comment code: Comments are enclosed in /* and */ in CSS. This is used to add notes or explanations. Comment code does not run as code. They're helpful for reminding yourself or informing others about what a specific part of the code is for. We recommend including the comment code alongside the code to maintain organization.
Use the !important tag to guarantee your style applies when it's being overridden by other theme styles. It's not always required but is included in this guide's code for precaution.
EXAMPLE:
Now let's explore some commonly used techniques that you can easily copy, paste, and modify to apply CSS for adjusting the look of your Smart Search feature.
SmartSearch Background Color
To modify the background color of the SmartSearch's Quick View dropdown panel and Results Page, copy and paste the following code blocks below. You may customize this code by altering the selectors according to your preferences. Be sure to replace yourColorHex with the hexadecimal color code of your choice.
Making adjustments:
For example, the background-color: property uses a color #hex for changing the element's background Color. Change the hex to your desired color, keep the #
For Example: background-color: #000000;
To find a specific color's hexadecimal code, visit
Quick View Background Color
To modify the background color of the SmartSearch's Quick View dropdown panel, Copy and paste the following code block into:
This code utilizes multiple selectors to ensure the background color changes completely.
/* SmartSearch Quick View Container Background: */
.rebuy-quick-view__overlay,
.rebuy-quick-view__overlay-body,
.rebuy-quick-view__container,
.rebuy-quick-view-dropdown__body-left,
.rebuy-quick-view-dropdown__body-right,
.rebuy-quick-view__product {
background-color: #yourColorHex !important;
}
BEFORE Code - Quick View Panel Defaulted to White Background:
AFTER Code - Quick View Panel using color hex #000000 for a Black Background
Results Page Background Color
By default, SmartSearch's Results Page adopts the background style from your Shopify Theme's Search Page. But you can apply the following code to customize it if necessary:
/* SmartSearch Search Page Container Background: */
#rebuy-smart-search-results-dropdown {
background-color: #yourColorHex !important;
}
SmartSearch Product Title Color
To update the color of the Product Titles in SmartSearch's Quick View and Results Page, use the code blocks provided below. These snippets target specific classes to change the text color effectively.
Remember to replace yourColorHex with the #hex number of the color you want to use.
Quick View Product Titles
Change the color of the Product Titles in SmartSearch's Quick View. Copy and paste the following code block into: Rebuy Dashboard -> Settings Page -> Themes -> Custom CSS Box
/* SmartSearch Quick View Product Titles: */
.rebuy-quick-view__product-list .rebuy-quick-view__product .rebuy-product-title {
color: #yourColorHex !important;
}
SmartSearch's Quick View Product Title Example:
Results Page Product Titles
Change the color of the Product Titles in SmartSearch's Results Page. Copy and paste the following code block into: Rebuy Dashboard -> Settings Page -> Themes -> Custom CSS Box
/* SmartSearch Search Page Product Titles: */
.rebuy-smart-search-results__product-detail .rebuy-product-title {
color: #yourColorHex !important;
}
SmartSearch's Results Page Product Title Example:
SmartSearch Product Price Color
To update the color of the Product Prices in SmartSearch's Quick View and Results Page, use the code blocks provided. These snippets target specific classes to change the price color effectively.
*Remember to replace yourColorHex with the #hex number of the color you want to use.
Quick View Product Price
Change the color of the Product Prices in SmartSearch's Quick View, Copy and paste the following code block into: Rebuy Dashboard -> Settings Page -> Themes -> Custom CSS Box
/* SmartSearch Quick View - Regular Product Price: */
.rebuy-quick-view__product-section .rebuy-money {
color: #yourColorHex !important;
}
/* SmartSearch Quick View - SALE Product Price: */
.rebuy-quick-view__product-section .rebuy-money.sale {
color: #yourColorHex !important;
}
SmartSearch's Quick View Price Example:
Results Page Product Price
To update the color of the Product Prices in SmartSearch's Results Page, Copy and paste the following code block into: Rebuy Dashboard -> Settings Page -> Themes -> Custom CSS Box
/* SmartSearch Results Page - Regular Product Price: */
.rebuy-smart-search-results__product-detail .rebuy-money {
color: #yourColorHex !important;
}
/* SmartSearch Results Page - SALE Product Price: */
.rebuy-smart-search-results__product-detail .rebuy-money.sale {
color: #yourColorHex !important;
}
SmartSearch's Results Page Price Example:
SmartSearch Label Text
To modify the text of the SmartSearch Labels in SmartSearch's Quick View and Results Page, use the code blocks provided below.
Additional styling properties are included for further customization of the text. Feel free to adjust or omit them, or alter their values as you see fit.
For example:
replace
yourColorHexwith the #hex number of the color you want to use.
Change the
px(pixel) amount to a higher or lower value to adjust thefont-size
Quick View Matching Collection Label Text
Style the text of the Labels in SmartSearch's Quick View. Copy and paste the following code block into: Rebuy Dashboard -> Settings Page -> Themes -> Custom CSS Box
/* SmartSearch Quick View - Matching Collection Labels: */
.rebuy-quick-view__title {
margin: 0px;
text-align: left;
text-transform: uppercase;
font-size: 18px;
font-weight: bold;
color: #yourColorHex !important;
}
/* SmartSearch Quick View - Collections LIST: */
.rebuy-quick-view__collection-list {
margin: 0px;
text-align: left;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
color: #yourColorHex !important;
}
SmartSearch's Quick View Labels - Example:
Results Page Labels
Style the text of the Labels in SmartSearch's Results Page. Copy and paste the following code block into: Rebuy Dashboard -> Settings Page -> Themes -> Custom CSS Box
/* SmartSearch Results Page - 'Showing results for' Label: */
.rebuy-smart-search-results-sidebar__context h2 {
color: #yourColorHex !important;
}
/* SmartSearch Results Page - 'Filter' Label: */
.rebuy-smart-search-results-sidebar__filter-section-title.rebuy-title {
color: #yourColorHex !important;
font-size: 20px;
}
/* SmartSearch Results Page - 'Products' Label: */
.rebuy-smart-search-results-sidebar__result-section-title {
color: #yourColorHex !important;
font-size: 20px;
}
SmartSearch's Results Page Labels - Example:
SmartSearch Add To Cart Button's
By default, SmartSearch adopts the Button styles from your Theme, however you can apply the following code to customize SmartSearch's specifically if necessary.
Important Note:
Additional styling properties are included for further customization of the text. Feel free to adjust or omit them, or alter their values as you see fit.
border-color:property modifies the button's border color.background:property modifies the Button's fill Colorcolor:property modifies the Button's TEXT Colorborder-radius:property modifies the corners of the button. A higherpxamount = more roundness. Use0pxfor Sharp edges.
To modify the Add To Cart Buttons of the SmartSearch for SmartSearch's Quick View and Results Page, use the code blocks provided below.
Quick View Add To Cart Button
Modify the color and text of the Add To Cart Buttons in SmartSearch's Quick View as needed. Extra styling options have been provided to allow for more text customization. Adjust, remove, or change these properties to suit your preferences.
Copy and paste the following code block into: Rebuy Dashboard -> Settings Page -> Themes -> Custom CSS Box
/* SmartSearch Quick View - Buttons: */
.rebuy-quick-view__product-cta {
border-color: #yourColorHex !important;
background: #yourColorHex !important;
color: #yourColorHex !important;
font-size: 16px;
border-radius: 5px !important;
/* border-radius amount for rounded corners. */
}
SmartSearch's Quick View Buttons - Example:
Results Page Add To Cart Button
Modify the color and text of the Add To Cart Buttons in SmartSearch's Results Page as needed. Extra styling options have been provided to allow for more text customization. Adjust, remove, or change these properties to suit your preferences.
Copy and paste the following code block into: Rebuy Dashboard -> Settings Page -> Themes -> Custom CSS Box
/* SmartSearch Results Page - Buttons: */
.rebuy-smart-search-results__cta {
border-color: #yourColorHex !important;
background: #yourColorHex !important;
color: #yourColorHex !important;
font-size: 16px;
border-radius: 0px !important;
/* border-radius amount for rounded corners. */
}
SmartSearch's Results Page Button's - Example:
ADDITIONAL SELECTORS FOR SMART SEARCH ELEMENTS
Here's a list of typical elements you might find in SmartSearch's interface, along with empty CSS brackets for adding customization properties. Note that the exact class names and structure can vary depending on the specific implementation of your theme.
SmartSearch Quick View Elements List
SmartSearch Quick View Elements List
#rebuy-quick-view-flyout-search { }
.rebuy-quick-view-sidebar { }
.rebuy-quick-view-flyout__flyout { }
.rebuy-quick-view__container { }
.rebuy-quick-view-flyout__flyout-container { }
.rebuy-quick-view__search-header { }
.rebuy-quick-view-flyout__search-header { }
.rebuy-quick-view__close-button { }
.rebuy-quick-view__search-input { }
.rebuy-quick-view-flyout__search-input { }
.rebuy-input { }
#searchInput { }
.rebuy-quick-view__body { }
.rebuy-quick-view-flyout__body { }
.rebuy-quick-view__results { }
.rebuy-quick-view__collection-section { }
.rebuy-quick-view__title { }
.rebuy-quick-view__collection-list { }
.rebuy-quick-view__collection { }
.rebuy-quick-view__product-grid-column-2 { }
.rebuy-quick-view__product-section { }
.rebuy-quick-view__product-list { }
.rebuy-quick-view-flyout__product-list { }
.rebuy-quick-view__product { }
.rebuy-quick-view__image-link { }
.rebuy-smart-search__absolute-image-container { }
.rebuy-quick-view_image { }
rebuy-smart-search__absolute-image { }
rebuy-smart-search__absolute-image--zoomed { }
.rebuy-quick-view__product-detail { }
.rebuy-quick-view__product-detail .rebuy-product-info { }
.rebuy-quick-view__product-detail .rebuy-product-title { }
.rebuy-quick-view__product-detail .price { }
.rebuy-quick-view__product-detail .rebuy-money { }
.rebuy-quick-view__product-detail .rebuy-money.sale { }
.rebuy-quick-view__product-detail .rebuy-money.compare-at { }
.rebuy-quick-view__product-detail .rebuy-product-actions { }
.rebuy-quick-view__product-cta { }
.rebuy-quick-view-flyout__background { }
.rebuy-quick-view-flyout__live-region { }
SmartSearch Results Page Elements List
SmartSearch Results Page Elements List
#rebuy-smart-search-results-dropdown { }
.rebuy-smart-search__input-section { }
.rebuy-smart-search-results-sidebar__input-section { }
#rebuy-smart-search-results-sidebar__input { }
.rebuy-smart-search__input-search-container { }
.rebuy-smart-search-results-sidebar__input { }
.rebuy-input { }
.rebuy-smart-search-results-sidebar__context { }
.rebuy-smart-search-results-sidebar__filter-section-title { }
.rebuy-title { }
.rebuy-search-filters { }
.rebuy-search-filters__left { }
.rebuy-search-filter { }
.filter-title { }
.rebuy-smart-search__sort-by { }
.rebuy-smart-search-results-sidebar__sort-by { }
.rebuy-smart-search-results-sidebar__sort-by-label { }
.rebuy-sort-by-desktop { }
#rebuy-smart-search-sort-options { }
.rebuy-select { }
.rebuy-smart-search__results-section { }
.rebuy-smart-search-results-sidebar__result-section { }
.rebuy-smart-search-results-sidebar__result-section-title { }
.rebuy-smart-search-results__container { }
.rebuy-smart-search-results__product { }
.rebuy-smart-search-results-sidebar__product { }
.rebuy-product-media { }
.rebuy-smart-search__product-media { }
.rebuy-smart-search-results__product-media { }
.rebuy-smart-search__absolute-image-container { }
.rebuy-smart-search__product-image { }
.rebuy-smart-search__absolute-image { }
rebuy-smart-search__absolute-image--zoomed { }
.rebuy-smart-search-results__product-detail { }
.rebuy-smart-search-results__product-detail .rebuy-product-info { }
.rebuy-smart-search-results__product-detail .rebuy-product-title { }
.rebuy-smart-search-results__product-detail .rebuy-product-price { }
.rebuy-smart-search-results__product-detail .rebuy-money { }
.rebuy-smart-search-results__product-detail .rebuy-money.sale { }
.rebuy-smart-search-results__product-detail .rebuy-money.compare-at { }
.rebuy-smart-search-results__cta { }
LEARN MORE STYLING PROPERTIES
For a wider range of unique CSS properties, explore further at:
NOTICE: Rebuy support services encompass all aspects directly associated with Rebuy, providing assistance and guidance for features and functionalities within the standard Rebuy package. However, please note that we cannot provide support for third-party plugins or customizations beyond the scope of Rebuy. Unsupported items include, but are not limited to, custom template modifications/troubleshooting, headless configurations/troubleshooting, native cart configurations/troubleshooting, Custom CSS/Javascript, custom scripts, and third-party integrations. Proceed with caution if you plan to make any customizations.
Please refer to our Support Policy Page