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
8382 1650 1662

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 to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 4 (4)

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
8382 1650 1662

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 to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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
8382 1650 1662

Hi @MichelleClark 

Could you share your store URL? 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.