Button & Hyperlink became white like disappeared

Store Design
, ,

Topic summary

A Shopify store owner reported two CSS styling issues:

Problem 1: Hyperlinks within collapsible rows on product pages turn white and become invisible.

Problem 2: Add-to-cart buttons in pop-up modals (triggered when selecting variants in featured collections) turn white and appear to disappear.

Multiple users provided CSS solutions targeting the affected elements:

  • For hyperlinks: Add styling to .collapsible-content a or .accordion__content a to restore color and underline decoration
  • For buttons: Add styling to .popup .product-form__submit or quick-add-modal .button to restore background and text colors

Initially, the proposed CSS fixes didn’t work when applied. A follow-up suggestion recommended adding the CSS directly in theme.liquid before the </body> tag using <style> tags as an alternative to editing the base CSS file.

Resolution: The issue was successfully resolved after implementing the alternative placement method.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

Any of you encountered below experiences?

  1. I called one of the page content as collapsible row in product page. The hyperlink looks fine when i browse the page. however, the color of hyperlink within collapsible row will turn white.
    Example: https://sippinhk.com/products/%E4%BA%8C%E5%85%94-%E6%84%9B%E5%B1%B1-48-%E7%B4%94%E7%B1%B3%E5%A4%A7%E5%90%9F%E9%87%80
    (Can check the 2nd collapsible row)

  2. When I choose variant in featured collection, a pop-up page will show up but the add-to-cart button will turn white just like disappear. Feel free to check in featured collection in the main page.

Anyone has clue how to fix them?

Thanks in advance.

2

Hi,

Hope this will help

Problem 1: Hyperlink in collapsible row turns white
-At theme.css, theme.scss.liquid, or base.css under the “Assets” folder.Add css

CSS code example

.collapsible-content a {
  color: #0000EE !important;  /* Makes link text blue */
  text-decoration: underline; /* Makes it look like a link */
}

Problem 2: Add-to-Cart button turns white in pop-up (variant selector)

At css file , add css and Replace .popup and .product-form__submit with your actual classes (use Inspect tool again to confirm them).

CSS code example

.popup .product-form__submit {
  background-color: #000000 !important;  /* Makes background black */
  color: #ffffff !important;             /* Makes text white */
}
3

Hello @henrylauhs ,

Add below css in base.css you can find it under assets.

.accordion__content a {
    color: #000;
}

quick-add-modal .button {
    background: #000 !important;
}

Regards
Guleria

4

Thank you for prompt reply but it does not work.

5

Thank you for prompt reply but they do not work.

6

Where did you add the css ?
If you are not sure how to use the css please do this alternate edit theme.liquid search for now just before to it add the css with style tag.
1 Like
7

Thank you! fixed