How can I convert the search icon into a word on my website?

EliteFit · ‎11-28-2023

Hi

I'm currently building my website and don't know how to convert the search character into a word (SEARCH)
maybe someone knows how to do that ?

My website is https://elitefitclo.com/

Dan-From-Ryviu · ‎11-28-2023

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code after <head> tag

<style>
.header__icon--search {
    position: relative;
    margin-right: 24px;
}
summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle:after {
    content: 'SEARCH';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0px, -1px);
}
.header__icon--search > span { 
    opacity: 0; 
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Ahmad032141 · ‎11-28-2023

If you know how to edit files in your theme, go to header.liquid and replace the code highlighted in the first image with the code highlighted in the second image.

Dan-From-Ryviu · ‎11-28-2023

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code after <head> tag

<style>
.header__icon--search {
    position: relative;
    margin-right: 24px;
}
summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle:after {
    content: 'SEARCH';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0px, -1px);
}
.header__icon--search > span { 
    opacity: 0; 
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

MichelleClark · ‎07-05-2024

hi there, thanks for the solution!

Is there a way to keep the search icon and have the word SEARCH?

Dan-From-Ryviu · ‎07-05-2024

Hi @MichelleClark

Could you share your store URL?

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

DripMelbourne · ‎08-22-2024

Hello, this is great! Are you able to please provide this code for the Cart and Account Icons too so they all match. Thank you ☺️

How can I convert the search icon into a word on my website?

How can I convert the search icon into a word on my website?

Community Blog Articles