Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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;
}
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.
.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
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;
}
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025