FROM CACHE - en_header

Changing Search Icon

Solved
Tom119
Excursionist
25 0 13

Hi, how can i change this icon to a different image and make the icon bigger?

https://nomnomnomnom.myshopify.com

Pass: nomnom

 

ERtrHDmWkAAeleJ.jpg

Accepted Solutions (4)

Accepted Solutions
KetanKumar
Shopify Partner
33631 3375 11109

This is an accepted solution.

@Tom119 

sorry for that issue can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

 

.search-bar--modal button.btn.icon-fallback-text {
    background-image: url(https://cdn.shopify.com/s/files/1/0606/6860/8718/files/search2.png?v=1635506782);
    background-position: center;
    background-repeat: no-repeat;
}
span.icon.icon-search {
    display: none !important;
}

 

After Code

KetanKumar_0-1635615781690.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
33631 3375 11109

This is an accepted solution.

@Tom119 

yes please add this code

 .search-bar--page button.btn.icon-fallback-text {
  background-image: url(https://cdn.shopify.com/s/files/1/0606/6860/8718/files/search2.png?v=1635506782);
  background-position: center;
  background-repeat: no-repeat; }
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
33631 3375 11109

This is an accepted solution.

@Tom119 

yes please add this code

 .search-bar--drawer button.btn.icon-fallback-text {
  background-image: url(https://cdn.shopify.com/s/files/1/0606/6860/8718/files/search2.png?v=1635506782);
  background-position: center;
  background-repeat: no-repeat; }
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
33631 3375 11109

This is an accepted solution.

@Tom119 

yes please try this code 

 .search-bar--drawer button.icon-fallback-text {
  background-image: url(https://cdn.shopify.com/s/files/1/0606/6860/8718/files/search2.png?v=1635506782);
  background-position: center;
  background-repeat: no-repeat; }
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 12 (12)
KetanKumar
Shopify Partner
33631 3375 11109

This is an accepted solution.

@Tom119 

sorry for that issue can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

 

.search-bar--modal button.btn.icon-fallback-text {
    background-image: url(https://cdn.shopify.com/s/files/1/0606/6860/8718/files/search2.png?v=1635506782);
    background-position: center;
    background-repeat: no-repeat;
}
span.icon.icon-search {
    display: none !important;
}

 

After Code

KetanKumar_0-1635615781690.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tom119
Excursionist
25 0 13

@KetanKumar 

Thank you, It works as you said for the pop up.

But on the search page, the icon is gone.

 

ERtrHDmWkAAeleJ.jpg

 

KetanKumar
Shopify Partner
33631 3375 11109

This is an accepted solution.

@Tom119 

yes please add this code

 .search-bar--page button.btn.icon-fallback-text {
  background-image: url(https://cdn.shopify.com/s/files/1/0606/6860/8718/files/search2.png?v=1635506782);
  background-position: center;
  background-repeat: no-repeat; }
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tom119
Excursionist
25 0 13

 

@KetanKumar Thank you it works.

Can you help me one last time please?
The search icon in mobile menu is gone.

 

ERtrHDmWkAAeleJ.jpg

KetanKumar
Shopify Partner
33631 3375 11109

This is an accepted solution.

@Tom119 

yes please add this code

 .search-bar--drawer button.btn.icon-fallback-text {
  background-image: url(https://cdn.shopify.com/s/files/1/0606/6860/8718/files/search2.png?v=1635506782);
  background-position: center;
  background-repeat: no-repeat; }
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tom119
Excursionist
25 0 13

@KetanKumar 

I've added the code to theme.scss.liquid but mobile isn't showing

 

ERtrHDmWkAAeleJ.jpg

KetanKumar
Shopify Partner
33631 3375 11109

This is an accepted solution.

@Tom119 

yes please try this code 

 .search-bar--drawer button.icon-fallback-text {
  background-image: url(https://cdn.shopify.com/s/files/1/0606/6860/8718/files/search2.png?v=1635506782);
  background-position: center;
  background-repeat: no-repeat; }
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tom119
Excursionist
25 0 13

@KetanKumar 

Thank you, everything works.

You're a life saver.

KetanKumar
Shopify Partner
33631 3375 11109

@Tom119 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
rashedhossain
New Member
1 0 1

Dear Brother,

my search icon not showing. can you help please. my website is https://esteemfashionshop.com/

KetanKumar
Shopify Partner
33631 3375 11109

@rashedhossain 

can you please check your theme setting may be disable 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Bossismail1
Excursionist
51 1 5

@rashedhossain 

What a nice store to be precise. But can you please check your theme setting may be disable  and also you haven't include some business section in it.

1. you are suppose to add the blog page that will explain how the product will be used. 

2. Product review to build trust with your visitor

3. Review of other customers to have full trust about your product

4. Language and currency converter Incase you have anyone ordering from other countries that doesn't speak English.

5. Form page.