Solved

Moving the search icon to the right side - impulse theme

technase
Shopify Partner
110 1 25

Hi, can anyone help me with changing the location of the the search icon, I am using impulse theme and I want the search icon to be on the right hand side so its with all the other icons.
Any help would be appreciated. 

 

Link: https://testingstoresandthemes.myshopify.com/

Storefront password: test

technase
Accepted Solution (1)

Vinsinfo
Shopify Partner
268 96 87

This is an accepted solution.

@technase Please follow below steps to move the search icon to right side. Let me know whether it is helpful for you.

 

1. From admin go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Click "Header" and paste the below code in the "Custom CSS" field and save changes.

 

.header-item--left .small--hide .js-search-header {
    display: none !important;
}
a.js-search-header.medium-up--hide {
    display: inline-block !important;
}

 

 

Vinsinfo_0-1714978917033.pngVinsinfo_1-1714978921213.png

 

 

Result will be like, 

Vinsinfo_2-1714978930417.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

View solution in original post

Replies 5 (5)

laddisahsi
Shopify Partner
383 38 40

Hi @technase 

You can follow the following steps:

1. Please remove the width from the html.
2. Please go to the Online Store.
3. Then Edit Code.
4. Please find the theme.liquid file.
5. Please add code before closing the tag </head> tag.

 

<style>

a.site-nav__link.site-nav__link--icon.js-search-header {
    display: none !important;
}

a.site-nav__link.site-nav__link--icon.js-search-header.medium-up--hide {
    display: inline !important;
}

</style>

 

 

laddisahsi_0-1714976415019.png

 




 

 

If this solution is worked, then please Like this and Mark this as accepted solution!


Laddi

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!

oscprofessional
Shopify Partner
15897 2378 3084

HEllo @technase ,
To Move Search Bar to the  right side You need to Edit the Code that header.liquid 

oscprofessional_0-1714977605802.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

PageFly-Noah
Astronaut
1119 201 220

 

This is Noah from PageFly - Shopify Page Builder App

Hi @technase  you need find file header.liquid and find code contain box icon search and past it to fit position. like here:

PageFlyNoah_0-1714977998456.png

PageFlyNoah_1-1714978147335.png

With design in your website. The code icon search will near top file header.liquid.

 

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Vinsinfo
Shopify Partner
268 96 87

This is an accepted solution.

@technase Please follow below steps to move the search icon to right side. Let me know whether it is helpful for you.

 

1. From admin go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Click "Header" and paste the below code in the "Custom CSS" field and save changes.

 

.header-item--left .small--hide .js-search-header {
    display: none !important;
}
a.js-search-header.medium-up--hide {
    display: inline-block !important;
}

 

 

Vinsinfo_0-1714978917033.pngVinsinfo_1-1714978921213.png

 

 

Result will be like, 

Vinsinfo_2-1714978930417.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
technase
Shopify Partner
110 1 25

Thanks mate! worked like a charm

technase