Can I resize the magnifying glass icon on my Debut Theme Shopify store?

BlueTex
Visitor
2 0 0

Is anyone using the LIVE SEARCH app on their store? We use it but we're wanting to increase the size of the magnifying glass icon and I'm not sure how to do that.  I reached out the app developer and they said, "The actual location as well as styling of search box is dependent on the Shopify theme on the store." 

Store is located at: https://bluetexinsulation.com/

Anyone have specific instructions on how I can increase the size of the magnifying glass (& the word "search") on our site?  Ideally it would also say something like "search our site" right after the icon too.

Thanks!

Replies 2 (2)

marcoswata
Shopify Partner
122 10 34

Try this:

Go to your theme and click EDIT CODE.
Then find assets/theme.scss and add this bit of code to the bottom:

 

header.util span.icon.icon-search svg {
  width:18px;
  height:18px;
}

header.util span.icon.icon-search + span.text {
  font-size: 16px;
}

 

If you want an even larger icon, change those "18px" to a bigger number like "22px".

Same for the text, just change that "16px".

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!
BlueTex
Visitor
2 0 0

The only option under Assets for me to choose that was close to what you suggested was theme.scss.liquid

When I pasted the code there and then hit preview, there was no change. The icon is still too small and I even changed the px to a ridiculous number like 60px just to test, but it didn't work.

 

Screen Shot 2021-10-22 at 1.07.22 PM.png

 

Screen Shot 2021-10-22 at 1.07.28 PM.png