Why is my checkout button invisible on my website?

[BearCollective]

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

[Dan-From-Ryviu]

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;
}

[BearCollective]

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? 

 

[Dan-From-Ryviu]

My mistake, please update code to this

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

[PageFly-Oliver · Accepted solution]

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

<style>
#CartDrawer-Checkout{
    border: solid 1px rgb(var(--color-foreground));
    color: rgb(var(--color-foreground));
}
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[chaka37]

Fixed it! Thank you