Change the Button Color Add to Cart


When I click on the Add to Cart button, and then there is this notification swipe out from the right screen an there is this button in green.

I have managed to change the border color but not the whole button color.

How do I change the button add to cart button color? Thanks


The way to go about this is to override the CSS. If you are familiar with Dev Tools, you can inspect the button by right clicking it, and browsing through the applied CSS. You will then need to add your own version with !important.

Hi martin

Ya. I did try to but the button would just disappear after a few seconds and Iā€™m not to investigate it.


This can be tricky yes. You can use the Pause Script Execution button on the Dev Tools Sources tab to pause the JS while you investigate.

1 Like

You can target the success notification button like this

.ref-button.ref-button-success {
  --ref-success: var(--bs-tertiary-bg);
  --ref-white: var(--bs-emphasis-color);

.ref-notification.success {
  border-left-color: var(--bs-tertiary-bg);

change the colors to your liking

1 Like