How to remove shopify search icon in Shopify

[Shopify] | How to remove shopify search icon in Shopify

Dec 31, 2020 shopify

The default search icon is pretty boring and you might want to change it to suit your Shopify theme. Remember you will need an SVG icon of your choice to replace Shopify’s search icon.

Contents hide

1. Here is the default search icon in Shopify.

2. Steps to remove Shopify search icon

3. Install expertrec’s Shopify search app

Here is the default search icon in Shopify.

Steps to remove Shopify search icon

Here are steps to change the default Shopify icon-

Download a search SVG icon. (you can download from Freepik)
Open the SVG in chrome.
Right click on the SVG and click on view page source.
Copy this code.
Log in to your Shopify admin panel.
Navigate to Online store-> Themes-> click on edit code.
Go to Snippets-> click on icon-search.liquid.
Delete the contents of this file.
Paste the copied code in step 4 to this file.
Click on save.
Now your Shopify search icon must have changed.

Install expertrec’s Shopify search app

Shopify search app

shopify search app

Add a search engine to your website at 9 USD per month

.hestia-top-bar,.hestia-top-bar .widget.widget_shopping_cart .cart_list{background-color:#363537;}.hestia-top-bar .widget .label-floating input[type=search]:-webkit-autofill{-webkit-box-shadow:inset 0 0 0px 9999px #363537;}.hestia-top-bar,.hestia-top-bar .widget .label-floating input[type=search],.hestia-top-bar .widget.widget_search form.form-group:before,.hestia-top-bar .widget.widget_product_search form.form-group:before,.hestia-top-bar .widget.widget_shopping_cart:before{color:#fff;}.hestia-top-bar .widget .label-floating input[type=search]{-webkit-text-fill-color:#fff !important;}.hestia-top-bar a,.hestia-top-bar .top-bar-nav li a{color:#fff;}.hestia-top-bar a:hover,.hestia-top-bar .top-bar-nav li a:hover{color:#eee;}a,.navbar .dropdown-menu li:hover > a,.navbar .dropdown-menu li:focus > a,.navbar .dropdown-menu li:active > a,.navbar .navbar-nav > li .dropdown-menu li:hover > a,body:not(.home) .navbar-default .navbar-nav > .active:not(.btn) > a,body:not(.home) .navbar-default .navbar-nav > .active:not(.btn) > a:hover,body:not(.home) .navbar-default .navbar-nav > .active:not(.btn) > a:focus,a:hover,.card-blog a.moretag:hover,.card-blog a.more-link:hover,.widget a:hover,.has-accent-color{color:#f94343;}.pagination span.current,.pagination span.current:focus,.pagination span.current:hover{border-color:#f94343;}button,button:hover,.woocommerce .track_order button[type="submit"],.woocommerce .track_order button[type="submit"]:hover,div.wpforms-container .wpforms-form button[type=submit].wpforms-submit,div.wpforms-container .wpforms-form button[type=submit].wpforms-submit:hover,input[type="button"],input[type="button"]:hover,input[type="submit"],input[type="submit"]:hover,input#searchsubmit,.pagination span.current,.pagination span.current:focus,.pagination span.current:hover,.btn.btn-primary,.btn.btn-primary:link,.btn.btn-primary:hover,.btn.btn-primary:focus,.btn.btn-primary:active,.btn.btn-primary.active,.btn.btn-primary.active:focus,.btn.btn-primary.active:hover,.btn.btn-primary:active:hover,.btn.btn-primary:active:focus,.btn.btn-primary:active:hover,.hestia-sidebar-open.btn.btn-rose,.hestia-sidebar-close.btn.btn-rose,.hestia-sidebar-open.btn.btn-rose:hover,.hestia-sidebar-close.btn.btn-rose:hover,.hestia-sidebar-open.btn.btn-rose:focus,.hestia-sidebar-close.btn.btn-rose:focus,.label.label-primary,.hestia-work .portfolio-item:nth-child(6n+1) .label,.nav-cart .nav-cart-content .widget .buttons .button,.has-accent-background-color{background-color:#f94343;}@media (max-width: 768px){.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus,.navbar .navbar-nav .dropdown .dropdown-menu li a:hover,.navbar .navbar-nav .dropdown .dropdown-menu li a:focus,.navbar button.navbar-toggle:hover,.navbar .navbar-nav li:hover > a i{color:#f94343;}}body:not(.woocommerce-page) button:not([class^="fl-"]):not(.hestia-scroll-to-top):not(.navbar-toggle):not(.close),body:not(.woocommerce-page) .button:not([class^="fl-"]):not(hestia-scroll-to-top):not(.navbar-toggle):not(.add_to_cart_button),div.wpforms-container .wpforms-form button[type=submit].wpforms-submit,input[type="submit"],input[type="button"],.btn.btn-primary,.widget_product_search button[type="submit"],.hestia-sidebar-open.btn.btn-rose,.hestia-sidebar-close.btn.btn-rose,.everest-forms button[type=submit].everest-forms-submit-button{-webkit-box-shadow:0 2px 2px 0 rgba(249,67,67,.14),0 3px 1px -2px rgba(249,67,67,.2),0 1px 5px 0 rgba(249,67,67,.12);box-shadow:0 2px 2px 0 rgba(249,67,67,.14),0 3px 1px -2px rgba(249,67,67,.2),0 1px 5px 0 rgba(249,67,67,.12);}.card .header-primary,.card .content-primary,.everest-forms button[type=submit].everest-forms-submit-button{background:#f94343;}body:not(.woocommerce-page) .button:not([class^="fl-"]):not(.hestia-scroll-to-top):not(.navbar-toggle):not(.add_to_cart_button):hover,body:not(.woocommerce-page) button:not([class^="fl-"]):not(.hestia-scroll-to-top):not(.navbar-toggle):not(.close):hover,div.wpforms-container .wpforms-form button[type=submit].wpforms-submit:hover,input[type="submit"]:hover,input[type="button"]:hover,input#searchsubmit:hover,.widget_product_search button[type="submit"]:hover,.pagination span.current,.btn.btn-primary:hover,.btn.btn-primary:focus,.btn.btn-primary:active,.btn.btn-primary.active,.btn.btn-primary:active:focus,.btn.btn-primary:active:hover,.hestia-sidebar-open.btn.btn-rose:hover,.hestia-sidebar-close.btn.btn-rose:hover,.pagination span.current:hover,.everest-forms button[type=submit].everest-forms-submit-button:hover,.everest-forms button[type=submit].everest-forms-submit-button:focus,.everest-forms button[type=submit].everest-forms-submit-button:active{-webkit-box-shadow:0 14px 26px -12px rgba(249,67,67,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(249,67,67,.2);box-shadow:0 14px 26px -12px rgba(249,67,67,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(249,67,67,.2);color:#fff;}.form-group.is-focused .form-control{background-image:-webkit-gradient(linear,left top,left bottom,from(#f94343),to(#f94343)),-webkit-gradient(linear,left top,left bottom,from(#d2d2d2),to(#d2d2d2));background-image:-webkit-linear-gradient(#f94343),to(#f94343),-webkit-linear-gradient(#d2d2d2,#d2d2d2);background-image:linear-gradient(#f94343),to(#f94343),linear-gradient(#d2d2d2,#d2d2d2);}.navbar:not(.navbar-transparent) li:not(.btn):hover > a,.navbar li.on-section:not(.btn) > a,.navbar.full-screen-menu.navbar-transparent li:not(.btn):hover > a,.navbar.full-screen-menu .navbar-toggle:hover,.navbar:not(.navbar-transparent) .nav-cart:hover,.navbar:not(.navbar-transparent) .hestia-toggle-search:hover{color:#f94343;}.header-filter-gradient{background:linear-gradient(45deg,rgba(168,29,132,1) 0%,#ea396f 100%);}.has-header-gradient-color{color:#a81d84;}.has-header-gradient-background-color{background-color:#a81d84;}.has-background-color-color{color:#fff;}.has-background-color-background-color{background-color:#fff;}.btn.btn-primary:not(.colored-button):not(.btn-left):not(.btn-right):not(.btn-just-icon):not(.menu-item),input[type="submit"]:not(.search-submit),body:not(.woocommerce-account) .woocommerce .button.woocommerce-Button,.woocommerce .product button.button,.woocommerce .product button.button.alt,.woocommerce .product #respond input#submit,.woocommerce-cart .blog-post .woocommerce .cart-collaterals .cart_totals .checkout-button,.woocommerce-checkout #payment #place_order,.woocommerce-account.woocommerce-page button.button,.woocommerce .track_order button[type="submit"],.nav-cart .nav-cart-content .widget .buttons .button,.woocommerce a.button.wc-backward,body.woocommerce .wccm-catalog-item a.button,body.woocommerce a.wccm-button.button,form.woocommerce-form-coupon button.button,div.wpforms-container .wpforms-form button[type=submit].wpforms-submit,div.woocommerce a.button.alt,div.woocommerce table.my_account_orders .button,.btn.colored-button,.btn.btn-left,.btn.btn-right,.btn:not(.colored-button):not(.btn-left):not(.btn-right):not(.btn-just-icon):not(.menu-item):not(.hestia-sidebar-open):not(.hestia-sidebar-close){padding-top:15px;padding-bottom:15px;padding-left:33px;padding-right:33px;}.btn.btn-primary:not(.colored-button):not(.btn-left):not(.btn-right):not(.btn-just-icon):not(.menu-item),input[type="submit"]:not(.search-submit),body:not(.woocommerce-account) .woocommerce .button.woocommerce-Button,.woocommerce .product button.button,.woocommerce .product button.button.alt,.woocommerce .product #respond input#submit,.woocommerce-cart .blog-post .woocommerce .cart-collaterals .cart_totals .checkout-button,.woocommerce-checkout #payment #place_order,.woocommerce-account.woocommerce-page button.button,.woocommerce .track_order button[type="submit"],.nav-cart .nav-cart-content .widget .buttons .button,.woocommerce a.button.wc-backward,body.woocommerce .wccm-catalog-item a.button,body.woocommerce a.wccm-button.button,form.woocommerce-form-coupon button.button,div.wpforms-container .wpforms-form button[type=submit].wpforms-submit,div.woocommerce a.button.alt,div.woocommerce table.my_account_orders .button,input[type="submit"].search-submit,.hestia-view-cart-wrapper .added_to_cart.wc-forward,.woocommerce-product-search button,.woocommerce-cart .actions .button,#secondary div[id^=woocommerce_price_filter] .button,.woocommerce div[id^=woocommerce_widget_cart].widget .buttons .button,.searchform input[type=submit],.searchform button,.search-form:not(.media-toolbar-primary) input[type=submit],.search-form:not(.media-toolbar-primary) button,.woocommerce-product-search input[type=submit],.btn.colored-button,.btn.btn-left,.btn.btn-right,.btn:not(.colored-button):not(.btn-left):not(.btn-right):not(.btn-just-icon):not(.menu-item):not(.hestia-sidebar-open):not(.hestia-sidebar-close){border-radius:3px;}h1,h2,h3,h4,h5,h6,.hestia-title,.hestia-title.title-in-content,p.meta-in-content,.info-title,.card-title,.page-header.header-small .hestia-title,.page-header.header-small .title,.widget h5,.hestia-title,.title,.card-title,.info-title,.footer-brand,.footer-big h4,.footer-big h5,.media .media-heading,.carousel h1.hestia-title,.carousel h2.title,.carousel span.sub-title,.woocommerce.single-product h1.product_title,.woocommerce section.related.products h2,.hestia-about h1,.hestia-about h2,.hestia-about h3,.hestia-about h4,.hestia-about h5{font-family:Roboto;}body,ul,.tooltip-inner{font-family:Roboto;}@media (min-width: 769px){.page-header.header-small .hestia-title,.page-header.header-small .title,h1.hestia-title.title-in-content,.main article.section .has-title-font-size{font-size:42px;}}@media (min-width: 769px){.single-post-wrap p:not(.meta-in-content),.page-content-wrap p,.single-post-wrap ul,.page-content-wrap ul,.single-post-wrap ol,.page-content-wrap ol,.single-post-wrap dl,.page-content-wrap dl,.single-post-wrap table,.page-content-wrap table,.page-template-template-fullwidth article p,.main article.section .has-body-font-size{font-size:23px;}}@media (max-width: 480px){.single-post-wrap p:not(.meta-in-content),.page-content-wrap p,.single-post-wrap ul,.page-content-wrap ul,.single-post-wrap ol,.page-content-wrap ol,.single-post-wrap dl,.page-content-wrap dl,.single-post-wrap table,.page-content-wrap table,.page-template-template-fullwidth article p,.main article.section .has-body-font-size{font-size:16px;}}@media (max-width: 768px){.single-post-wrap p:not(.meta-in-content),.page-content-wrap p,.single-post-wrap ul,.page-content-wrap ul,.single-post-wrap ol,.page-content-wrap ol,.single-post-wrap dl,.page-content-wrap dl,.single-post-wrap table,.page-content-wrap table,.page-template-template-fullwidth article p,.main article.section .has-body-font-size{font-size:16px;}}@media (min-width: 769px){section.hestia-team p.card-description,section.hestia-pricing p.text-gray,section.hestia-testimonials p.card-description,section.hestia-blogs p.card-description,.section.related-posts p.card-description,.hestia-contact p,section.hestia-features .hestia-info p,section.hestia-shop .card-description p{font-size:15px;}section.hestia-shop h6.category,section.hestia-work .label-primary,section.hestia-team h6.category,section.hestia-pricing .card-pricing h6.category,section.hestia-testimonials h6.category,section.hestia-blogs h6.category,.section.related-posts h6.category{font-size:13px;}}@media (max-width: 480px){section.hestia-team p.card-description,section.hestia-pricing p.text-gray,section.hestia-testimonials p.card-description,section.hestia-blogs p.card-description,.section.related-posts p.card-description,.hestia-contact p,section.hestia-features .hestia-info p,section.hestia-shop .card-description p{font-size:14px;}section.hestia-shop h6.category,section.hestia-work .label-primary,section.hestia-team h6.category,section.hestia-pricing .card-pricing h6.category,section.hestia-testimonials h6.category,section.hestia-blogs h6.category,.section.related-posts h6.category{font-size:12px;}}@media (max-width: 768px){section.hestia-team p.card-description,section.hestia-pricing p.text-gray,section.hestia-testimonials p.card-description,section.hestia-blogs p.card-description,.section.related-posts p.card-description,.hestia-contact p,section.hestia-features .hestia-info p,section.hestia-shop .card-description p{font-size:14px;}section.hestia-shop h6.category,section.hestia-work .label-primary,section.hestia-team h6.category,section.hestia-pricing .card-pricing h6.category,section.hestia-testimonials h6.category,section.hestia-blogs h6.category,.section.related-posts h6.category{font-size:12px;}}body.custom-background{background-color:#fff;}.copyright.pull-right{display:none;}.related-posts{display:none;}