Buttons are not showing up.

Shopify Discussion

Topic summary

A Shopify store owner discovered that homepage buttons have become invisible because their color changed to white, making them blend into the background. The buttons remain functional and visible in the theme editor, but not on the live site.

Initial Solution Provided:

  • Navigate to Online Store > Themes > Edit code > component-image-with-text.css
  • Remove the color: #fff; line from the button styling code
  • Screenshots were provided showing the code location

Complication:
Removing the suggested code line revealed a deeper issue: the button text is supposed to be white, but the green background color is missing. Now both text and background match, making buttons still invisible.

Current Status:
The problem remains unresolved. There’s a discrepancy between the theme editor (which displays correctly with green backgrounds and white text) and the live site. The store owner is seeking guidance on restoring the green background color and learning how to use developer tools to locate code more efficiently.

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

Hi,

We recently noticed an issue where it seems like some of the buttons on our homepage have “disappeared”, they are still there it’s just the color has somehow changed to white so you cannot physically see them. However, in the admin> customize, they show up in the editor. We have been changing some colors across our site recently but I cannot seem to figure out where the color for those buttons was changed and why they are showing up correctly in the editor and not on the live site.

SO YOU CAN FIND THE BUTTONS - There are buttons all on our homepage. Under each of the sections that have paragraphs the buttons are right under the first few words on the last line. You can see your cursor change once your hovering over them. Like I said, it appears the color was somehow changed to white so you can’t see them but they are still working buttons.

URL:https://pearsonfarm.com/

2

Hi @Peaches5575

Please go to your Online Store > Themes > click “…” > Edit code > open component-image-with-text.css, find those lines of code

.image-with-text__text + a.btn, 
.image-with-text__text + a.btn + a.btn,
.color-background-2 a.btn {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  width: auto;
  flex: unset;
}

Remove this line from the code above and save file.

color: #fff;

Screenshot 2025-03-11 at 09.33.49.png
Screenshot 2025-03-11 at 09.33.49.png1832×892 208 KB

Screenshot 2025-03-11 at 09.34.50.png
Screenshot 2025-03-11 at 09.34.50.png2962×1258 438 KB

3

Thanks for the reply. I was able to get it to look like it did in your image, however, the text is supposed to be white, it is the background color that is supposed to be that green color. Do you know where i can get that to change or what i could add to the file to get that green to show again.

Also, how were you able to get the devtools bar to show you the files, that seems like it would be very useful when trying to locate where certain bits of code are without having to search through files for hours.

4

Wanted to add that when I remove that line of code, editor still is showing the correct background but now the text matches that background. Is there any reason why the editor would be showing up correctly and the live site isn’t showing the way the editor does. ***Below is what shows up in the editor when the file you said to remove is still there. Once removed the text changes to the same color as the background.

Capture.PNG
Capture.PNG700×483 22 KB