Text Color Change on Variant Picker Blocks and Cart Side Pop-Up (PUBLISHER THEME)

Store Design
,

Topic summary

Issue: Variant picker labels and cart drawer text rendered white on a white background in the Publisher theme, making options unreadable. The site uses a predominantly white-on-black scheme; similar search bar styling issues were previously solved.

Fix (cart drawer): Add CSS overrides in component-cart-drawer.css to set text color to near-black (#010101) for cart item details, product name links, prices, and the remove button, using !important to ensure precedence.

Fix (product page variants): Add CSS in section-main-product.css to set labels inside the product form variant inputs (fieldset .product-form__input label) to #010101 with !important.

Notes: “Variant picker blocks” are the product option selectors (e.g., size, style). The cart drawer is the side pop-up showing items. The CSS !important flag forces the new color to override existing theme styles.

Outcome: The changes resolved the readability issues; the original poster confirmed the fix. Status: Resolved; no remaining open questions. Code snippets are central to the solution.

Summarized with AI on January 11. AI used: gpt-5.
1

I have tried previously solved solution codes added to my base.css.

My variants (style/size/etc.) are populating as white text on white background as my theme is largely white on black background. My pop-up cart is also showing white on white text.

Site is bloodmasssociety.com - no password. I had similar issues with the search bar options but was able to use code from this forum to fix it.

2

Hi @fallopiansaint , go to component-cart-drawer.css and add the following code:

td.cart-item__details {
    color: #010101 !important;
}

a.cart-item__name.h4.break {
    color: #010101 !important;
}

span.price.price--end {
    color: #010101 !important;
}

button.button.button--tertiary.cart-remove-button {
    color: #010101 !important;
}
3

@fallopiansaint , go to section-main-product.css and add the following code :

fieldset.js.product-form__input label {
    color: #010101 !important;
}
1 Like
4

THANK YOU SO MUCH! This fixed it!!

1 Like