With a bit CSS knowledge you can style the Rapid Search instant Search box to your liking. You can insert the CSS into the Settings /Design -> Custom CSS area of our app.


You can use the following class names.


General styles:

  • .rps-results-page-title - Style the header title
  • .rps-search-results-search-bar-container - Style the search bar
  • .rps-search-results-search-bar-button - Style the search bar button


Filter menu styles:

  • .rps-filter-menu-desktop-container - Filter menu container
  • .rps-filter-block-container - Container of one filter widget
  • .rps-filter-block-header - Filter widget header
  • .rps-filter-block-body-container - Filter widget body


Product styles:

  • .rps-products-container - Products container
  • .rps-product-container - Container of one product snapshot
  • .rps-product-image-container - Container of the product image
  • .rps-product-title - Product title
  • .rps-product-sku - Product SKU
  • .rps-prices-container - Product prices


Keyword suggestions:

  • .rps_predictive_search_history - Style the container of a search history suggestion.
  • .rps_history_block - Style the top level container for all search history suggestions including the title of the section.
  • .rps_predictive_keyword - Style the container of a keyword suggestion.
  • .rps_keyword_block - Style the top level container for all keyword suggestions including the title of the section.


Page suggestions:

  • .rps_predictive_content - Style the container of a page suggestion.
  • .rps_content_block - Style the top level container for all page suggestions including the title of the section.


Mobile instant search box:

  • .rps_mov_search_header - Style the search header of the mobile view.
  • .rps_mov_clear_button - Style the clear button (big X) of the mobile view.
  • .rps_mov_search_button - Style the search icon of the mobile view in the top-right corner.
  • .rps_mov_back_button - Style the back button of the mobile view.