Shopify themes, liquid, logos, and UX
This is an accepted solution.
Here is the custom code that you need to use in your theme.
.header-bar__module.header-bar__search {
background-color: transparent;
}
.header-bar__search-input[type=search] {
opacity: 0;
visibility: hidden;
}
.header-bar__search-submit {
left: 50%;
transform: translate(-50%,0);
}
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:
input.header-bar__search-input {
text-align: center!important;
}
.supports-fontface .header-bar__search-submit {
width: 70%!important;
}
Hope you are doing well?
Kindly, please give me your Shopify store URL.
Thank you
Basically you need your search icon to the right side of your search box.
Am I right?
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:
.header-bar__search button, .header-bar__search form, .header-bar__search input {
width: 90px;
}
input.header-bar__search-input {
text-align: center!important;
}
.supports-fontface .header-bar__search-submit {
width: 50%!important;
}
This is an accepted solution.
Here is the custom code that you need to use in your theme.
.header-bar__module.header-bar__search {
background-color: transparent;
}
.header-bar__search-input[type=search] {
opacity: 0;
visibility: hidden;
}
.header-bar__search-submit {
left: 50%;
transform: translate(-50%,0);
}
Hi, how can I do this on warehouse theme (only leave the search icon and centre the logo)? I copied this, but it didn´t work.
Thanks!
User | RANK |
---|---|
227 | |
147 | |
55 | |
52 | |
46 |
Thanks to all who participated in our AMA with 2H Media on planning your 2023 marketing bu...
By Jacqui Mar 30, 2023Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023