Change search bar

Solved

Change search bar

Lara14
Tourist
25 0 1

Hello everyone, 

I would like to adjust the design of the search bar. 

It looks currently like this: 

Bildschirmfoto 2024-06-03 um 13.57.36.png

Which code snippet do I have to add where so that the search icon is on the right side and the cross is outside of the search bar? 

 

Link to the website: https://mylongevitylife.com/

 

Thank you! 

Accepted Solution (1)

ZestardTech
Shopify Partner
6068 1087 1457

This is an accepted solution.

Hi @Lara14 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

button.search__button.field__button {
right: 0;
left: auto;
}
.modal__close-button .icon {
margin-left: 30px;
}

 

 

ZestardTech_0-1717417800396.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 3 (3)

ThePrimeWeb
Shopify Partner
2139 616 520

Hey @Lara14,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.search__button {
    right: 0 !important;
    top: 0 !important;
    left: unset !important;
    transform: translateX(0) !important;
}

button.search-modal__close-button.modal__close-button.link.link--text.focus-inset {
    transform: translateX(0) !important;
    right: 0 !important;
    left: unset !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1717417510289.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Liquid_xPert_SJ
Shopify Partner
1348 141 202

@Lara14 

 

.search__button.field__button {
	right: 0 !important;
	left: inherit !important;
}
.modal__close-button.link {
	position: absolute !important;
	right: 0 !important;
	left: inherit !important;
}

 

please add this into your base.css file which is located in the theme files

 

Online Store > Edit code > Theme files > assets > base.css

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.

ZestardTech
Shopify Partner
6068 1087 1457

This is an accepted solution.

Hi @Lara14 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

button.search__button.field__button {
right: 0;
left: auto;
}
.modal__close-button .icon {
margin-left: 30px;
}

 

 

ZestardTech_0-1717417800396.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing