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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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