Change Header Dropdown Background Colors

Solved

Change Header Dropdown Background Colors

CARDPIECE
Tourist
6 0 2

Hi there,

 

I am wanting to change the background color of the search field drop down as well as the cart drop down.

 

Its currently matching the background color of the header, I want it to be white instead. 

 

Thanks!

 

Store: cardpiece.com

 

CARDPIECE_0-1720538645262.png

 

CARDPIECE_0-1720538743306.png

 

 

Accepted Solution (1)

BSSCommerce-TC
Shopify Partner
215 46 49

This is an accepted solution.

Hi @CARDPIECE ,

 

Please insert code at the end  base.css file

 

#predictive-search-results,
#cart-notification {
   background-color: white !important;
}

.predictive-search__item-heading,
.predictive-search__heading,
.cart-notification__heading,
.cart-notification-product__name,
#cart-notification .product-option,
.cart-notification__links button.link.button-label {
    color: #d73533 !important;
}

.cart-notification__links button[name="checkout"] {
    background: #d73533 !important;
    color: white !important;
}

#cart-notification button.cart-notification__close {
     color: #d73533 !important;
}

 

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


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 3 (3)

Moeed
Shopify Partner
4373 1128 1386

Hey @CARDPIECE 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.predictive-search__heading {
    color: black !important;
}
.predictive-search__item-heading a {
    color: black !important;
}
.predictive-search__item-heading span {
    color: black !important;
}
.predictive-search__item-heading mark {
    color: black !important;
}
.predictive-search__item-heading p {
    color: black !important;
}
.predictive-search.predictive-search--header {
    background: white !important;
}
</style>

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

BSS-TekLabs
Shopify Partner
635 177 207

- Here is the solution for you @CARDPIECE 
- Please follow these steps:

step.png

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

.search__input.field__input, predictive-search[open] .predictive-search, #cart-notification {
     background: white !important;
}
.search__input.field__input, .predictive-search__item--term, .predictive-search__item--term .icon-arrow, .predictive-search__heading, .predictive-search__item-heading, .cart-notification__heading, .modal__close-button.link, .cart-notification-product__name {
     color: black !important;
}

- Here is the result you will achieve:

BSSTekLabs_0-1720540093071.png

BSSTekLabs_1-1720540247448.png

 

 

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

BSSCommerce-TC
Shopify Partner
215 46 49

This is an accepted solution.

Hi @CARDPIECE ,

 

Please insert code at the end  base.css file

 

#predictive-search-results,
#cart-notification {
   background-color: white !important;
}

.predictive-search__item-heading,
.predictive-search__heading,
.cart-notification__heading,
.cart-notification-product__name,
#cart-notification .product-option,
.cart-notification__links button.link.button-label {
    color: #d73533 !important;
}

.cart-notification__links button[name="checkout"] {
    background: #d73533 !important;
    color: white !important;
}

#cart-notification button.cart-notification__close {
     color: #d73533 !important;
}

 

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


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency