Why is my checkout button invisible on my website?

Technical Q&A

Topic summary

A user reports an invisible checkout button on their website that remains functional when clicked. They’re using the Refresh theme and note a “domain needs attention” warning, though its relevance is unclear.

Proposed Solutions:

Two support representatives provided CSS fixes to add to the base.css or theme.liquid files:

  • Target .cart-drawer .cart__checkout-button with border and color properties marked !important
  • One solution was initially incomplete and required a correction

Outcomes:

  • One user (chaka37) confirmed the fix worked for them
  • The original poster tried the first solution without success
  • Another user (Raff112) reports the solution didn’t resolve their issue

Status: The discussion remains open with mixed results. The CSS approach works for some but not all affected users, suggesting potential variations in theme setup or conflicting styles.

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

Need some help with what I believe to be a CSS problem on my site, checkout button is completely invisible but is there. You can click the empty space, and everything works outside it being invisible. I’ve seen a couple of others with the same issue but there’s no real solution on here to DIY it. Currently using the refresh theme. Domain also “needs attention”, don’t know if that has anything to do with it or not. Store URL: Zulify

Capture124321.JPG
Capture124321.JPG403×153 4.99 KB

2

Hi @BearCollective

Please go to your Online store > Themes > Edit code > Assets > open base.css file and add this code at the bottom

.cart-drawer .cart__checkout-button {
border: 2px solid ##FC4F87 !important
color: #FC4F87 !important;
}

Screenshot 2023-10-26 at 08.56.46.png
Screenshot 2023-10-26 at 08.56.46.png492×266 11.6 KB

3

Hi @BearCollective ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

4

Hey @Dan-From-Ryviu , thank you for the quick response! I added the code in the correct spot but nothing changed. What else can I do?

Capture2142315.JPG
Capture2142315.JPG1903×910 167 KB

5

My mistake, please update code to this

.cart-drawer .cart__checkout-button {
border: 2px solid ##FC4F87 !important;
color: #FC4F87 !important;
}
6

Fixed it! Thank you

7

I have tried this and it still doesn’t work. are there any other solutions?