Problem with CSS design of purchase button

MaxCosta
Shopify Partner
253 2 59

Hello,

 

I have a problem with the design of my buy button. This is our website: https://artemis-paris.fr/products/achille-veste-laine

 

On any product on the front office, the buy button is white on white by default, and is only visible in hover (screen below):

MaxCosta_0-1713774672338.png

 


However, in my theme, all my design parameters are correct and the buy button is clearly visible. (screen below)

MaxCosta_1-1713774691396.png

 

 

 

Has anyone ever encountered this problem and knows where it might be coming from?

 

Thanks in advance for your help,


Max COSTA

Replies 2 (2)

PageFly-Noah
Astronaut
1119 201 220

 

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

 

<style>
  .purchase-details__buttons button{
     color: black !important;
   }

</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Raj-WebDesigne
Shopify Partner
60 16 14

Add This Css in your Style.css File 

.kqsiVA9Jf8LJAbxw8Bau.h7OYsWHrW5495r9beh2n.jjzYeefyWpPZLH9pIgyw.beR_IRWWHmzzPFJUoa9p.size--small:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #99a98d;
    transition: 0.5s ease;      
}
.kqsiVA9Jf8LJAbxw8Bau.h7OYsWHrW5495r9beh2n.jjzYeefyWpPZLH9pIgyw.beR_IRWWHmzzPFJUoa9p.size--small:before {
    content: "ACHETER MAINTENANT";
    color: #fff;
    position: absolute;
    z-index: 1;
    transition: 0.5s ease;
}
.kqsiVA9Jf8LJAbxw8Bau.h7OYsWHrW5495r9beh2n.jjzYeefyWpPZLH9pIgyw.beR_IRWWHmzzPFJUoa9p.size--small:hover:after {
    background: #fff;
    border: 1px solid #D3D3D3;
    border-radius: 4px;
}
.kqsiVA9Jf8LJAbxw8Bau.h7OYsWHrW5495r9beh2n.jjzYeefyWpPZLH9pIgyw.beR_IRWWHmzzPFJUoa9p.size--small:hover:before {
    color: #000;
}
.purchase-details__buttons .action_button.action_button--secondary{
    color: #000;
}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com