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?
Smart Search CSS is managed at the editor level, with a dedicated Custom CSS block available directly inside both the Quick View Editor and the Results Page Editor. This keeps your custom styling organized and scoped to the right component.
Use this reference to style Rebuy Smart Search with custom CSS. Smart Search has two surfaces, each organized through its own editor.
Surface | Where to add CSS |
Quick View | Smart Search > Quick View Editor > Advanced Settings > Custom CSS |
Results Page | Smart Search > Results Page Editor > Advanced Settings > Custom CSS |
CSS in each editor is scoped to where it renders. CSS added in the Quick View editor applies anywhere Quick View renders — including the Results Page. CSS added in the Results Page editor only applies on the search results page, even if the selector targets a Quick View element. For best practice, keep your CSS organized in the editor that matches the element you're styling.
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.
Results Page CSS goes in the Results Page Editor under Advanced Settings:
Navigate to Smart Search in your Rebuy admin.
Click Results Page to open the Results Page Editor.
In the left navigation, scroll to Advanced Settings.
Click Custom CSS to open the code editor.
Paste your CSS and click Save.
(Screenshot above: Rebuy Admin Smart Search "Configure Results Page" editor showing the "Custom CSS" panel)
Quick Style Template (Recommended Starting Point)
Rebuy Smart Search has a set of built-in variables for colors and button styles. Fill in the values you want, paste the block into the CSS editor, and Rebuy applies them automatically. Start here before writing any custom selectors — most common styling needs are covered.
Quick View
/* Smart Search Quick View: Quick Style Template */
:root {
--rb-smart-search-quick-view-button-background-color: ;
--rb-smart-search-quick-view-button-text-color: ;
--rb-smart-search-quick-view-button-border-color: ;
--rb-smart-search-quick-view-button-border-width: ;
--rb-smart-search-quick-view-button-radius: ;
--rb-smart-search-quick-view-product-title-color: ;
--rb-smart-search-quick-view-product-price-color: ;
--rb-smart-search-quick-view-product-price-sale-color: ;
--rb-smart-search-quick-view-product-price-compare-at-color: ;
--rb-smart-search-quick-view-reviews-text-color: ;
--rb-smart-search-quick-view-reviews-background-color: ;
--rb-smart-search-quick-view-reviews-foreground-color: ;
}
Results Page
/* Smart Search Results Page: Quick Style Template */
:root {
--rb-smart-search-results-button-background-color: ;
--rb-smart-search-results-button-text-color: ;
--rb-smart-search-results-button-border-color: ;
--rb-smart-search-results-button-border-width: ;
--rb-smart-search-results-button-radius: ;
--rb-smart-search-results-pagination-button-background-color: ;
--rb-smart-search-results-pagination-button-text-color: ;
--rb-smart-search-results-pagination-button-border-color: ;
--rb-smart-search-results-pagination-button-border-width: ;
--rb-smart-search-results-pagination-button-radius: ;
--rb-smart-search-results-product-title-color: ;
--rb-smart-search-results-product-price-color: ;
--rb-smart-search-results-product-price-sale-color: ;
--rb-smart-search-results-product-price-compare-at-color: ;
--rb-smart-search-results-reviews-text-color: ;
--rb-smart-search-results-reviews-background-color: ;
--rb-smart-search-results-reviews-foreground-color: ;
--rb-smart-search-results-content-heading-color: ;
--rb-smart-search-results-content-description-color: ;
--rb-smart-search-results-content-active-tab-color: ;
--rb-smart-search-results-content-inactive-tab-color: ;
}
Adding Styling Properties to Selectors
Each selector in this article is written as an empty block. Add any standard CSS properties inside the curly braces to apply your styles.
Example:
.rebuy-smart-search-results-page__cta {
background-color: #000000;
color: #ffffff;
border-radius: 4px;
font-size: 14px;
}
The most commonly used properties for Smart Search styling:
Property | What it changes |
| Text color |
| Background fill |
| Text size |
| Text weight (e.g. |
| Typeface |
| Capitalization (e.g. |
| Border shorthand (width, style, color) |
| Corner roundness |
| Inner spacing |
| Outer spacing |
| Layout behavior (e.g. |
For a wider range of unique CSS properties, explore further at:
Quick View Selectors
Use this reference to style elements within the Rebuy Smart Search Quick View with custom CSS.
Quick View CSS Code 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.
Quick View Containers
The outermost wrappers for Quick View and its two layout variants. Use these to set background color, control panel width, or target the open and close states.
/* All variants */
.rebuy-quick-view { } /* Top-level Quick View wrapper */
.rebuy-quick-view-dropdown { } /* Dropdown variant root */
.rebuy-quick-view-flyout { } /* Flyout variant root */
.rebuy-quick-view-sidebar { } /* Sidebar variant root */
.rebuy-quick-view-skeleton { } /* Loading skeleton root */
#rebuy-quick-view-overlay { }
#rebuy-quick-view-product-id-<id> { } /* Per-product ID (dynamic) */
#overlayDescription { } /* Accessible overlay description */
/* All variants — shared structural elements */
.rebuy-quick-view__container { }
.rebuy-quick-view__title { }
.rebuy-quick-view__results { }
.rebuy-quick-view__no-results { }
.rebuy-quick-view__list { }
.rebuy-quick-view__list-items { }
.rebuy-quick-view__list-item { }
.rebuy-quick-view__image-link { }
.rebuy-quick-view_image { } /* Note: single underscore — not a typo */
/* Dropdown */
.rebuy-quick-view-dropdown__container { }
.rebuy-quick-view-dropdown__container.visible { } /* Open state */
.rebuy-quick-view-dropdown__body { }
.rebuy-quick-view-dropdown__body-left { }
.rebuy-quick-view-dropdown__body-right { }
.rebuy-quick-view-dropdown__close { }
.rebuy-quick-view-dropdown__title { }
.rebuy-quick-view-dropdown__results { }
#rebuy-quick-view-dropdown-search { }
/* Flyout */
.rebuy-quick-view-flyout__background { }
.rebuy-quick-view-flyout__body { }
.rebuy-quick-view-flyout__flyout { }
.rebuy-quick-view-flyout__flyout.right { } /* Right-side open */
.rebuy-quick-view-flyout__flyout.left { } /* Left-side open */
.rebuy-quick-view-flyout__flyout.is-visible { } /* Open state */
.rebuy-quick-view-flyout__flyout-container { }
.rebuy-quick-view__close-button { }
.rebuy-quick-view__subject-title { }
.rebuy-quick-view__results { }
.rebuy-quick-view__no-results { }
.rebuy-quick-view-flyout__live-region { } /* Accessible live region */
#rebuy-quick-view-flyout-search { }
Quick View Overlay and Transitions
The backdrop overlay that appears behind the Quick View panel when it opens. The Vue transition classes control the fade animation on open and close — target these to adjust timing or replace the animation entirely.
.rebuy-quick-view__overlay { }
.rebuy-quick-view__overlay--wide { }
.rebuy-quick-view__overlay-body { }
/* Vue transition classes */
.rebuy-quick-view-overlay-fade-enter { }
.rebuy-quick-view-overlay-fade-enter-active { }
.rebuy-quick-view-overlay-fade-leave-active { }
.rebuy-quick-view-overlay-fade-leave-to { }
Search Input
The search bar inside the Quick View panel. Each variant has its own input class and ID — use the one that matches your active layout.
/* All variants */
.rebuy-quick-view__search-header { }
.rebuy-quick-view__search-input { }
#searchInput { }
/* Dropdown */
.rebuy-quick-view-dropdown__input-container { }
.rebuy-quick-view-dropdown__search-input { }
/* Flyout */
.rebuy-quick-view-flyout__search-header { }
.rebuy-quick-view-flyout__search-input { }
Search Terms, Suggestions, and Keywords
The predictive suggestions and keyword recommendations that appear as a shopper types. These display above the product results in the Quick View panel and help guide shoppers toward relevant queries.
/* All variants */
.rebuy-quick-view__search-term-section { }
.rebuy-quick-view__search-term-section-list-container { }
.rebuy-quick-view__search-term-section-list-term { }
.rebuy-quick-view__suggestions { }
.rebuy-quick-view__suggestions-vertical { }
.rebuy-quick-view__keywords-section { }
.rebuy-quick-view__keyword-list { }
.rebuy-quick-view__keyword { }
.rebuy-quick-view__keyword-title { }
/* Dropdown */
.rebuy-quick-view-dropdown__suggestions { }
.rebuy-quick-view-dropdown__search-term { }
.rebuy-quick-view-dropdown__search-term-list { }
.rebuy-quick-view-dropdown__search-term-section--mobile { }
Product Results
The product cards rendered inside the Quick View panel, including the Add to Cart button, grid layout, and spacing. Column count and gap are set via modifier classes rather than inline styles. The Flyout variant has its own separate grid column classes.
/* All variants */
.rebuy-quick-view__product-section { }
.rebuy-quick-view__product-list { }
.rebuy-quick-view__product { }
.rebuy-quick-view__product-detail { }
.rebuy-quick-view__product-cta { } /* Add to Cart button */
.rebuy-quick-view__product-horizontal { } /* Horizontal layout card */
.rebuy-quick-view__product-grid { }
.rebuy-quick-view__product-grid-column-1 { }
.rebuy-quick-view__product-grid-column-2 { }
.rebuy-quick-view__product-grid-column-3 { }
.rebuy-quick-view__product-grid-column-4 { }
.rebuy-quick-view__product-grid-column-5 { }
.rebuy-quick-view__grid-gap-default { }
.rebuy-quick-view__grid-gap-none { }
.rebuy-quick-view__grid-gap-extra-tight { }
.rebuy-quick-view__grid-gap-tight { }
.rebuy-quick-view__grid-gap-loose { }
.rebuy-quick-view__grid-gap-extra-loose { }
/* Dropdown */
.rebuy-quick-view-dropdown__product-list { }
.rebuy-quick-view-dropdown__grid-gap-default { }
.rebuy-quick-view-dropdown__grid-gap-none { }
.rebuy-quick-view-dropdown__grid-gap-extra-tight { }
.rebuy-quick-view-dropdown__grid-gap-tight { }
.rebuy-quick-view-dropdown__grid-gap-loose { }
.rebuy-quick-view-dropdown__grid-gap-extra-loose { }
/* Flyout */
.rebuy-quick-view-flyout__product-list { }
.rebuy-quick-view-flyout__product-grid { }
.rebuy-quick-view-flyout__product-grid-column-1 { }
.rebuy-quick-view-flyout__product-grid-column-2 { }
.rebuy-quick-view-flyout__product-grid-column-3 { }
.rebuy-quick-view-flyout__product-grid-column-4 { }
.rebuy-quick-view-flyout__product-grid-column-5 { }
Collection and Content Results
Links to matching collections, blog posts, and pages shown alongside product results in Quick View. The two container selectors are distinct — use __collections-products-container for the Dropdown layout and __collections-terms-products-container for the Flyout layout.
/* All variants */
.rebuy-quick-view__collection-section { }
.rebuy-quick-view__collection-list { }
.rebuy-quick-view__collection { }
.rebuy-quick-view__content-section { }
.rebuy-quick-view__content-list { }
.rebuy-quick-view__content { }
.rebuy-quick-view__collection-section .rebuy-quick-view__title { }
/* Dropdown */
.rebuy-quick-view__collections-products-container { }
/* Flyout */
.rebuy-quick-view__collections-terms-products-container { }
Skeleton (Loading State)
Placeholder elements shown while Quick View results are loading. Target these to match the skeleton color and shape to your storefront's design rather than leaving the default gray blocks.
.rebuy-quick-view-skeleton__product { }
.rebuy-quick-view-skeleton__product-horizontal { }
.rebuy-quick-view-skeleton__product-details { }
.rebuy-quick-view-skeleton__product-image { }
.rebuy-quick-view-skeleton__product-name { }
.rebuy-quick-view-skeleton__product-price { }
.rebuy-quick-view-skeleton__collection { }
.rebuy-quick-view-skeleton__content { }
Image Selectors
Product image selectors used across both the Results Page and Quick View surfaces. Includes the hover/secondary image container and the zoom modifier applied on hover.
The most common use cases are aspect-ratio and object-fit on the container and image to control how product photos are cropped, and transform + transition on the zoomed state to control the hover animation speed and scale.
Here are the image selectors with the most useful properties filled in:
/* Image container (the <a> tag wrapping the image) */
.rebuy-smart-search__absolute-image-container {
aspect-ratio: ;
border-radius: ;
overflow: ;
background-color: ;
}
/* The <img> element itself */
.rebuy-smart-search__absolute-image {
object-fit: ; /* e.g. cover, contain */
object-position: ; /* e.g. center, top */
width: ;
height: ;
border-radius: ;
}
/* Hover/zoom state — fires when a shopper hovers the image */
.rebuy-smart-search__absolute-image--zoomed {
transform: ; /* e.g. scale(1.05) */
transition: ; /* e.g. transform 0.3s ease */
}
/* The image link wrapper */
.rebuy-quick-view__image-link {
display: ;
width: ;
height: ;
}
Results Page Selectors
Use this reference to style elements within the Rebuy Smart Search Results Page with custom CSS.
Results Page CSS Code goes in the Results Page Editor under Advanced Settings:
Navigate to Smart Search in your Rebuy admin.
Click Results Page to open the Results Page Editor.
In the left navigation, scroll to Advanced Settings.
Click Custom CSS to open the code editor.
Paste your CSS and click Save.
Results Page Containers
The outermost wrappers for the entire Smart Search feature and the Results Page. Use these to set a background color, control overall width, or override the loading state appearance.
/* Top-level Smart Search wrapper */
.rebuy-smart-search { }
/* Results page root */
.rebuy-smart-search-results-page { }
.rebuy-smart-search-results-page__background { }
.rebuy-smart-search-results-page__container { }
/* Loading state */
.rebuy-smart-search-results-page__loader { }
/* Powered by Rebuy footer */
.powered-by-rebuy { }
/* Layout-specific roots */
.rebuy-smart-search-results-page-dropdown { }
.rebuy-smart-search-results-page-sidebar { }
.rebuy-smart-search-results-page-sidebar-flyout { }
/* IDs */
#rebuy-smart-search-results-dropdown { }
#rebuy-smart-search-results-sidebar { }
#rebuy-smart-search-results-sidebar-flyout-filter { }
#rebuy-smart-search-results-filter-flyout { }
Search Input
The search bar displayed at the top of the Results Page. Each layout has its own input class and ID — use the one that matches your active layout.
.rebuy-smart-search-results-page__input-section { }
.rebuy-smart-search-results-page__input-search-container { }
/* Dropdown */
.rebuy-smart-search-results-page-dropdown__input { }
#rebuy-smart-search-results-page-dropdown__input { }
/* Sidebar */
.rebuy-smart-search-results-page-sidebar__input { }
#rebuy-smart-search-results-page-sidebar__input { }
/* Sidebar + Flyout */
.rebuy-smart-search-results-page-sidebar-flyout__input { }
#rebuy-smart-search-results-page-sidebar-flyout__input { }
Header and Context Bar
The row above the product grid that shows the result count and houses the sort and grid-toggle controls. Left and right sub-elements let you style each side independently.
.rebuy-smart-search-results-page__header-section { }
.rebuy-smart-search-results-page__context-section { }
/* Dropdown */
.rebuy-smart-search-results-page-dropdown__context-section { }
.rebuy-smart-search-results-page-dropdown__context-left { }
.rebuy-smart-search-results-page-dropdown__context-right { }
/* Sidebar */
.rebuy-smart-search-results-page-sidebar__context-section { }
.rebuy-smart-search-results-page-sidebar__context-left { } /* Result count */
.rebuy-smart-search-results-page-sidebar__context-right { } /* Sort / grid toggles */
/* Sidebar + Flyout */
.rebuy-smart-search-results-page-sidebar-flyout__context-section { }
.rebuy-smart-search-results-page-sidebar-flyout__context-left { }
.rebuy-smart-search-results-page-sidebar-flyout__context-right { }
Filters
The filter rail and its individual filter groups — availability, price, vendor, tags, product type, and variant options. Layout-specific selectors control the rail and group structure; the filter option type selectors at the bottom of this block apply to all three layouts.
/* All layouts */
.rebuy-smart-search-results-page__filter-section { }
.rebuy-smart-search-results-page__filter-list-container { }
.rebuy-smart-search-results-page__filter-skeleton { }
/* Dropdown */
.rebuy-smart-search-results-page-dropdown__filter-section { }
.rebuy-smart-search-results-page-dropdown__filter-section-title { }
.rebuy-smart-search-results-page-dropdown__filter-list { }
.rebuy-smart-search-results-page-dropdown__filter-list-header { }
.rebuy-smart-search-results-page-dropdown__filter-list-title { }
.rebuy-smart-search-results-page-dropdown__filter-list-toggle { }
.rebuy-smart-search-results-page-dropdown__filter-list-body { }
.rebuy-smart-search-results-page-dropdown__filter-list-container { }
.rebuy-smart-search-results-page-dropdown__filter-trigger { }
.rebuy-smart-search-results-page-dropdown__filter-skeleton { }
/* Sidebar */
.rebuy-smart-search-results-page-sidebar__filter-section { }
.rebuy-smart-search-results-page-sidebar__filter-section-title { }
.rebuy-smart-search-results-page-sidebar__filter-section--hidden { } /* Hidden state */
.rebuy-smart-search-results-page-sidebar__filter-list { }
.rebuy-smart-search-results-page-sidebar__filter-list-header { }
.rebuy-smart-search-results-page-sidebar__filter-list-title { }
.rebuy-smart-search-results-page-sidebar__filter-list-toggle { }
.rebuy-smart-search-results-page-sidebar__filter-list-body { }
.rebuy-smart-search-results-page-sidebar__filter-list-container { }
.rebuy-smart-search-results-page-sidebar__filter-trigger { }
.rebuy-smart-search-results-page-sidebar__filter-skeleton { }
/* Sidebar + Flyout */
.rebuy-smart-search-results-page-sidebar-flyout__filter-section { }
.rebuy-smart-search-results-page-sidebar-flyout__filter-section-title { }
.rebuy-smart-search-results-page-sidebar-flyout__filter-list { }
.rebuy-smart-search-results-page-sidebar-flyout__filter-list-header { }
.rebuy-smart-search-results-page-sidebar-flyout__filter-list-title { }
.rebuy-smart-search-results-page-sidebar-flyout__filter-list-toggle { }
.rebuy-smart-search-results-page-sidebar-flyout__filter-list-body { }
.rebuy-smart-search-results-page-sidebar-flyout__filter-list-container { }
.rebuy-smart-search-results-page-sidebar-flyout__filter-trigger { }
.rebuy-smart-search-results-page-sidebar-flyout__filter-skeleton { }
/* Filter option types (shared across all layouts) */
.rebuy-smart-search-results-page__filter-label { }
.rebuy-smart-search-results-page__filter-option { }
.rebuy-smart-search-results-page__filter-option-list { }
.rebuy-smart-search-results-page__filter-option-checkbox-label { }
.rebuy-smart-search-results-page__filter-availability { }
.rebuy-smart-search-results-page__filter-vendor { }
.rebuy-smart-search-results-page__filter-product-type { }
.rebuy-smart-search-results-page__filter-product-tags { }
.rebuy-smart-search-results-page__filter-product-option { }
/* Price filter */
.rebuy-smart-search-results-page__filter-price { }
.rebuy-smart-search-results-page__filter-price-block { }
.rebuy-smart-search-results-page__filter-price-label { }
.rebuy-smart-search-results-page__filter-price-input { }
.rebuy-smart-search-results-page__filter-price-dash { }
.rebuy-smart-search-results-page__range { }
.rebuy-range-selection { }
.rebuy-range-selection-label { }
.rebuy-range-selection-disabled { }
#rebuy-option-price-from { }
#rebuy-option-price-to { }
Mobile / Flyout Filter Panel
The overlay panel that contains filters on mobile, and the "Filter and sort" bar that triggers it. Present in the Sidebar and Sidebar + Flyout layouts; not used in the Dropdown layout.
.rebuy-smart-search-results-page__flyout { }
.rebuy-smart-search-results-page__flyout-inner { }
.rebuy-smart-search-results-page__flyout-body { }
.rebuy-smart-search-results-page__flyout-header { }
.rebuy-smart-search-results-page__flyout-header-title { }
.rebuy-smart-search-results-page__flyout-header-close { }
.rebuy-smart-search-results-page__flyout-close { }
.rebuy-smart-search-results-page__flyout-selected-filters { }
.rebuy-smart-search-results-page__flyout-sort-by { }
/* Mobile facets bar */
.rebuy-smart-search-results-page-sidebar__filter-mobile-facets { }
.rebuy-smart-search-results-page-sidebar__filter-mobile-facets-icon { }
.rebuy-smart-search-results-page-sidebar__filter-mobile-facets-label { }
.rebuy-smart-search-results-page-sidebar__filter-trigger--mobile { }
.rebuy-smart-search-results-page-sidebar-flyout__filter-mobile-facets { }
.rebuy-smart-search-results-page-sidebar-flyout__filter-mobile-facets-icon { }
.rebuy-smart-search-results-page-sidebar-flyout__filter-mobile-facets-label { }
Applied Filter Tags
The row of pills showing which filters a shopper has selected, along with the "Clear all" reset link. Appears above the product grid once at least one filter is active.
/* All layouts */
.rebuy-smart-search-results-page__selected-tag-label { }
/* Dropdown */
.rebuy-smart-search-results-page-dropdown__selected-filters { }
.rebuy-smart-search-results-page-dropdown__selected-filters-header { }
.rebuy-smart-search-results-page-dropdown__selected-filters-body { }
.rebuy-smart-search-results-page-dropdown__selected-filters-reset { }
.rebuy-smart-search-results-page-dropdown__selected-filter-tag { }
.rebuy-smart-search-results-page-dropdown__selected-filter-tag-remove { }
/* Sidebar */
.rebuy-smart-search-results-page-sidebar__selected-filters { }
.rebuy-smart-search-results-page-sidebar__selected-filters-header { }
.rebuy-smart-search-results-page-sidebar__selected-filters-body { }
.rebuy-smart-search-results-page-sidebar__selected-filters-reset { } /* "Clear all" */
.rebuy-smart-search-results-page-sidebar__selected-filter-tag { } /* Single filter pill */
.rebuy-smart-search-results-page-sidebar__selected-filter-tag-remove { }
/* Sidebar + Flyout */
.rebuy-smart-search-results-page-sidebar-flyout__selected-filters { }
.rebuy-smart-search-results-page-sidebar-flyout__selected-filters-header { }
.rebuy-smart-search-results-page-sidebar-flyout__selected-filters-body { }
.rebuy-smart-search-results-page-sidebar-flyout__selected-filters-reset { }
.rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag { }
.rebuy-smart-search-results-page-sidebar-flyout__selected-filter-tag-remove { }
Sort By
The sort order control and results-per-page selector. Includes the custom dropdown menu used to display sort options, which has its own sub-selectors for the trigger, title, and list items.
/* All layouts */
#rebuy-smart-search-sort-options { } /* Sort <select> */
#rebuy-smart-search-results-per-page-select { } /* Results-per-page <select> */
.rebuy-sort-by-desktop { }
.rebuy-filter-select-menu { }
.rebuy-filter-select-menu__close { }
.rebuy-filter-select-menu__list-item { }
/* Dropdown */
.rebuy-smart-search-results-page-dropdown__sort-by { }
.rebuy-smart-search-results-page-dropdown__sort-by-label { }
.rebuy-smart-search-results-page-dropdown__dropdown-menu { }
.rebuy-smart-search-results-page-dropdown__dropdown-menu-trigger { }
.rebuy-smart-search-results-page-dropdown__dropdown-menu-title { }
.rebuy-smart-search-results-page-dropdown__dropdown-menu-list-item { }
.rebuy-smart-search-results-page-dropdown__dropdown-menu-list-item--active { }
/* Sidebar */
.rebuy-smart-search-results-page-sidebar__sort-by { }
.rebuy-smart-search-results-page-sidebar__sort-by-label { }
.rebuy-smart-search-results-page-sidebar__sort-by--desktop { }
.rebuy-smart-search-results-page-sidebar__sort-by--mobile { }
.rebuy-smart-search-results-page-sidebar__dropdown-menu { }
.rebuy-smart-search-results-page-sidebar__dropdown-menu-trigger { }
.rebuy-smart-search-results-page-sidebar__dropdown-menu-title { }
.rebuy-smart-search-results-page-sidebar__dropdown-menu-list-item { }
.rebuy-smart-search-results-page-sidebar__dropdown-menu-list-item--active { }
/* Sidebar + Flyout */
.rebuy-smart-search-results-page-sidebar-flyout__sort-by { }
.rebuy-smart-search-results-page-sidebar-flyout__sort-by-label { }
.rebuy-smart-search-results-page-sidebar-flyout__sort-by--mobile { }
.rebuy-smart-search-results-page-sidebar-flyout__dropdown-menu { }
.rebuy-smart-search-results-page-sidebar-flyout__dropdown-menu-trigger { }
.rebuy-smart-search-results-page-sidebar-flyout__dropdown-menu-title { }
.rebuy-smart-search-results-page-sidebar-flyout__dropdown-menu-list-item { }
.rebuy-smart-search-results-page-sidebar-flyout__dropdown-menu-list-item--active { }
Results Grid
The main product grid area and its section title. The Dropdown layout also includes a tab bar for switching between Products, Collections, and Pages results. Grid column count and gap spacing are controlled via utility classes.
/* All layouts */
.rebuy-smart-search-results-page__main-section { }
.rebuy-smart-search-results-page__results-section { }
/* Dropdown */
.rebuy-smart-search-results-page-dropdown__main-section { }
.rebuy-smart-search-results-page-dropdown__result-section { }
.rebuy-smart-search-results-page-dropdown__result-section-title { }
.rebuy-smart-search-results-page-dropdown__tabs { } /* Products / Collections / Pages tab bar */
.rebuy-smart-search-results-page-dropdown__tab { }
.rebuy-smart-search-results-page-dropdown__tab--active { }
/* Sidebar */
.rebuy-smart-search-results-page-sidebar__main-section { }
.rebuy-smart-search-results-page-sidebar__result-section { }
.rebuy-smart-search-results-page-sidebar__result-section-title { } /* e.g. "Products" */
/* Sidebar + Flyout */
.rebuy-smart-search-results-page-sidebar-flyout__main-section { }
.rebuy-smart-search-results-page-sidebar-flyout__result-section { }
.rebuy-smart-search-results-page-sidebar-flyout__result-section-title { }
/* Grid columns: .col-1 through .col-7 */
/* Grid gaps: .gap-none, .gap-extra-tight, .gap-tight, .gap-default, .gap-loose, .gap-extra-loose */
Product Card
The individual product cards rendered in the results grid, including the image, title, price, variant selector, Add to Cart button, star ratings, and the "Promoted" badge. The shared product element selectors (.rebuy-product-*) are used across Rebuy and are not Results Page-specific.
.rebuy-smart-search-results-page__product { }
.rebuy-smart-search-results-page__product-media { }
.rebuy-smart-search-results-page__product-image { }
.rebuy-smart-search-results-page__product-detail { }
.rebuy-smart-search-results-page__product-skeleton { }
.rebuy-smart-search-results-page__absolute-image { }
.rebuy-smart-search-results-page__absolute-image-container { }
.rebuy-smart-search-results-page__absolute-image--zoomed { }
.rebuy-smart-search-results-page__cta { } /* Add to Cart button */
.rebuy-smart-search-results-page__promoted-tag { } /* "Promoted" badge */
/* Shared product elements */
.rebuy-product-info { }
.rebuy-product-title { }
.rebuy-product-price { }
.rebuy-product-options { }
.rebuy-product-actions { }
.rebuy-product-media { }
.rebuy-product-review { }
.rebuy-money { }
.price { }
.compare-at { }
.sale { }
/* Variant selector */
#rebuy-smart-search-results-variant-select { }
/* Star ratings */
.rebuy-star-rating { }
.rebuy-star-rating-container { }
.rebuy-star-rating-background { }
.rebuy-star-rating-foreground { }
.rebuy-star-rating-value { }
.rebuy-review-count { }
Content: Blog posts, Pages / Collection Cards (Dropdown Layout Only)
Cards rendered when a search returns blog posts, pages, or collections rather than products. These selectors are only present in the Dropdown layout, which supports a tabbed results view.
.rebuy-smart-search-results-page-dropdown__content-card { }
.rebuy-smart-search-results-page-dropdown__content-image { }
.rebuy-smart-search-results-page-dropdown__content-details { }
.rebuy-smart-search-results-page-dropdown__content-title { }
.rebuy-smart-search-results-page-dropdown__content-summary { }
Pagination and Continuous Scroll
The standard pagination bar with page numbers and arrows, and the continuous scroll variant which uses a "Load more" button or automatic scroll detection.
.rebuy-smart-search-results-page__pagination { }
.rebuy-smart-search-results-page__pagination-arrow { }
.rebuy-smart-search-results-page__pagination-page { }
.rebuy-smart-search-results-page__pagination-label { }
.rebuy-smart-search-results-page__continuous-scroll { }
.rebuy-smart-search-results-page__continuous-scroll-button { } /* "Load more" button */
.rebuy-smart-search-results-page__continuous-scroll-loader { } /* Spinner */
FAQ
Why is my Quick View CSS affecting the Results Page?
Quick View renders on the Results Page as well as other pages on your storefront. CSS added in the Quick View editor applies wherever it renders, including the Results Page.
Why isn't my Quick View CSS applying on pages outside the Results Page?
Check which editor you added the CSS to. If the style was added in the Results Page editor, it will only apply on the Results Page. Move it to the Quick View editor if you want it to apply everywhere Quick View renders.
Can I use Quick View selectors in the Results Page CSS editor?
Yes, but the styles will only apply on the Results Page. If a shopper triggers Quick View on a different page, those styles will not apply.