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

Solved

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

EliteFit
Excursionist
18 1 1

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/

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10227 2033 2103

This is an accepted solution.

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

Replies 5 (5)

Ahmad032141
Shopify Partner
30 3 6

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.
Screenshot (1).pngScreenshot (2).png

Dan-From-Ryviu
Shopify Partner
10227 2033 2103

This is an accepted solution.

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
Shopify Partner
25 0 5

hi there, thanks for the solution! 

 

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

 

Dan-From-Ryviu
Shopify Partner
10227 2033 2103

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
Visitor
1 0 0

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 ☺️