How can I alter my home page search icon to a large search bar at the top?

Store Design

Topic summary

A user wants to replace their homepage search icon with a large search bar at the top of their Shopify store (using the Ride theme).

Initial Solution Attempted:

  • Another user suggested adding CSS code to the base.css file to modify the search icon dimensions and color
  • This only changed the existing icon’s appearance rather than creating a full search bar

Current Status:

  • The CSS modification did not achieve the desired result
  • It appears the store may have a custom search implementation rather than the theme’s default search functionality
  • Significant code changes would be required to transform the search icon into a proper search bar
  • The issue remains unresolved, with no clear solution provided yet
Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

How do I change my home page search icon to a big search bar at the top? Roughly as attached

Website is https://www.slimesnewcastle.com.au/ using the Ride Theme

Slimes.jpg
Slimes.jpg1854×852 113 KB

2

Hi @Tim1305

You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

.modal__toggle-open.icon.icon-search svg{
  width: 30px;
  height: 30px;
  color: orange;
}
3

That just changed the existing search icon orange but didn’t add a search bar

Thanks, Tim

4

Hi @Tim1305
It seems, you added custom search for your theme, I think it is not original search of your theme.
In this case you need to change a lot of in your code to make the search function show as you want.