Solved

How do I remove transparency from the search bar in Spotlight 13.0 theme?

KGreene_24
Visitor
2 0 0

How do I make it so that when using the search bar, it doesn't show up as transparent and has at least a white background? I'm using the spotlight 13.0 theme.

Site URL: https://minimeessentials.com/

Accepted Solutions (3)

Sweet_Savior_3
Shopify Partner
1258 100 123

This is an accepted solution.

Hello @KGreene_24 

 

Please paste the given CSS in base.css file at the bottom.

body .predictive-search {
 background: white;
}

OUTPUT:

Sweet_Savior_3_0-1708021935552.png

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!

View solution in original post

ThePrimeWeb
Shopify Partner
2138 614 491

This is an accepted solution.

Hey @KGreene_24,

 

I'll give you both options, The first one is if you just want to get rid of the transparency and keep the gradient colour, the second one is to get rid of the gradient and make it white colour.

 

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.

 

Use this if you just want to remove the transparency but keep the gradient colour. 

 

<style>
.predictive-search.predictive-search--header {
    background: linear-gradient(45deg, rgba(227, 153, 236, 1) 35%, rgba(181, 98, 209, 1) 58%, rgba(192, 0, 207, 1) 80%,rgba(249, 31, 138, 1) 95%) !important;
}
</style>

 

 

Use this if you want to get rid of the gradient and make it full white

 

<style>
.predictive-search.predictive-search--header {
    background: none !important;
    background-color: white !important;
}
</style>

 

 

 

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

ThePrimeWeb_0-1708021844101.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb
Shopify Partner
2138 614 491

This is an accepted solution.

This is the look for the gradient search 

ThePrimeWeb_0-1708022186700.png

 

 

White is just white haha @KGreene_24 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 6 (6)

Sweet_Savior_3
Shopify Partner
1258 100 123

This is an accepted solution.

Hello @KGreene_24 

 

Please paste the given CSS in base.css file at the bottom.

body .predictive-search {
 background: white;
}

OUTPUT:

Sweet_Savior_3_0-1708021935552.png

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
KGreene_24
Visitor
2 0 0

Do you know how to change the background inside the search bar itself as well? Tp replace the gradient.

ThePrimeWeb
Shopify Partner
2138 614 491

Hey @KGreene_24,

 

Same steps I listed earlier

<style>
input#Search-In-Modal-1 {
    background-color: white !important;
}
</style>

 

Preview:

ThePrimeWeb_0-1708022942009.png

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Sweet_Savior_3
Shopify Partner
1258 100 123

Please add the CSS:

header .search-modal__content .search__input.field__input {
background: white;
}

 

OUTPUT:

Sweet_Savior_3_0-1708023171007.png

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!

ThePrimeWeb
Shopify Partner
2138 614 491

This is an accepted solution.

Hey @KGreene_24,

 

I'll give you both options, The first one is if you just want to get rid of the transparency and keep the gradient colour, the second one is to get rid of the gradient and make it white colour.

 

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.

 

Use this if you just want to remove the transparency but keep the gradient colour. 

 

<style>
.predictive-search.predictive-search--header {
    background: linear-gradient(45deg, rgba(227, 153, 236, 1) 35%, rgba(181, 98, 209, 1) 58%, rgba(192, 0, 207, 1) 80%,rgba(249, 31, 138, 1) 95%) !important;
}
</style>

 

 

Use this if you want to get rid of the gradient and make it full white

 

<style>
.predictive-search.predictive-search--header {
    background: none !important;
    background-color: white !important;
}
</style>

 

 

 

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

ThePrimeWeb_0-1708021844101.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ThePrimeWeb
Shopify Partner
2138 614 491

This is an accepted solution.

This is the look for the gradient search 

ThePrimeWeb_0-1708022186700.png

 

 

White is just white haha @KGreene_24 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!