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
24919 2497 9031

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
24919 2497 9031

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
24919 2497 9031

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
24919 2497 9031

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
24919 2497 9031

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

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
24919 2497 9031

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

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
24919 2497 9031

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

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
24919 2497 9031

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

Tom119
Excursionist
25 0 13

@KetanKumar 

Thank you, everything works.

You're a life saver.

KetanKumar
Shopify Partner
24919 2497 9031

@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