0. Useful information regarding the Rapid Search Custom Search Bar:
The search engine of Rapid Search will run in your store after installation, the "Custom Search Bar" term refers to a search bar that is added optionally, replacing your default search bar or search icon of your theme, that can be customized in its design.
1. How to start:
If your store does not have a search bar, or you wish to replace the search bar in your store, you can do this with a few clicks in the Rapid Search Admin, Settings, Custom Search Bar menu, by clicking on the "Customize your search bar" button.
You will be redirected to the Theme settings of your Shopify Admin.
By default, the Custom Search Bar will be attached to your header. You can attach the search bar to another element when you have the "Enable picker" option selected and click an element.
So if you would like your search bar to be placed next to a text in your header, click on the text.
After you click on the text, the search bar will immediately appear next to it. This attaches the search bar under the chosen element, and you can change the position.
Please do not forget to hit both the Save buttons for the search bar to be added to your live store, otherwise, it remains visible in the Preview only! The orange button is to make sure that the placement of the search bar is saved (so this one will appear around the search bar at all times), and the black button is to save all remaining changes.
It is important to choose the larger element to be exact with the placement of the search bar.
So for the cart icon, for example, the screenshot above is the correct example and the screenshot below is the bad example.
It is also important to have the Shopify Inspector tool disabled when you'd like to attach your CSB to an element, otherwise, clicking the element won't have any effect. Fortunately, Shopify will warn you if this is the case with a text on the bottom of your page.
2. Customizing your search bar:
The custom search bar editor places the search bar next to the chosen element, but you can change the placement. You can also change the colors of the search bar to match your theme. You can either choose a color from the color picker or enter a color code.
You may want to change what you see in the search input field. The search bar placeholder can be changed to say "Search" in your store's language or even call out to users i.e. Search for the best cars in the country, etc. Be creative!
You can also change the size of your search bar (in pixels), so increase/decrease the width or height, it can be long, short, big, tiny, whichever suits you the best:
You can choose if you would like the search bar to appear on desktop or mobile devices or both.
Please note that for mobile devices, the search bar will always be placed under the header - you can still customize the colors and the size of the search bar. :-)
And for those with some CSS skills, you can edit custom CSS if you wish to make your search bar even more unique:
Important additional information regarding adding custom CSS in Rapid Search:
You can find two different "Custom CSS" buttons in the Rapid Search app.
- The one found in the Settings, Custom Search Bar menu will be active only when the custom search bar is added to your store. By removing the custom search bar, you will delete all custom CSS added within this menu as well. We recommend you only use the search bar-related CSS here.
- For changes made to the Rapid Search result page or other instances (the ones you'd like to keep even without having Custom Search Bar) we recommend you use the Custom CSS button in the Rapid Search Admin, Settings, Design menu.
3. Understanding Z-index setting
The z-index setting is used to control the stacking order of the Custom Search Bar relative to other elements on the page. Imagine you've added the search bar to your website, but when you select a position for it, you realize it's not visible because it's behind another element, like a banner or a navigation menu. This is where the z-index setting comes in handy. By adjusting the z-index value of the Custom Search Bar, you can bring it to the forefront, ensuring it's visible to your website visitors.
For example, let's say you've placed your search bar near the top of your webpage, but it's hidden behind a large banner image. To resolve this, you would increase the z-index value of the search bar until it appears above the banner. Once you've found the right value, simply hit save to apply the changes.
You can adjust the z-index for mobile devices and desktop devices with two separate settings. When adjusting the z-index for your Custom Search Bar, please ensure you're previewing the correct one. Before tweaking the z-index for mobile devices, make sure you're previewing the mobile version of your website. Similarly, when adjusting the z-index for desktop devices, ensure you're previewing the desktop version. This ensures that the z-index settings are applied accurately to the respective device layout.
If you're unsure about which value to use, you can start with a small adjustment and then gradually increase or decrease the z-index until the search bar is properly displayed.
4. Are you stuck?
Please note that our custom search bar editor is still in Beta version. Should you experience any issues, please click on the chat icon in the right bottom corner to contact us. This will pop up a chat window, and you can send us your request directly and if you reach us within working hours, we aim to respond as soon as possible.
5. Saving your search bar:
When you are done customizing your search bar, simply click on both Save buttons. After having saved, you can view your brand new search bar after refreshing your storefront. :-)
Have you created a search bar, but you wish to remove it? No worries, simply click on the enabling/disabling button for the Rapid Search CSB app embed and Save.
