Shopify themes, liquid, logos, and UX
Hello, I have several problems where my text color is the same as my background. Can you please help me change the text color in black of the following menus:
Here the circle on the top has an X but its white.
Here the search bar is also white.
The Cart also.
And the country menu.
Solved! Go to the solution
This is an accepted solution.
@PabloPier thanks for url can you try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
:is(.drawer,.popover)::part(outside-close-button), .search-input>input, .search-input>input:not(:placeholder-shown)~[type=reset],
.search-input svg.icon.icon-close, .predictive-search__tab-item [aria-selected], .predictive-search__tab-content span.reversed-link, .cart-drawer.drawer p.h5, .cart-drawer.drawer span.reversed-link.hover\:show, .cart-drawer.drawer svg.icon.icon-close,
.cart-drawer.drawer span.h5 .money, .cart-drawer.drawer span.h5, .cart-drawer.drawer p.text-subdued.text-sm, .cart-drawer.drawer span.link.text-sm.text-subdued, select#select-template--23318768320835__main--addresscountry
{
color: #000;
}
.cart-drawer.drawer cart-count.count-bubble.count-bubble--md {
background: #000;
color: #fff;
}
.cart-drawer.drawer sale-price.text-subdued {
color: #808080;
}
.cart-drawer.drawer a.link {
color: #808080;
}
.cart-drawer.drawer
input.quantity-input {
color: #000;
border-color: #808080;
}
.cart-drawer.drawer button.button.button--xl {outline: 1px solid;}
.predictive-search__tab-content compare-at-price.text-subdued.line-through {
color: #808080;
}
:is(.drawer,.popover)::part(outside-close-button) {
color: #000;
}
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
This is an accepted solution.
@PabloPier thanks for url can you try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
:is(.drawer,.popover)::part(outside-close-button), .search-input>input, .search-input>input:not(:placeholder-shown)~[type=reset],
.search-input svg.icon.icon-close, .predictive-search__tab-item [aria-selected], .predictive-search__tab-content span.reversed-link, .cart-drawer.drawer p.h5, .cart-drawer.drawer span.reversed-link.hover\:show, .cart-drawer.drawer svg.icon.icon-close,
.cart-drawer.drawer span.h5 .money, .cart-drawer.drawer span.h5, .cart-drawer.drawer p.text-subdued.text-sm, .cart-drawer.drawer span.link.text-sm.text-subdued, select#select-template--23318768320835__main--addresscountry
{
color: #000;
}
.cart-drawer.drawer cart-count.count-bubble.count-bubble--md {
background: #000;
color: #fff;
}
.cart-drawer.drawer sale-price.text-subdued {
color: #808080;
}
.cart-drawer.drawer a.link {
color: #808080;
}
.cart-drawer.drawer
input.quantity-input {
color: #000;
border-color: #808080;
}
.cart-drawer.drawer button.button.button--xl {outline: 1px solid;}
.predictive-search__tab-content compare-at-price.text-subdued.line-through {
color: #808080;
}
:is(.drawer,.popover)::part(outside-close-button) {
color: #000;
}
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025