Change search bar

[Lara14]

Hello everyone,

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

It looks currently like this:

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!

[ThePrimeWeb]

Hey @Lara14 ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

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

[Liquid_xPert_SJ]

@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

[ZestardTech]

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;
}