The new Design settings give you more freedom to change the displayed colors of Rapid Search to better suit the style of your store. You can also make additional style changes using CSS.

The left-hand column contains the color settings of 

Instant Search - this is the search box,

Search Results - the product boxes of your search results page,

Badge -  this refers to the badges in the search box and the search results page,

Sticky Widget - floating search icon.

In order to further adjust each widget, their settings are also easily accessible from here via a link at the bottom of each section.

To change the color of different elements, click on the color patterns.

You can use several formats, such as HEX, RGB, or a simple color palette.

Useful information about the menu items:

  • The "price" here means the final price of your product. The "original price" means the full price before any discount.
  • "Hover" means that if you move the cursor (mouse) over an element,  this is the color it will appear in. 
  • Changing the color of the badges will change their colors everywhere, both on the instant search and the result page.
  • By clicking on the Custom CSS button at the bottom-left corner, you can add additional style settings (in CSS format) to the text box, however, you might need some CSS knowledge.
  • You will see the changes in real-time in the Instant Search preview.

Note: You have to save your changes by pressing the Save button in the top right corner for the changes to go into effect!

If you have any questions about designing Rapid Search or if something is not working properly, feel free to contact our kind support HERE.