No search bar

[ReviveShop]

Hey guys, I wanna replace this with a search bar, can anyone help?

https://luviera.store/

pw: bautso

[Sangeetanahar]

hello @ReviveShop 

Go to online store ----> themes ----> actions ----> edit code ---->assets ----> base.css...>
add the code end of the file

details-modal.header__search {
    display: block !important;
}
svg.icon.icon-account {
    display: none !important;
}
a.header__icon.header__icon--account.link.focus-inset.small-hide {
    display: none;
}

result

thanks

[ReviveShop]

Did not change anything. Usually when I paste anything in base.css it never works

[GTLOfficial]

Hello @ReviveShop 

Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

.icon.icon-account {
display: none !important;
}
.header__icon.header__icon--account.link.focus-inset.small-hide {
display: none !important;
}
details-modal.header__search {
display: block;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[BSSCommerce-B2B · Accepted solution]

@ReviveShop ,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag:

<style>
details-modal.header__search {
    display: block !important;
}
.icon.icon-account {
    display: none !important;
}
.header__icon.header__icon--account {
    display: none;
}
</style>

Result:

[ReviveShop]

Perfect!!!

[ReviveShop]

When I search on the home page the font has to be black though. Can you fix this?

 

[BSSCommerce-B2B]

@ReviveShop , change previous code i've sent like this

<style>
details-modal.header__search {
    display: block !important;
}
.icon.icon-account {
    display: none !important;
}
.header__icon.header__icon--account {
    display: none;
}
search-form.search-modal__form * {
   color: #000!important;
}
</style>

Result:

[ReviveShop]

Thank you!

[BSSCommerce-HDL]

Hi @ReviveShop, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.header  details-modal.header__search {
   display: inline-flex !important;
}

.header-wrapper * {
    color: unset !important;
}

nav.header__inline-menu li,
summary.header__icon.header__icon--search,
.header  button.disclosure__button {
    color: #ffff !important;
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍