Whenever the search bar is selected in desktop or mobile there are random products that pop up that I did not assign and cant seem to edit. I want to remove them from the search bar entirely. How can I accomplish this?
Topic summary
Issue: The search bar in a Shopify “Ritual” theme shows random product suggestions the user didn’t assign and wants to remove entirely.
Actions taken:
- A site link was requested and provided (www.autobongs.com).
- A CSS fix was shared to control predictive search (auto-populated suggestions): hide the predictive search container by default and only show it when there are actual results.
- Implementation guidance: add the CSS at the end of the theme’s stylesheet via Shopify Admin (Online Store → Themes → Edit code → Assets), using styles.css; if not present, use base.css or styles.css.liquid.
Outcome:
- The CSS was added and worked perfectly, removing the unwanted product suggestions from the search bar.
Best practices noted:
- Prefer using the theme’s custom CSS setting instead of directly editing files to avoid breaking updates.
- Always back up themes before modifying files.
- Reference provided: Shopify Help article on adding CSS (help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css).
Status: Resolved; no outstanding questions.
@ABdev1 can you please share your website link?
www.autobongs.com here is the domain
please add this css to the very end of your styles.css file and check
shopify admin->online store->themes->edit theme code->assets->styles.css
.predictive-search-results__inner {display: none;}
.predictive-search-results__inner[data-search-results] {display: block;}
1 Like
When I type styles.css into my code search bar nothing comes up.
@ABdev1 check if you have base.css or styles.css.liquid
1 Like
It worked perfectly thank you so much your help and quick responses!
1 Like
@ABdev1 nice to know that it has worked for you.
Use a custom css setting before modifying files directly , or risk breaking thngs and preventing future automatic upgrades.
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
Otherwise ALWAYS backup themes before modifying files.