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 |
---|---|
140 | |
100 | |
88 | |
56 | |
47 |
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By