Shopify themes, liquid, logos, and UX
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!
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".
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.
User | RANK |
---|---|
217 | |
149 | |
60 | |
49 | |
46 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023